D3 Examples - geo-map

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        body {
            margin: 0;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
​
        .path:hover {
            fill: #666;
        }
​
        .hidden {
            display: none;
        }
​
        div.tooltip {
            color: #222;
            background-color: #fff;
            padding: .5em;
            text-shadow: #f5f5f5 0 1px 0;
            border-radius: 2px;
            opacity: 0.9;
            position: absolute;
        }
    </style>
</head>
​
<body>
    <script>
        var width = 700,
            height = 580;
​
        var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
        var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');
​
        var json;
​
        var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800)
            .translate([width / 2, height / 2])
​
        var path = d3.geoPath() // d3.geo.path avec d3 version 3
            .projection(projection);
​
        var color = d3.scaleQuantize()
            .range(["rgb(237,248,233)", "rgb(186,228,179)",
                "rgb(116,196,118)", "rgb(49,163,84)", "rgb(0,109,44)"
            ]);
​
        function drawMap(month_visualisation, num_month, week_visualisation, num_week) {
​
            //console.log(month_visualisation, num_month, week_visualisation, num_week);
​
            d3.csv("GrippeFrance2014.csv", function(data) {
                //Set input domain for color scale
                color.domain([0, 2000]);
​
                var column = Object.keys(data[0]);
​
                json = d3.json("france.json", function(json) {
                    var maxValue = 0;
                    for (var i = 0; i < data.length; i++) {
                        var data_array = Object.values(data[i]);
                        //Nom du département
                        var dataState = data[i].region;
​
                        //Valeur associee au département
                        var dataValue = parseFloat(data[i].somme2014);
​
                        if (month_visualisation) {
                            if (num_month < 13 && num_month > 0) {
                                //color.domain([0, 200]);
                                for (var k = 0, somme = 0; k < column.length; k++) {
                                    var month_value = column[k].substring(3, 5);
                                    if (month_value == num_month) {
                                        somme += parseInt(data[i][column[k]]);
                                    }
                                    dataValue = somme;
​
                                }
                            }
                        }
​
​
                        if (week_visualisation) {
                            if (num_week < 53 && num_week > 0) {
                                //color.domain([0, 200]);
                                dataValue = data_array[num_week]
                            }
                        }
​
                        console.log(parseInt(dataValue));
                        if (parseInt(dataValue) > parseInt(maxValue)) maxValue = parseInt(dataValue);
​
​
                        for (var j = 0; j < json.features.length; j++) {
                            var jsonState = json.features[j].properties.nom;
                            if (dataState == jsonState) {
                                json.features[j].properties.value = dataValue;
                                break;
                            }
                        }
​
                    }
                    if (maxValue > 100) color.domain([0, maxValue * 0.6]);
                    if (maxValue <= 100) color.domain([0, maxValue]);
                    if (maxValue <= 50) color.domain([0, maxValue * 1.2]);
​
                    carte = svg.selectAll("path")
                        .data(json.features)
                    carte.enter()
                        .append("path")
                        .attr("d", path)
                        .style("fill", function(d) {
                            //on prend la valeur recupere plus haut
                            var value = d.properties.value;
                            if (value) {
                                return color(value);
                            } else {
                                // si pas de valeur alors en gris
                                return "#ccc";
                            };
                        }).on('mousemove', function(d) {
                            var mouse = d3.mouse(svg.node()).map(function(d) {
                                return parseInt(d);
                            });
                            if (d.properties.value) {
                                tooltip.classed('hidden', false)
                                    .attr('style', 'left:' + (mouse[0] + 15) +
                                        'px; top:' + (mouse[1] - 35) + 'px')
                                    .html(d.properties.nom + " : " + d.properties.value);
                            } else {
                                tooltip.classed('hidden', false)
                                    .attr('style', 'left:' + (mouse[0] + 15) +
                                        'px; top:' + (mouse[1] - 35) + 'px')
                                    .html(d.properties.nom + " : " + "Pas de donnée disponible");
                            }
​
                        })
                        .on('mouseout', function() {
                            tooltip.classed('hidden', true);
                        });;
​
                    carte.attr("class", "update").style("fill", function(d) {
                            //on prend la valeur recupere plus haut
                            var value = d.properties.value;
                            if (value) {
                                return color(value);
                            } else {
                                // si pas de valeur alors en gris
                                return "#ccc";
                            };
                        }).on('mousemove', function(d) {
                            var mouse = d3.mouse(svg.node()).map(function(d) {
                                return parseInt(d);
                            });
                            if (d.properties.value) {
                                tooltip.classed('hidden', false)
                                    .attr('style', 'left:' + (mouse[0] + 15) +
                                        'px; top:' + (mouse[1] - 35) + 'px')
                                    .html(d.properties.nom + " : " + d.properties.value);
                            } else {
                                tooltip.classed('hidden', false)
                                    .attr('style', 'left:' + (mouse[0] + 15) +
                                        'px; top:' + (mouse[1] - 35) + 'px')
                                    .html(d.properties.nom + " : " + "Pas de donnée disponible");
                            }
​
                        })
                        .on('mouseout', function() {
                            tooltip.classed('hidden', true);
                        });;
                    console.log("Macx value" + maxValue);
                });
            });
        }
​
        drawMap();
​
        function updateWeekSliderValue(val) {
            document.getElementById('week').innerHTML = val;
            document.getElementById("weekCheckbox").checked = true;
            clickWeekCheckboxEvent(document.getElementById("weekCheckbox"));
            updateViz(val, "w");
        }
​
        function updateMonthSliderValue(val) {
            document.getElementById('month').innerHTML = val;
            document.getElementById("monthCheckbox").checked = true;
            clickMonthCheckboxEvent(document.getElementById("monthCheckbox"));
            updateViz(val, "m");
        }
​
        function updateViz(value, periode) {
            if (periode == "w") {
                drawMap(false, null, true, parseInt(value));
            }
            if (periode == "m") {
                drawMap(true, parseInt(value), false, null);
            }
​
        }
​
        function clickMonthCheckboxEvent(checkbox) {
            if (checkbox.checked) {
                drawMap(true, parseInt(document.getElementById("monthSlider").value), false, null);
                document.getElementById("yearCheckbox").checked = false;
                document.getElementById("weekCheckbox").checked = false;
            } else {
                document.getElementById("yearCheckbox").checked = true;
                drawMap(false, null, false, null);
            }
        }
​
        function clickWeekCheckboxEvent(checkbox) {
            if (checkbox.checked) {
                drawMap(false, null, true, parseInt(document.getElementById("weekSlider").value));
                document.getElementById("yearCheckbox").checked = false;
                document.getElementById("monthCheckbox").checked = false;
            } else {
                document.getElementById("yearCheckbox").checked = true;
                drawMap(false, null, false, null);
            }
        }
​
        function clickYearCheckboxEvent(checkbox) {
            if (checkbox.checked) {
                drawMap(false, null, false, null);
                document.getElementById("monthCheckbox").checked = false;
                document.getElementById("weekCheckbox").checked = false;
            } else {
                document.getElementById("yearCheckbox").checked = true;
                drawMap(false, null, false, null);
            }
        }
    </script>
    <div>
        Visualisation par semaine <input id="weekCheckbox" type="checkbox" onclick="clickWeekCheckboxEvent(this);" />
        <input id="weekSlider" type="range" value="1" min="1" max="52" step="1" oninput="updateWeekSliderValue(this.value);" />
        <span id="week">1</span>
        <br/><br/> Visualisation par mois <input id="monthCheckbox" type="checkbox" onclick="clickMonthCheckboxEvent(this);" />
        <input id="monthSlider" type="range" value="1" min="1" max="12" step="1" oninput="updateMonthSliderValue(this.value);" />
        <span id="month">1</span>
        <br/><br/> Visualisation de l'année 2014 <input id="yearCheckbox" type="checkbox" onclick="clickYearCheckboxEvent(this);" checked/>
    </div>
</body>
    