TP4

Built with blockbuilder.org

forked from aurelient's block:

forked from ElisaDnr's block:

forked from ElisaDnr's block: TP4

<!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("regionsFrance.json", function(json) {
                    var maxValue = 0;
                    for (var i = 0; i < data.length; i++) {
                        var data_array = Object.values(data[i]);
                        //Nom de l'etat
                        var dataState = data[i].region;

//Valeur associee a l'etat
                        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);
            }

}

https://d3js.org/d3.v4.min.js