data_viz_projet

<!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>

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