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; } </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. The color scale varies from <span style="color: #007ae6">'medium shade of blue'</span> to <span style="color: yellowgreen">'yellowgreen'</span>. Hovering over the map highlights the state in the map as well as the legend. Likewise, hovering over the legend highlights the legend as well as the state in the map.Source: <a href="https://data.gov.in/keywords/indian-road-accident-data">data.gov.in</a>, 2015 </p> <svg id="mySvg"></svg> <p>Clearly, something is wrong in Goa. It is a tourist place that attracts lot of foreigners, and in turn, lots of natives. Also, the carnival environment and drunken driving cause a lot of accidents. However, this needs to be investigated further. North eastern countries do not have many accidents. Probably this is a function of per capita income and may be there are not enough vehicles on the roads or may be the people are more educated and responsible.</p></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([82, 22]) .translate([w / 2, h / 2]) .scale([1500]); var o = d3.scale.linear() .range(["#007ae6", "yellowGreen"]); //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 acc_data = data.map(function (d) { return {'states': d.states, 'accidents': +d.accidentsPerLakhPopulation2012}; }); acc = acc_data.map(function (d) { return d.accidents }); o.domain([d3.min(acc), 50]) countries = svg.selectAll("path") .data(json_country.features) .enter() .append("path") .style("fill", function (d) { for (ind = 0; ind < acc_data.length; ind++) { if (d.properties.NAME_1 == acc_data[ind].states) { return o(acc_data[ind].accidents); } } }) .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); 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) }) .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) }); svg.append("text") .attr("x", 30) .attr("y", 120 + 19) .attr("dy", ".35em") .style("text-anchor", "start") .text("State, 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(acc_data) .enter().append("g") .attr("class", function (d) { return "legend " + d.states.replace(/ /g, '').toLowerCase() }) .attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; }) .on('mouseover', function () { c = this.getAttribute('class') d3.selectAll(".state." + c.substring(7)) .style("stroke", "white") .style("stroke-width", 2) d3.selectAll(".legend." + c.substring(7) + " text") .style("fill", "white") .style("font-weight", "bold") d3.selectAll(".legend." + c.substring(7) + " rect") .style("stroke", "white") .style("stroke-width", 2) }) .on('mouseout', function () { c = this.getAttribute('class') d3.selectAll(".state." + c.substring(7)) .style("stroke", "darkslategray") .style("stroke-width", 0.5) d3.selectAll(".legend." + c.substring(7) + " text") .style("fill", "lightgray") .style("font-weight", "normal") d3.selectAll(".legend." + c.substring(7) + " rect") .style("stroke", "none") }); legend.append("rect") .attr("x", 30 + 5) .attr("y", 150 + 10) .attr("width", 18) .attr("height", 18) .attr("fill", function (d) { return o(d.accidents); }); legend.append("text") .attr("x", 30 + 30) .attr("y", 150 + 19) .attr("dy", ".35em") .style("text-anchor", "start") .text(function (d) { return d.states + ", " + d.accidents; }); }) });</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