xxxxxxxxxx<meta charset="utf-8"><style type="text/css"> body { font-family: arial, sans; font-size: 11px; margin: 10px auto; width:1220px; } svg { border: 1px solid #f0f; } .g-county{ fill: #dedede; stroke-width: 0.3px; stroke: #fff; } .g-state{ fill: none; stroke-width: 0.6px; stroke:black; } .g-county:hover{ stroke:blue; }/* .g-hovering{ stroke:red; }*/</style><body><h1>Origin of Guns Found In Chicago Crimes</h1></body><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script><!-- topojson pull --><script src="https://d3js.org/topojson.v1.min.js"></script><!-- queue library good for async data loading! --><script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script><script type="text/javascript"> var width = 900, height = 600; var svg = d3.select("body").append("svg") .attr("width", width ) .attr("height", height ); //init the D3 path for geography //by default is albers equal area projection, but it can take an argument for other projections var path = d3.geo.path(); //replaces the d3.json load queue() .defer(d3.json,"us.json") .defer(d3.csv,"guns-history.csv") .await(ready); //us.json is of type topojson, must convert it to geojson //this data is already projected for us, which is nice... // d3.json("us.json",ready); function ready(err, us, guns){ if(err){console.warn(error);} //converting topojson to geojson unpacking) //getting the counties, not the states or the land outline var countyFeatures = topojson.feature(us, us.objects.counties).features; var stateFeatures = topojson.feature(us, us.objects.states).features; //Binned threshold scale https://bl.ocks.org/mbostock/3306362 var color = d3.scale.threshold() .domain([1,10,50,100,300,500,800,1200]) //https://bl.ocks.org/mbostock/5577023 //keep the range +1 longer than the domain .range(["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"]); console.log("US TopoJSON: ",us,"Guns History: ",guns,"US GeoJSON County Features: ",countyFeatures,"US GeoJSON State Features: ",stateFeatures); //Javascript dictionary example O(1) lookup var gunsByFips = {}; var areaNameByFips = {}; guns.forEach(function(d){ d.count3 = +d.count3; d.FIPS = +d.FIPS; //construsting the dictionary here gunsByFips[d.FIPS] =d.count3; areaNameByFips[d.FIPS] = d.county+", "+d.STATE; }); svg.append("g") .attr("class","county-feature-container") .selectAll("path") .data(countyFeatures) .enter() .append("path") //pass the data to the path init from avobe .attr("class","g-county") .attr("d",path); svg.append("g") .attr("class","county-circle-container") .selectAll("circle") .data(countyFeatures) .enter() .append("circle") //pass the data to the path init from avobe .attr("class","g-county-bubble") .attr("r",function(d){ //area = pi*r^2 ...must not lie with our data, must take the sqrt // return Math.sqrt(gunsByFips[d.id]); //need the scalar here /3 return Math.sqrt(gunsByFips[d.id]/3); }) //must find the centroid of the svg path here for the county .attr("transform",function(d){ return "translate("+path.centroid(d)[0]+","+path.centroid(d)[1]+")"; }) .style("fill",function(d){ return (gunsByFips[d.id] >0)?color(gunsByFips[d.id]):"#dedede"; }) .style("opacity",0.5); // .style("fill",function(d){ // //coloring strategy here is to showcase extent of data - where are all the places these guns came from // //return (gunsByFips[d.id] >0)?"red":"#dedede"; // return (gunsByFips[d.id] >0)?color(gunsByFips[d.id]):"#dedede"; // }) // .on("mouseover",function(d){ // console.log(d,"Name: ",areaNameByFips[d.id],"Num Guns: ",gunsByFips[d.id]); // //d.id === FIPS code, nice feature of geojson // //must bring the shape to the front of the map on hover - there is a overlapping issue with the strokes here // // d3.select(this).classed("g-hovering",true); // }); svg.append("g") .attr("class","state-feature-container") .selectAll("path") .data(stateFeatures) .enter() .append("path") //pass the data to the path init from avobe .attr("class","g-state") .attr("d",path); }</script> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js
https://d3js.org/topojson.v1.min.js
https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js