Choropleth of income in France

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Choropleth of income in France</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <script src="https://d3js.org/topojson.v1.min.js"></script>
		<style type="text/css">
            
            body {
                background-color:#000000;   
                font-family: sans-serif;
                color: white;
                margin: 5px;
            }
            .overlay {
                opacity : 0;
            }
            svg {
                background-color:#3e3e3e;
                border-right : 1px solid black;
                margin-top: 8px;
                cursor: pointer;
                width: 100%;
            }
            h1 {
                margin-top: 0;
                font-family: serif;
            }
            h2 {
                font-size: 100%;
            }
            #texte {
                position:absolute;
                right: 0px;
                width: 500px;
                height: 93%;
                background-image: url("bckgrd.png");
                padding-left: 30px;
                padding-top:30px;
            }
            #map_title {
                background-color: rgba(0, 0, 0, 0.5);
                font-size : 80%;
                position: absolute;
                padding : 10px;
            }
            #map_title span{
                font-style: italic;   
            }
            #details {
                background-color:#000000;
                width: 100%;
            }
            .legend {
                font-size:70%;
                user-select: none;
                fill: white;
            }
            #legendemere, #titremere{
                fill: #000000;
                opacity: 0.5;
            }
            .departement {
                stroke: grey;
            }
            #texttag{
                fill : black;
                font-style: bold;
                pointer-events: none;
            }
            .ville{
                pointer-events: none;
            }
		</style>
	</head>
	<body>
        <div id="texte">
            <h1>Where high-income households live in metropolitan France</h1>
            <p>This choropleth map shows all the "départements" (and communes if you zoom in) of metropolitan France. The colors are mapped to the disposable income per consumption unit (CU, i.e. per capita adjusted for household size and age composition) in each département or commune.</p>
            <p>Communes for which data was not available are in grey.</p>
            <p>Double-click to zoom in, hold shift and double-click to zoom out. Drag the map to move it around.</p>
            <br><br>
            <h2>Details (hover over a commune) :</h2>
            <div id="details">
                <table>
                    <tbody>
                        <tr>
                            <td>Commune : </td>
                            <td id="detail_name"></td>
                        </tr>
                        
                        <tr>
                            <td>Departement : </td>
                            <td id="detail_departement"></td>
                        </tr>
                        <tr>
                            <td>Disposable income per CU : </td>
                            <td id="detail_income"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div id="carte"></div>
        <div id="map_title">
            Disposable income per consumption unit in the communes of France<br>
            <span>Source : <a href="https://www.insee.fr/fr/bases-de-donnees/default.asp?page=statistiques-locales/pauvrete.htm">INSEE</a> (data on income) and <a href="https://professionnels.ign.fr/catalogue">IGN</a> (geographic data).</span>
        </div>
		<script type="text/javascript">
            
// A FAIRE :
// - zoom
// - donnes (dept vs commune)
// - problème des contours
            
            // Add the French locale (and format) for displaying income
            var loc = d3.locale({
                          decimal: ",",
                          thousands: " ",
                          grouping: [3],
                          currency: ["", " €"],
                          dateTime: "%A, le %e %B %Y, %X",
                          date: "%d/%m/%Y",
                          time: "%H:%M:%S",
                          periods: ["AM", "PM"], // unused
                          days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
                          shortDays: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
                          months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
                          shortMonths: ["janv.", "févr.", "mars", "avr.", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."]
                        });

var f = loc.numberFormat("$,.2f");

//Width and height
			var w = 1100;
			var h = 600;
            
            var villesFont = 14, villesStroke = 0.5, deptStroke = 0.8;
            var tagFont = 18;
            var domaineVilles = [8802, 45463];
            var domaineDept = [];
            
            // For mouse position (for the tag)
            var coord = [], scaling = 1;
            var communes = {};
            
            var listDept = {'94': 'Val-de-Marne', '04': 'Alpes-de-Haute-Provence', '77': 'Seine-et-Marne', '71': 'Saône-et-Loire', '65': 'Hautes-Pyrénées', '24': 'Dordogne', '92': 'Hauts-de-Seine', '82': 'Tarn-et-Garonne', '45': 'Loiret', '17': 'Charente-Maritime', '58': 'Nièvre', '28': 'Eure-et-Loir', '44': 'Loire-Atlantique', '30': 'Gard', '60': 'Oise', '52': 'Haute-Marne', '86': 'Vienne', '29': 'Finistère', '70': 'Haute-Saône', '91': 'Essonne', '16': 'Charente', '59': 'Nord', '35': 'Ille-et-Vilaine', '53': 'Mayenne', '88': 'Vosges', '27': 'Eure', '25': 'Doubs', '84': 'Vaucluse', '43': 'Haute-Loire', '89': 'Yonne', '13': 'Bouches-du-Rhône', '90': 'Territoire de Belfort', '23': 'Creuse', '50': 'Manche', '67': 'Bas-Rhin', '19': 'Corrèze', '39': 'Jura', '76': 'Seine-Maritime', '11': 'Aude', '83': 'Var', '78': 'Yvelines', '93': 'Seine-Saint-Denis', '61': 'Orne', '63': 'Puy-de-Dôme', '54': 'Meurthe-et-Moselle', '02': 'Aisne', '62': 'Pas-de-Calais', '41': 'Loir-et-Cher', '51': 'Marne', '40': 'Landes', '85': 'Vendée', '26': 'Drôme', '2A': 'Corse-du-Sud', '72': 'Sarthe', '36': 'Indre', '22': "Côtes-d'Armor", '81': 'Tarn', '03': 'Allier', '87': 'Haute-Vienne', '74': 'Haute-Savoie', '42': 'Loire', '38': 'Isère', '06': 'Alpes-Maritimes', '73': 'Savoie', '95': "Val-d'Oise", '37': 'Indre-et-Loire', '80': 'Somme', '33': 'Gironde', '05': 'Hautes-Alpes', '56': 'Morbihan', '64': 'Pyrénées-Atlantiques', '66': 'Pyrénées-Orientales', '07': 'Ardèche', '08': 'Ardennes', '34': 'Hérault', '79': 'Deux-Sèvres', '31': 'Haute-Garonne', '55': 'Meuse', '10': 'Aube', '48': 'Lozère', '21': "Côte-d'Or", '12': 'Aveyron', '2B': 'Haute-Corse', '46': 'Lot', '18': 'Cher', '69': 'Rhône', '14': 'Calvados', '15': 'Cantal', '09': 'Ariège', '68': 'Haut-Rhin', '32': 'Gers', '49': 'Maine-et-Loire', '47': 'Lot-et-Garonne', '57': 'Moselle', '01': 'Ain', '75': 'Paris'};
            
			//Define map projection
			var projection = d3.geo.mercator()
								   .center([ 3, 46.5 ])
								   .translate([ w/2, h/2 ])
								   .scale([ w*2 ]);

//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 colorDept = d3.scale.quantize()
								.range([ "#ffffb2", "#fecc5c", "#fd8d3c", "#f03b20", "#bd0026" ]);
            var colorVille = d3.scale.quantize()
								.range([ "#ffffb2", "#fecc5c", "#fd8d3c", "#f03b20", "#bd0026" ]);
            
            var villScale = d3.scale.quantile()
                                .range([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]);
                                
			//Create SVG
			var svg = d3.select("#carte")
						.append("svg")
						//.attr("width", w)
						.attr("height", h)
                        //.attr("viewBox", "0 0 " + w + " " + h )
                        //.attr("preserveAspectRatio","None")
                        .append("g").attr("id","super") // important for zoom
                        .call(d3.behavior.zoom().scaleExtent([1, 20]).on("zoom", zoom).on("zoomend",zoomfinish))
                        .append("g").attr("id","maingroup"); // important for the same reason (??)

// Overlay for the zoom and pan behaviour
            svg.append("rect")
            .attr("class", "overlay")
            .attr("width", w)
            .attr("height", h);
            
            // To show that map is loading...
            svg.append("text")
                .attr("x",w/2)
                .attr("y",h/2)
                .attr("text-anchor","middle")
                .text("Loading map...");

var legende = d3.select("#super").append("g");

var don = [{"name":"e","color":"#bd0026"},
                       {"name":"d","color":"#f03b20"},
                       {"name":"c","color":"#fd8d3c"},
                       {"name":"b","color":"#fecc5c"},
                       {"name":"a","color":"#ffffb2"},
                      ];

legende.append("rect")
                .attr("id","legendemere")
                .attr("width",160)
                .attr("height",90)
                .attr("x",0)
                .attr("y",0);

legende.selectAll(".legendbar")
                .data(don)
                .enter()
                .append("rect")
                .attr("class","legendbar")
                .attr("width",30)
                .attr("height",10)
                .attr("x",120)
                .attr("y",function(d,i){return 10 + 15*i;})
                .attr("fill",function(d){return d.color;});

legende.append("text")
                .attr("class","legend")
                .attr("x",10)
                .attr("y",20)
                .text("Higher per CU income");

legende.append("text")
                .attr("class","legend")
                .attr("x",10)
                .attr("y",80)
                .text("Lower per CU income");
				
            
            // For the map's title
            d3.select("#map_title").style("top",(h - 35).toString() + "px");
            
            //Load in GeoJSON data	
            d3.json("donnees_depart.json", function(json) {
                    
                    domaineDept = [d3.min(json.features, function(d) { return +d.properties.income; }), 
					               d3.max(json.features, function(d) { return +d.properties.income; })
                                  ];
                    
                    colorDept.domain(domaineDept);
                    colorVille.domain(domaineVilles);
                    
                    d3.json("donnees_villes.json", function(datVilles){
                        
                        /*villScale.domain([d3.min(datVilles, function(d){return +d.properties.population;}) - 100,
                                         d3.max(datVilles, function(d){return +d.properties.population;}) + 100]);*/
                        var dom = [];
                        for (var i= 0; i < datVilles.length; i++){
                            dom.push(datVilles[i].properties.population);
                        }
                        villScale.domain(dom);
                        
                        //Bind data and create one path per GeoJSON feature
                        svg.selectAll(".departement")
                           .data(json.features)
                           .enter()
                           .append("path")
                           .attr("d", path)
                            .attr("class","departement")
                            .attr("id", function(d){
                                if (d.properties.CODE_DEPT == "69") {
                                    return "d69";
                                }
                            })
                           .style("fill", function(d) {

//Get data value
                                var value = d.properties.income;

if (value) {
                                    //If value exists…
                                    return colorDept(value);
                                } else {
                                    //If value is undefined…
                                    return "#cccccc";
                                }

});

svg.select("text").remove();

communes = svg.append("g");

// Put the main cities on the map    
                        villes = svg.append("g");

villes.selectAll(".ville")
                            .data(datVilles)
                            .enter()
                            .append("text")
                            .attr("class",function(d){
                                return "vill" + villScale(d.properties.population).toString();
                            })
                            .attr("text-anchor","middle")
                            .attr("x", function(d){
                                return path.centroid(d)[0];
                            })
                            .attr("y", function(d){
                                return path.centroid(d)[1];
                            })
                            .text(function(d){
                                return d.properties.commune;
                            })
                            .style("fill","black")
                            .classed("ville",true)
                            .style("font-size", villesFont + "px")
                            .style("visibility", function(d){
                                if (villScale(d.properties.population) >= 20){
                                    return "visible";
                                }
                                else {
                                    return "hidden";
                                }
                            });

var tag = svg.append("g").attr("id","tag");
                        tag.append("text").attr("id","texttag");

svg.selectAll("path")
                            .on("mouseover",function(){
                                var sel = d3.select(this);
                                d3.select("#detail_income").html(f(sel.datum().properties.income));
                                d3.select("#detail_name").html("");
                                d3.select("#detail_region").html(sel.datum().properties.NAME_1);
                                d3.select("#detail_departement").html(sel.datum().properties.NOM_DEPT);

d3.select("#texttag")
                                    .attr("opacity",1)
                                    .text(sel.datum().properties.NOM_DEPT)
                                    .attr("x",d3.mouse(this)[0] + 20 / scaling)
                                    .attr("y",d3.mouse(this)[1] - 20 / scaling);

coord = d3.mouse(this);

});
                    }); // End of json for villes
				});  //End d3.json()

// To stop the timer.
                return true;
            }
            // FOR ZOOM (initially stolen from Mike Bostock's example
            function zoom() {
                
                // Part of the hack (sample the value of the event each time in a global var).
                eventVal = d3.event;
                
                d3.select("#maingroup").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
                d3.select("#texttag")
                    .style("font-size", (tagFont / d3.event.scale).toString() + "px")
                    .attr("x",coord[0] + 5/d3.event.scale)
                    .attr("y",coord[1] - 5/d3.event.scale);
                
                d3.selectAll(".departement").style("stroke-width", (deptStroke / eventVal.scale).toString() + "px");
                
                scaling = d3.event.scale;
            }
            
            // Zoomend : load new data only when last zoom event has finished.
            function zoomfinish(){
                if ((d3.event.sourceEvent == null) || (d3.event.scale == scaleOld)){
                    endHandle();
                }
                scaleOld = d3.event.scale;
            }
            
            // Cache the loaded data.
            var cache = {};
            function getData(url, callback, dept){
                if(cache[url]){
                    callback(cache[url], dept);
                } 
                else{
                    d3.json(url, function(data){
                        cache[url] = data;
                        callback(data, dept);
                    });
                }
            }
            
            // Callback that actually draws the communes
            function drawCommunes(donnees, dept){
                communes.selectAll(".commune.com" + dept)
                       .data(donnees)
                       .enter()
                       .append("path")
                       .attr("d", path)
                        .attr("class","commune com" + dept)
                        .style("stroke", "grey")
                        .style("stroke-width", (strokeCommune / eventVal.scale).toString() + "px") 
                       .style("fill", function(d) {

//Get data value
                            var value = d.properties.income;

if (value) {
                                //If value exists…
                                return colorVille(value);
                            } else {
                                //If value is undefined…
                                return "#cccccc";
                            }

});
                    communes.selectAll(".commune")
                        .on("mouseover",function(){
                            var sel = d3.select(this);
                            d3.select("#detail_income").html(f(sel.datum().properties.income));
                            d3.select("#detail_name").html(sel.datum().properties.NOM_COMM);
                            d3.select("#detail_region").html(sel.datum().properties.NAME_1);
                            d3.select("#detail_departement").html(listDept[sel.datum().properties.CODE_DEPT].toUpperCase());
                        
                            d3.select("#texttag")
                                .attr("opacity",1)
                                .text(sel.datum().properties.NOM_COMM)
                                .attr("x",d3.mouse(this)[0] + 20 / scaling)
                                .attr("y",d3.mouse(this)[1] - 20 / scaling);
                            
                        coord = d3.mouse(this);
                        
                        });
            }
            
            // To load data for communes when zoomed enough and dept is in viewport.
            function loadCommunes(dept) {
                var url = "https://silentway.github.io/data-departements/" + dept + ".json";
                getData(url, drawCommunes, dept);
            }

</script>
	</body>
</html>

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://d3js.org/topojson.v1.min.js