Interactive Europe graph using D3

Question

I need to create a diagram in D3 as follows:

Map of Europe (the use of squares instead of countries is greatly simplified), whose countries are colored according to the number of deaths (caused by the disease of choice) that were selected this year.

The more color is darker and the more deaths (as described in the legend).

The user can select the year that he prefers to use the slider, and can select the disease using the switch. According to the year and the disease chosen, the color change in countries.

When the user moves the mouse cursor to a specific country (for example, to France), information appears on the right, for example:

• country
• year
• number of deaths
• deaths divided by men and women

My dataset runs as follows:

"","Country","Year","Sex","Death","Value"
"3","Austria","2012","Male","Tuberculosis",18
"4","Austria","2012","Male","Tetanus",1
"5","Austria","2012","Male","Diphtheria",0
"1641","Austria","2012","Female","Tuberculosis",7
"1642","Austria","2012","Female","Tetanus",0
"1643","Austria","2012","Female","Diphtheria",0
"3409","Austria","2011","Male","Tuberculosis",27
"3410","Austria","2011","Male","Tetanus",0
"3411","Austria","2011","Male","Diphtheria",0
"5047","Austria","2011","Female","Tuberculosis",14
"5048","Austria","2011","Female","Tetanus",0
"5049","Austria","2011","Female","Diphtheria",0
"46829","Austria","1998","Male","Tuberculosis",61
"46830","Austria","1998","Male","Tetanus",0
"46831","Austria","1998","Male","Diphtheria",0
"48341","Austria","1998","Female","Tuberculosis",30
"48342","Austria","1998","Female","Tetanus",0
"48343","Austria","1998","Female","Diphtheria",0
"59309","Belgium","2010","Male","Tuberculosis",13
"59310","Belgium","2010","Male","Tetanus",0
"59311","Belgium","2010","Male","Diphtheria",0
"60947","Belgium","2010","Female","Tuberculosis",13
"60948","Belgium","2010","Female","Tetanus",2
"60949","Belgium","2010","Female","Diphtheria",0
...

, - , , .

, , https://plnkr.co/edit/Ny0lUkVoiKeP76R95eVn?p=preview.

, europe.json. Plunker , . europe.json, , ( ):

script.js (), . , .

, , . , , ? ? - ?

, , , , , , .

---

, , : , .

: PLUNKER

Susie Lu. , . , , .

// to color countries
var colors = d3.scale.linear()
    .domain([0, 1, 2300]) 
    .range(["#cccccc","#131313", "#ba3c28"]);
/**
 * Legend.
 */
var quantize = d3.scale.quantize()
    .domain([0, 1, 2300])
    //.range(["#cccccc","#131313", "#ba3c28"]);
    .range(d3.range(10).map(function(i) { 
        return "q" + i + "-10"; 
    }));

var svg = d3.select("#leftDown")
    .append("svg")
    .attr("class", "legendQuantsvg");

svg.append("g")
    .attr("class", "legendQuant")
    .attr("transform", "translate(20, 20)");

var legend = d3.legend.color()
    .labelFormat(d3.format(".0f"))
    .useClass(true)
    .scale(quantize);

svg.select(".legendQuant")
    .call(legend);

, , . , . .

- ?

PS: , , . , .

Answer 1

, , .

• ,
• , .
• .

,

    <script src="js/d3.js" charset="utf-8"></script>      D3 base
    <script src="js/topojson.v1.min.js"></script>         TopoJSON
    <script src="js/d3-queue.v2.min.js"></script>         Queue
    <script src="js/jquery-2.2.4.min.js"></script>        jQuery

HTML

<div id="selector">
<form id="desses">
  <input type="radio" name="desse" value="tuberculosis" checked>Tuberculosis<br>
  <input type="radio" name="desse" value="tetanus">Tetanus<br>
  <input type="radio" name="desse" value="diphtheria">Diphtheria
</form>
</div>
<input type="range" id="rango" value="2014" min=2004 max=2014>
<div id="container"></div>
<div id="info"></div>

JavaScript

// width and height
var w = 800, h = 600, dess;

// define map projection
var projection = d3.geo.mercator()
    .center([13, 52])
    .translate([w/2, h/2])
    .scale([w/1.5]);

// define path generator
var path = d3.geo.path()
    .projection(projection);

// create SVG
var svg = d3.select("#container")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

:

, , undefined ..

: . / json .

d3_queue.queue()
    .defer(d3.json, 'data/europe.topojson')  //<-- Topojson base map
    .defer(d3.csv, 'data/dessease.csv')      //<-- dessease csv data
    .awaitAll(makemap);       // <-- When data arrives call makemap function

:

, . . "mouseover" "mouseout":

function makemap(error, europe, dessease) {
    dess = dessease.slice()
    counties = topojson.feature(europe, europe.objects.collection);
    vector = svg.selectAll("path")
        .data(counties.features)
      .enter()
        .append("path")
        .attr("class", "county")
        .attr("id", function(d){ 
              return "coun"+d.properties.indx})
        .attr("d", path)
        .on("mouseover", function(d) {
            d3.select("#coun"+d.properties.indx).style('stroke', '777').style("stroke-width",2)
            showInfo(d)
        })
        .on("mouseout", function(d) {
            d3.select("#coun"+d.properties.indx).style('stroke', 'ddd').style("stroke-width",1)
            $("#info").html("")
        })      
};

: TopoJSON

: TopoJSON - Letfleat

:

• ( showInfo)
• desseas year ( )

Javascript

var showInfo = function (d) {                    // Populate the tooltip
    var infoNest = d3.nest()
          .key(function(d) { return d.Year })    //<-- Filter selectors
          .key(function(d) { return d.Sex; })    //    Now you use
          .map(dess);                            //<-- your csv data
    $("#info").html($("#rango").val() + " - "+d.properties.name+" : "+JSON.stringify(infoNest['1998']['Male']) )   // sample
}
var update = function () {                       // change map color based on values
    var des = $('input[name=desse]:checked', '#desses').val(); 
    $("#info").html($("#rango").val()+ " : " + des) 
}
$('#desses').on('change', update);
$("#rango").on("input", update);

d3.nest() - D3 .

: Groupin Data - API - D3 csv -

:

PS:

.csv, .topojson CSV:

indx,id,Country,Year,Sex,Death,Value
4,3,Austria,2012,Male,Tuberculosis,18
4,4,Austria,2012,Male,Tetanus,1
4,5,Austria,2012,Male,Diphtheria,0
4,1641,Austria,2012,Female,Tuberculosis,7
4,1642,Austria,2012,Female,Tetanus,0
4,1643,Austria,2012,Female,Diphtheria,0
4,3409,Austria,2011,Male,Tuberculosis,27
4,3410,Austria,2011,Male,Tetanus,0
4,3411,Austria,2011,Male,Diphtheria,0
4,5047,Austria,2011,Female,Tuberculosis,14
4,5048,Austria,2011,Female,Tetanus,0
4,5049,Austria,2011,Female,Diphtheria,0
4,46829,Austria,1998,Male,Tuberculosis,61
4,46830,Austria,1998,Male,Tetanus,0
4,46831,Austria,1998,Male,Diphtheria,0
4,48341,Austria,1998,Female,Tuberculosis,30
4,48342,Austria,1998,Female,Tetanus,0
4,48343,Austria,1998,Female,Diphtheria,0
2,59309,Belgium,2010,Male,Tuberculosis,13
2,59310,Belgium,2010,Male,Tetanus,0
2,59311,Belgium,2010,Male,Diphtheria,0
2,60947,Belgium,2010,Female,Tuberculosis,13
2,60948,Belgium,2010,Female,Tetanus,2
2,60949,Belgium,2010,Female,Diphtheria,0

(indx), , , csv.