Develop Reference

projectionStream is not a function in D3.js v4

We are working on this website http://bandaultralarga.italia.it/mappa-bul/
On that page we have a gMap where we draw some polygons on top, using d3(v3) and topoJson.
Now we want (would like) to switch to the new v4 to add new data viz design on the page but keeping what we already had.
Troubles come in the overlay function below where we translate the coordinates into the Google Map system.
Referring to D3 v4 API Docs we switched from:
path = d3.geo.path().projection(googleMapProjection);
to:
path = d3.geoPath().projection(googleMapProjection);
but this generates the subject error (projectionStream is not a function.)
Any clue to get this to work again?
var overlay = new google.maps.OverlayView();
overlay.onAdd = function () {
var div = document.createElement('div');
div.id = 'svg_map';
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
this.getPanes().overlayMouseTarget.appendChild(div);
overlay.draw = function () {
var overlayProjection = this.getProjection();
var googleMapProjection = function (coordinates) {
var googleCoordinates = new google.maps.LatLng(coordinates[0], coordinates[1]);
var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
};
path = d3.geoPath().projection(googleMapProjection); // Here is where troubles come
generaOverlay(overlay, datiShape);
};
};
overlay.setMap(map);

mbostock answer:
Please read the d3-geo release notes or CHANGES.md:
“Fallback projections”—when you pass a function rather than a projection to path.projection—are no longer supported. For geographic projections, use d3.geoProjection or d3.geoProjectionMutator to define a custom projection. For arbitrary geometry transformations, implement the stream interface; see also d3.geoTransform.

EaseJS applying Color filter to Bitmap

I use easeJS in the implementation of the game robolucha, currently we display different colors of the characters by using shapes under transparent images.
We want to use Bitmaps and apply color filters to it.
Sadly the ColorFilter is not working.
The Fiddle is here for the code : https://jsfiddle.net/athanazio/7z6mqnrk/
And here is the code I´m using
var stage = new createjs.Stage("filter");
var head = new createjs.Container();
head.x = 300;
head.y = 300;
head.regX = 100;
head.regY = 100;
var path = "https://raw.githubusercontent.com/hamilton-lima/javascript-samples/master/easejs/colorfilter/";
var layer1 = new createjs.Bitmap(path + "layer1-green.png");
layer1.image.onload = function(){
layer1.filters = [ new createjs.ColorFilter(0, 0, 0, 1, 0, 0, 255, 1) ];
layer1.cache(0,0,200,200);
}
var layer2 = new createjs.Bitmap(path + "layer2.png");
head.addChild(layer1);
head.addChild(layer2);
stage.addChild(head);
createjs.Ticker.addEventListener("tick", headTick);
function headTick() {
head.rotation += 10;
}
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
stage.update();
}

The ColorFilter does not work in this example because the image is being loaded cross-domain. The browser will not be able to read the pixels to apply the filter. I am not exactly sure why there is no error in the console.
EaselJS has no mechanism to automatically handle cross-origin images when it creates images behind the scenes (which it does when you pass a string path). You will have to create the image yourself, set the "crossOrigin" attribute, and then set the path (in that order). Then you can pass the image into the Bitmap constructor.
var img = document.createElement("img");
img.crossOrigin = "Anonymous";
img.onload = function() {
// apply the filter and cache it
}
img.src = path + "layer1.png";
layer1 = new createjs.Bitmap(img);
You don't have to wait for the image to load to create the Bitmap and apply the filter, but you will have to wait to cache the image.
This fix also requires a server that sends a cross-origin header, which git does. Here is an updated fiddle with that change. Note that if your image is loaded on the same server, this is not necessary.
https://jsfiddle.net/7z6mqnrk/10/
Cheers.

Antlr4 Javascript Visitor

I'm currently trying to develope a JavaScript Compiler with the help of an Antlr4 Visitor. I've got this already implemented with Java but cannot figure out how to do this in JavaScript. Probably somebody can answer me a few questions?
1: In Java there is a Visitor.visit function. If im right this isn't possibile with Javascript. Is there a work around for this?
2: My Javascript Visitor got all the generated visiting functions but when I use console.log(ctx) the context is undefined. Any idea why?
Extract from the SimpleVisitor.js:
// Visit a parse tree produced by SimpleParser#parse.
SimpleVisitor.prototype.visitParse = function(ctx) {
console.log(ctx);
};
Main js file:
var antlr4 = require('lib/antlr4/index');
var SimpleLexer = require('antlr4/SimpleLexer');
var SimpleParser = require('antlr4/SimpleParser');
var SimpleVisitor = require('antlr4/SimpleVisitor');
var input = "double hallo = 1;";
var chars = new antlr4.InputStream(input);
var lexer = new SimpleLexer.SimpleLexer(chars);
var tokens = new antlr4.CommonTokenStream(lexer);
var parser = new SimpleParser.SimpleParser(tokens);
var visitor = new SimpleVisitor.SimpleVisitor();
parser.buildParseTrees = true;
var tree = parser.parse();
visitor.visitParse();
This is probably enough to start with ...
Bruno
Edit:
Probably the context is undefined because I call the function without arguments but where do I get the "starting"-context?
Edit2:
So I think I get the idea how this should work out. One Question remaining how do I determine which rule to call next inside each visitor function?

The basic idea behind the visitor is that you have to handle all the logic by yourself. To do this I generated the visitor using antlr. My own visitor overrides all functions that I need to implement my logic.
create lexer, tokens, ...
var antlr4 = require('antlr4/index');
var SimpleJavaLexer = require('generated/GrammarLexer');
var SimpleJavaParser = require('generated/GrammarParser');
var SimpleJavaVisitor = require('generated/GrammarVisitor');
var Visitor = require('./Visitor');
var input = "TestInput";
var chars = new antlr4.InputStream(input);
var lexer = new GrammarLexer.GrammarLexer(chars);
var tokens = new antlr4.CommonTokenStream(lexer);
var parser = new GrammarParser.GrammarParser(tokens);
var visitor = new Visitor.Visitor();
parser.buildParseTrees = true;
var tree = parser.parse();
and call your entry function
visitor.visitTest(tree);
inside your new visitor you need to implement your new logic to determine which function to call next (the right context as argument is important)
var GrammarVisitor = require('generated/GrammarVisitor').GrammarVisitor;
function Visitor () {
SimpleJavaVisitor.call(this);
return this;
};
Visitor.prototype = Object.create(GrammarVisitor.prototype);
Visitor.prototype.constructor = Visitor;
Visitor.prototype.visitTest = function(ctx) {
// implement logic to determine which function to visit
// then call next function and with the right context
this.visitBlock(ctx.block());
};
I hope you can understand my basic idea. If anybody got any questions just comment.

GetSubRaster and show in another canvas PaperJS

I am new to JavaScript and PaperJS. What I am trying to do is:
1) Load image to canvas using raster - done
var imageCanvas = document.getElementById('image-canvas');
var drawCanvas = document.getElementById('draw-canvas');
var img = document.getElementById('img');
imageCanvas.width = img.width;
imageCanvas.height = img.height;
var scope = new paper.PaperScope();
scope.setup(drawCanvas);
scope.setup(imageCanvas);//this will be active
var views = [2];
views[0] = scope.View._viewsById['image-canvas'];
views[1] = scope.View._viewsById['draw-canvas'];
views[0]._project.activate(); //making sure we are working on the right canvas
raster = new paper.Raster({source:img.src, position: views[0].center});
2) get the sub raster of the image; the rectangle is drawn by the user using mouse drag events. But for the sake of convenience lets say I have a rectangle at position (10,10) and dimensions (100,100)
3) get the sub raster and show the preview in other drawcanvas
views[1]._project.activate();// activating draw-canvas
var subras = raster.getSubRaster(new paper.Path.Rectangle(new paper.Point(10,10), new paper.Size(100,100))); //Ignore if the rectangle inside is not initialized correctly
But, nothing happens on the draw-canvas.
I also tried using
var subrasdata = raster.getSubRaster(new paper.Path.Rectangle(new paper.Point(10,10), new paper.Size(100,100))).toDataURL();
but it gives me
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
Is there any other way to get the sub raster and pasting it in other canvas?

Instead of getSubRaster() I used Raster#getSubCanvas and Context#drawImage to paste in new canvas. So in short
canvasSrc = raster.getSubCanvas(rect);
destinationCanvasContext.drawImage(canvasSrc,0,0);

this code gives 0 as height and width for the first time it iterates and the second time gives the right dimensions

var icon1 = new Image();
icon1.src = resource;
var width = icon1.width;
var height = icon1.height;
This code when iterates gives 0 as width and height for the first time it iterates and for the second time it gives right dimensions.

You haven't really shown enough code (and general context) to be sure, but I'd wager that the first time, the image hasn't loaded, and the second time, it has.

You can make sure the image has loaded first via the onload event.
var resource = "http://placehold.it/50";
var icon1 = new Image();
var wid1;
var hei1;
icon1.onload = function() {
wid1 = icon1.width;
hei1 = icon1.height;
console.log(wid1);
console.log(hei1);
};
icon1.src = resource;

try assigning the resource to the src before defining the onload function.
var resource = "http://placehold.it/50";
var icon1 = new Image();
var wid1;
var hei1;
icon1.src = resource;
icon1.onload = function() {
wid1 = icon1.width;
hei1 = icon1.height;
console.log(wid1);
console.log(hei1);
};