chart1 = {
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','1')
.style("stroke-width", ".25")
.style("stroke", "rgb(0,0,0)")
var g = svg.append("g").attr("id", "paths");
g.selectAll("path")
.data(NYSTA_Route.features)
.enter()
.append("path")
.attr('class','outlines')
.attr("d", path)
.style('fill-opacity','0')
.style("stroke-width", ".75")
.style("stroke", "rgb(255,0,0)")
var c = svg.selectAll('circle')
.data(Traffic_2018.features)
.enter()
.append("circle")
.attr('cx',function(d) {return path.centroid(d)[0]})
.attr("cy",function(d) {return path.centroid(d)[1]})
.attr('r',5)
.attr('fill','green')
.style('fill-opacity','1')
.on("mouseover",addfill)
.on("mouseout",removefill3)
function addfill(event,d) {
d3.select(this).style('fill','black')
d3.select(this).style('fill-opacity','1')
d3.select(this).attr('r',10)
}
function removefill3(event,d) {
d3.select(this).style('fill','green')
d3.select(this).style('fill-opacity','1')
d3.select(this).attr('r',5)
}
const tooltip = svg.append("g");
svg
.selectAll("circle")
.on("touchmove mousemove", function(event, d) {
const centroid = path.centroid(d);
tooltip.call(
callout,
`${d.properties.RCSTA}
${d.properties.TDV_ROUTE}
${d.properties.Year_Total}`
);
tooltip.attr("transform", "translate(" + centroid + ")");
})
.on("mouseleave",function(event, d){tooltip.call(callout, null)});
return svg.node();
}