larsbouwens · September 2, 2024 20:09 · larsbouwens · Jan 13, 2015 · xiaoguangwei · Jan 24, 2020
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <head>
 <title>The Netherlands gejson map</title>
 <script src="js/d3.v3.min.js"></script>	  

 <style type="text/css">
 path {fill: #000; stroke: #fff; stroke-width: 1;}}
 </style>

 </head>

 <body>

 <script>
 // Parameters
 var width		= 750,
    height		= 750,
    scale		= 8500,
    centerLat		= 5.5,	
    centerLong  	= 52.2;	 

 // Append svg to body 
 var svg = d3.select("body").append("svg")
 	.attr("width", width)
 	.attr("height", height)
 	.append("g")

 // Adjust projection based on scale and center of the map 
 var projection = d3.geo.mercator()
  .scale(scale).translate([width / 2, height / 2]).center([centerLat, centerLong]);
 var path = d3.geo.path()
  .projection(projection);

 // Add the data 
 d3.json("nl.json", function(json) {
 svg.selectAll("path")
 	.data(json.features).enter()
 	.append("path")
 	.attr("d", path)
 });
 </script>

 <body>
diff --git a/nl.json b/nl.json
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<title>The Netherlands gejson map</title>
	<script src="js/d3.v3.min.js"></script>

	<style type="text/css">
	path {fill: #000; stroke: #fff; stroke-width: 1;}}
	</style>

	</head>

	<body>

	<script>
	// Parameters
	var width = 750,
	height = 750,
	scale = 8500,
	centerLat = 5.5,
	centerLong = 52.2;

	// Append svg to body
	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")

	// Adjust projection based on scale and center of the map
	var projection = d3.geo.mercator()
	.scale(scale).translate([width / 2, height / 2]).center([centerLat, centerLong]);
	var path = d3.geo.path()
	.projection(projection);

	// Add the data
	d3.json("nl.json", function(json) {
	svg.selectAll("path")
	.data(json.features).enter()
	.append("path")
	.attr("d", path)
	});
	</script>

	<body>