xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Emissions in Italian Regions</title> <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script> <style type="text/css"> body { margin: 0; background-color: #eff3ff; font-family: Helvetica, Arial, sans-serif; } #container { width: 580px; margin-left: auto; margin-right: auto; margin-top: 60px; padding: 10px; background-color: white; box-shadow: 5px 5px 6px 6px #ccc; } h1 { font-size: 30px; margin: 10; } p { font-size: 14px; margin: 14px 0 0 0; } a:link { text-decoration: none; color: gray; } a:hover { text-decoration: underline; } a:visited { color: gray; } a:active { color: steelBlue; } svg { background-color: white; } </style> </head> <body> <div id="container"> <h1>CO2 Emissions in Italian Regions (2010)</h1> <h4>Circles indicate top ten provinces in carbon intensity level (CO2 emitted per GDP)</h4> </div> <script type="text/javascript"> //Year of CO2 data to map var year = "2010"; //Width and height var w = 480; var h = 640; //Define map projection var projection = d3.geo.conicEqualArea() .center([ 20, 40 ]) .translate([ w/0.9, h/1.65 ]) .scale([ 3000 ]); //Define path generator var path = d3.geo.path() .projection(projection); //Define quantize scale to sort data values into buckets of color //Colors by Cynthia Brewer (colorbrewer2.org), YlOrRd var color = d3.scale.quantize() .range([ "#eff3ff", "#bdd7e7", "#6baed6", "#3182bd", "#08519c" ]); //Create SVG var svg = d3.select("#container") .append("svg") .attr("width", w) .attr("height", h); //Load in CO2 data d3.csv("ispra_regioni_co2_2010.csv", function(data) { //Set input domain for color scale color.domain([ d3.min(data, function(d) { return +d[year]; }), d3.max(data, function(d) { return +d[year]; }) ]); //Load in GeoJSON data d3.json("italy.json", function(json) { //Merge the CO2 data and GeoJSON into a single array // //Loop through once for each CO2 data value for (var i = 0; i < data.length; i++) { //Grab country name var dataREGIONE = data[i].id; //Grab data value, and convert from string to float var dataValue = +data[i][year]; //Find the corresponding country inside the GeoJSON for (var j = 0; j < json.features.length; j++) { //We'll check the official ISO country code var jsonid = json.features[j].properties.id; if (dataREGIONE == jsonid) { //Copy the data value into the GeoJSON json.features[j].properties.co2 = dataValue; //Stop looking through the JSON break; } } } //Bind data and create one path per GeoJSON feature svg.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path) .style("fill", function(d) { //Get data value var value = d.properties.co2; if (value) { //If value exists… return color(value); } else { //If value is undefined… return "#ccc"; } }); //Load in cities data d3.csv("top10city_lonlat_2.csv", function(data) { //Create a circle for each city var circles = svg.selectAll("circle") .data(data) .enter() .append("circle") .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.co2_pil_2010 * 20); }) .style("fill", "orange") .style("opacity", 0.75); //Append a title with the PROVINCIA name (so we get easy tooltips) circles.append("title") .text(function(d) { return d.name; }); }); }); //End d3.json() }); //End d3.csv() </script> </body></html> https://d3js.org/d3.v3.min.js