Interactive graph of Europe using D3
<p>I need to create in D3 a chart like this:
<a href="https://i.stack.imgur.com/Q9Tc7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q9Tc7.png" alt="enter image description here"></a></p>

<p>A map of Europe (here is very simplified using squares instead of countries) whose countries are colored according to the number of deaths (caused by the choice disease) that have been selected in the year.</p>

<p>More color is dark and the greater the number of deaths (as described in the legend).</p>

<p>The user can choose the year that prefers using a slider and can choose the disease using a radio button.
According to the year and selected disease, the color change of the countries.</p>

<p>When the user rolls the mouse over a particular country (eg France), on the right appears some details like:</p>

<ul>
<li>the country</li>
<li>year</li>
<li>the number of total deaths</li>
<li>the number of deaths divided by male and female</li>
</ul>

<p>My dataset is done this way:</p>

<pre><code>"","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
...
</code></pre>

<p>I searched if there were any similar graphics that I can use, but I found nothing.</p>

<p>I tried to create a map of Europe and this is what I got <a href="https://plnkr.co/edit/Ny0lUkVoiKeP76R95eVn?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/Ny0lUkVoiKeP76R95eVn?p=preview</a>.</p>

<p>The chart does not work because it lacks the europe.json file. Plunker doesn't save becasue file is too large.
This is the <a href="https://www.dropbox.com/s/2gs4xtvv0sc3blr/europe.json?dl=0" rel="nofollow noreferrer">europe.json</a> files and this is what I see (if I pass the mouse over France):
<a href="https://i.stack.imgur.com/qX4Yy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qX4Yy.png" alt="enter image description here"></a></p>

<p>In script.js file is a piece of code (commented) that does not work.
It is the first time I make graphics with maps.</p>

<p>Ok now I don't know where to begin.
How can I for example to associate the name of the country based on the country selected?
And to filter the data in the base year and the disease?
Could someone give me a hand? </p>

<p>I know I'm asking a lot, but I don't want all the code but a help to be able to move forward to develop the graph.</p>

<p>Thanks so much</p>

<hr>

<p>I almost finished the chart, there are only two things that I can't fix: the legend and the color of the countries that doesn't change with the selected year.</p>

<p>Here the code: <a href="https://plnkr.co/edit/un7lYuZSWdL9A2vH38mK?p=preview" rel="nofollow noreferrer"><strong>PLUNKER</strong></a></p>

<p>For the legend I used the <a href="http://d3-legend.susielu.com/" rel="nofollow noreferrer">library of Susie Lu</a>. 
The legend is created but not colored. I tried to change the range and use the same I used to color the countries but doesn't work.</p>

<pre><code>// 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);
</code></pre>

<p>The second problem is that if the user changes the year using the slider, the color of the countries does not change. 
I don't understand how to update the value of the slider.
In the right the data are taken correctly.</p>

<p>Could someone help me?</p>

<p>PS: I don't know if I was right to change this question or if I had to open another.
Anyway, thanks.</p>