xxxxxxxxxx<html lang="en"><head> <meta charset="utf-8"> <title>Maps and Charts</title> <script type="text/javascript" src="../d3.js"></script> <!--<script src="https://d3js.org/colorbrewer.v1.min.js"></script>--> <style type="text/css"> body { background-color: lightgray; } #container { background-color: white; font-family: Helvetica, Arial, sans-serif; width: 1080px; padding: 50px; margin-left: auto; margin-right: auto; box-shadow: 3px 3px 5px 5px #cccccc; } #mySvg { margin-left: auto; margin-right: auto; background-color: darkslategray; } .legend text { font-family: arial; font-size: 12px; fill: lightgray; } .txt { pointer-events: none; } .names{ pointer-events: none; } </style></head><body><div id="container"> <h1>Road Accidents by State in India in 2012</h1> <p>Road accidents in the year 2012 is presented in the below map. The color of each state indicates the number of road accidents per 100,000 people. Source: <a href="https://data.gov.in/keywords/indian-road-accident-data">data.gov.in</a>, 2015 </p> <svg id="mySvg"></svg></div><script src="//d3js.org/d3.v3.min.js"></script><script type="text/javascript"> //Width and height var w = 1080; var h = 900; //Define map projection var projection = d3.geo.mercator() .center([79, 22]) .translate([w / 2, h / 2]) .scale([1500]); var o = d3.scale.quantize() .range(["#d4b9da", "#c994c7", "#df65b0", "#e7298a", "#ce1256"]); //"#49006a" for Goa //Define path generator var path = d3.geo.path() .projection(projection); //Create SVG var svg = d3.select("#mySvg") .attr("width", w) .attr("height", h); //Load in GeoJSON data d3.json("IND_adm1_simplified.json", function (json_country) { d3.csv("roadac2012_AnnexureII.csv", function (data) { // Below commented code is useful if the json_country data has all countries for (var i = 0; i < data.length; i++) { //Grab country name var dataStates = data[i].states; //Grab data value, and convert from string to float var dataValue = +data[i].accidentsPerLakhPopulation2012; //Find the corresponding country inside the GeoJSON for (var j = 0; j < json_country.features.length; j++) { //We'll check the official ISO country code var jsonStates = json_country.features[j].properties.NAME_1; if (dataStates == jsonStates) { //Copy the data value into the GeoJSON json_country.features[j].properties.accidents = dataValue; //Stop looking through the JSON break; } } } acc = data.map(function(d){return +d.accidentsPerLakhPopulation2012;}); o.domain([d3.min(acc), 110]); mycolors = [] for (ind = 0; ind<= 5; ind++){ if (ind ===0){ mycolors.push({name:"<= " + (Math.round(d3.min(acc)+((ind +1 )*(110 - d3.min(acc))/5))).toString() + " people", col:o(d3.min(acc)+((ind)*(110 - d3.min(acc))/5))}) } else if (ind < 5){ mycolors.push({name:(Math.round(d3.min(acc)+((ind )*(110 - d3.min(acc))/5))+ 1).toString() + " - " + (Math.round(d3.min(acc)+((ind +1 )*(110 - d3.min(acc))/5))).toString() + " people", col:o(d3.min(acc)+((ind)*(110 - d3.min(acc))/5))}) } else { mycolors.push({name: "> " + (Math.round(110)).toString() + " people", col:"#67001f"}) } } countries = svg.selectAll("path") .data(json_country.features) .enter() .append("path") .style("fill", function (d) { if (d.properties.accidents < 110){ return o(d.properties.accidents); } else{ return "#67001f";// Goa is extremely different from others and hence handles as special case } }) .attr("class", function (d) { return "state " + d.properties.NAME_1.replace(/ /g, '').toLowerCase(); }) .attr("id", function (d) { return d.properties.HASC_1; }) .attr("d", path) .style("stroke", "darkslategray") .style("stroke-width", 0.5); //Load in cities data d3.csv("ne_10m_populated_places.csv", function(cities) { //Create a circle for each city populatedCities = svg.selectAll("circle") .data(cities) .enter() .append("circle") .attr("class",function(d){ //console.log(d) return d.NAME.replace(/ /g, '').toLowerCase(); }) .attr("cx", function(d) { return projection([d.LONGITUDE, d.LATITUDE])[0]; }) .attr("cy", function(d) { return projection([d.LONGITUDE, d.LATITUDE])[1]; }) .attr("r", function(d) { //Use Math.sqrt to scale by area (not radius) return Math.sqrt(+d.GN_POP / w * 0.01); }) .style("fill", "slategray") .style("opacity", 0.9); populatedCitiesText = svg.append("g") .attr("class", "states-names") .selectAll("text") .data(cities) .enter() .append("text") .attr("class", function (d) { return d.NAME.replace(/ /g, '').toLowerCase() + " txt"; }) .text(function(d){ //console.log(d) return d.NAME; }) .attr("x", function(d) { return projection([d.LONGITUDE, d.LATITUDE])[0]+1; }) .attr("y", function(d) { return projection([d.LONGITUDE, d.LATITUDE])[1]+1; }) .attr("text-anchor","middle") .attr('fill', 'none') .attr('font-size', "10px"); //console.log(populatedCities) populatedCities.on("mouseover", function(){ c = this.getAttribute('class'); //console.log("." + c + "txt"); d3.selectAll("." + c + ".txt") .attr("fill", "white"); }) .on("mouseout", function(){ c = this.getAttribute('class'); d3.selectAll("." + c + ".txt") .attr("fill", "none"); }); stateNames = svg.append("g") .attr("class", "states-names") .selectAll("text") .data(json_country.features) .enter() .append("svg:text") .attr("class", function (d) { return "names " + d.properties.NAME_1.replace(/ /g, '').toLowerCase(); }) .text(function(d){ //console.log(d) return d.properties.NAME_1.toUpperCase() + "\n" + "(" + d.properties.accidents + ")"; }) .attr("x", function(d){ return path.centroid(d)[0]; }) .attr("y", function(d){ return path.centroid(d)[1]; }) .attr("text-anchor","middle") .attr('fill', 'none') .attr('font-size', "14px"); countries.on('mouseover', function () { c = this.getAttribute('class'); d3.selectAll(".legend." + c.substring(6) + " text") .style("font-weight", "bold") .style("fill", "white"); d3.selectAll(".legend." + c.substring(6) + " rect") .style("stroke", "white") .style("stroke-width", 2); d3.selectAll(".state." + c.substring(6)) .style("stroke", "white") .style("stroke-width", 2); d3.select(".names." + c.substring(6)) .attr("fill","white") }) .on('mouseout', function () { c = this.getAttribute('class'); d3.selectAll(".legend." + c.substring(6) + " text") .style("font-weight", "normal") .style("fill", "lightgray"); d3.selectAll(".legend." + c.substring(6) + " rect") .style("stroke", "none"); d3.selectAll(".state." + c.substring(6)) .style("stroke", "darkslategray") .style("stroke-width", 0.5) d3.select(".names." + c.substring(6)) .attr("fill","none") }); svg.append("text") .attr("x", 30) .attr("y", 400+120 + 19) .attr("dy", ".35em") .style("text-anchor", "start") .text("Accidents per 100,000 people") .style("font-weight", "bold") .style("font-family", "Arial") .style("text-decoration", "underline") .style("fill", "lightgray"); var legend = svg.selectAll(".legend") .data(mycolors) .enter().append("g") .attr("class", function (d) { return "legend " + d.col }) .attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; }); legend.append("rect") .attr("x", 30 + 5) .attr("y", 400+150 + 10) .attr("width", 18) .attr("height", 18) .attr("fill", function (d) { return d.col; }); legend.append("text") .attr("x", 30 + 30) .attr("y", 400+150 + 19) .attr("dy", ".35em") .style("text-anchor", "start") .text(function (d) { return d.name; }); }); }) });</script></body></html> Modified http://d3js.org/colorbrewer.v1.min.js to a secure url
https://d3js.org/colorbrewer.v1.min.js
https://d3js.org/d3.v3.min.js