chart = {
const zoom = d3.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed);
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [-60, 0, width, height]);
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], zips);
var path = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
g.selectAll("path")
.data(zips.features)
.enter()
.append("path")
.attr('class','outlines')
.attr("d", path)
.style("fill", "white")
.style('fill-opacity','.5')
.style("stroke-width", ".25")
.style("stroke", "#ccc")
//insert parks into map
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(nycParks.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "red")
.style('fill-opacity','.25')
.style("stroke-width", ".2")
.style("stroke", "rgb(255,0,0)")
.on("mouseover", addBoundingBox)
.on("mouseleave", removeBoundingBox);
g.selectAll("path2") //d3 geopath
//svg
//.selectAll('path')
.data(subway_lines.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style('fill-opacity','0')
.style("stroke-width", ".35")
.style("stroke", "rgb(0,0,0)")
//var l = svg.append("l").attr("id", "line");
svg.selectAll('line')
.data(subSts.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("line") //appends path to data
.attr('x1',function(d) {return path.centroid(d)[0]})
.attr("y1",function(d) {return path.centroid(d)[1]})
.attr('x2',100)
.attr('y2',function(d, i) { return i * 2 + 20; })
.attr('stroke-width','.4')
.style("stroke", "rgb(0,0,0)")
g.selectAll("circle") //d3 geopath
//svg
//.selectAll('path')
.data(subSts.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('cx',function(d) {return path.centroid(d)[0]})
.attr("cy",function(d) {return path.centroid(d)[1]})
.attr('r',1.5)
.attr('fill','black')
.style('fill-opacity','.9')
.on("mouseover", addBox)
//.on("mouseleave", removeBox);
function addBoundingBox(event, d) {
d3.select(this).style("fill", 'blue');
d3.select(this).style('fill-opacity','1');
svg
.append("text")
.attr("class", "labels")
.attr('x',100)
.attr('y',100)
.attr("font-size", ".35em")
.text(d.properties.park_name);
}
function removeBoundingBox(event, d) {
d3.selectAll("text.labels").remove();
d3.select(this).style("fill", 'red');
d3.select(this).style('fill-opacity','.25')
}
svg.call(zoom);
function reset() {
subSts.transition().style("fill", null);
svg.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity,
d3.zoomTransform(svg.node()).invert([width / 2, height / 2])
);
}
function clicked(event, d) {
const [[x0, y0], [x1, y1]] = path.bounds(d);
event.stopPropagation();
subSts.transition().style("fill", null);
d3.select(this).transition().style("fill", "red");
svg.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity
.translate(width / 2, height / 2)
.scale(Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height)))
.translate(-(x0 + x1) / 2, -(y0 + y1) / 2),
d3.pointer(event, svg.node())
);
}
function zoomed(event) {
const {transform} = event;
g.attr("transform", transform);
g.attr("stroke-width", 1 / transform.k);
}
var tooltip = svg.append("g");
function addBox(event, d) {
var centroid = path.centroid(d);
//var centroid = function(d) {return path.centroid(d)};
tooltip.call(
callout,
`${d.properties.name}
${d.properties.line}, ${d.properties.line}`
);
tooltip.attr("transform", "translate(" + centroid + ")");
}
//create tooltip
var centroid = function(d) {return path.centroid(d)};
//listen for mouse events and add text/bounding boxes
svg
.selectAll("circle")
//.on("touchmove mousemove", function(event, d) {
//tooltip.attr("transform", "translate(" + function(d) {return path.centroid(d)[0]}+","+function(d) {return path.centroid(d)[1]} + ")");
//tooltip.attr(centroid);
//})
.on("mouseleave",function(event, d){tooltip.call(callout, null)});
return svg.node();
}