D3 Examples - data_viz

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;
        }
        
        .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;
        }
        
        .background {
            fill: none;
            pointer-events: all;
        }
​
        .feature {
            fill: #ccc;
            cursor: pointer;
        }
​
        .feature.active {
            fill: orange;
        }
​
        .mesh {
            fill: none;
            stroke: #fff;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
    </style>
</head>
​
<body>
    <script>
        var width = 700,
                height = 580,
                active = d3.select(null);
​
        var svg = d3.select( "body" )
            .append( "svg" )
            .attr( "width", width )
            .attr( "height", height );
        
        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)"]);
        
        //On centre sur la France
        var projection = d3.geoConicConformal()
            .center([2.454071, 46.279229])
            .scale(2800)
            // sans la commande enlève la Corse mais centre la France!
            .translate([width/2, height/2]);
        
​
        var path = d3.geoPath() // d3.geo.path avec d3 version 3
            .projection(projection);
        
        var tooltip = d3.select('body')
            .append('div')
            .attr('class', 'hidden tooltip');
        
        var geoPath = d3.geoPath()
            .projection(projection)
            .pointRadius(2);
​
        var g = svg.append("g")
            .style("stroke-width", "1.5px");
​
        d3.json("https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/regions.geojson", function(json) {
            svg.selectAll("path")
                .data(json.features)
                .enter()
                .append("path")
                .attr("fill","#888")
                .attr("stroke","#fff")
                .attr("d",path)
                .attr("class", "feature")
                .on("click", clicked)
                .on('mousemove', function(d) {
                    var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
                    });
                    tooltip.classed('hidden', false)
                        .attr('style', 'left:' + (mouse[0] + 15) +
                            'px; top:' + (mouse[1] - 35) + 'px;background-color: #f88')
                    //console.log(d.properties.nom)
                        .html('<strong>'+d.properties.nom+'</strong>');
                    })
                .on('mouseout', function() {
                    tooltip.classed('hidden', true);
                    });
​
                svg.append("path")
                    .attr("class", "mesh")
                    .attr("d", path);
            
            d3.json("https://raw.githubusercontent.com/Kannan2324/Projet-Transports/master/data/liste-des-gares.geojson", function(jsonGare) {
                var liste_gare = svg.append("svg");
                liste_gare.selectAll("path")
                .data(jsonGare.features)
                .enter()
                .append("path")
                .attr("fill","#b42e6b")
                .attr("d", geoPath)
                .on('mousemove', function(d) {
                    var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
                    });
                    tooltip.classed('hidden', false)
                        .attr('style', 'left:' + (mouse[0] + 15) +
                            'px; top:' + (mouse[1] - 35) + 'px;background-color: #fff')
                        .html(d.properties.libelle_gare);
                    })
                .on('mouseout', function() {
                    tooltip.classed('hidden', true);
                    });;
            })
        });
        
        function clicked(d) {
            if (active.node() === this) return reset();
            active.classed("active", false);
            active = d3.select(this).classed("active", true);
​
            var bounds = path.bounds(d),
                dx = bounds[1][0] - bounds[0][0],
                dy = bounds[1][1] - bounds[0][1],
                x = (bounds[0][0] + bounds[1][0]) / 4,
                y = (bounds[0][1] + bounds[1][1]) / 4,
                scale = .9 / Math.max(dx / width, dy / height),
                translate = [width / 2 - scale * x, height / 2 - scale * y];
            console.log(x,y,dx,dy)
            svg.transition()
                .duration(750)
                .style("stroke-width", 1.5 / scale + "px")
                .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
        }
​
        function reset() {
            active.classed("active", false);
            active = d3.select(null);
​
            svg.transition()
                .duration(750)
                .style("stroke-width", "1.5px")
                .attr("transform", "");
        }
    </script>
</body>
​
​
    