Andrew-Reid/buffer.json

## readme.md

      
    Raw
  

              readme.md
            
          
    Block showing how to place text on topojson lines in d3.js v4.
Built off of one of Mike Bostock's blocks on displaying arcs (Snowden's Route I think).
Whitehorse, in the Yukon, Canada, is shown on the map with the small circle.

  
## buffer.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              buffer.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.graticule {
  fill: none;
  stroke: #ddd;
  stroke-width: 0.5px;
  stroke-opacity: 0.5;
}

.land {
  fill: #a8ddb5;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: 0.5px;
}

.buffer-text {
	font-size: 12px;
	font-family: Arial;
	color: #777;
}
.circle {
	fill: white;
	stroke: #0868ac;
	stroke-width: 2;
}
.buffer {
	fill:none;
	stroke-width: 1;
	stroke: #bbb;
}
</style>
<body>
<svg width="960" height="500"></svg>


<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>


var points = {
	Whitehorse: [-135.1,60.7]
};

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var projection = d3.geoKavrayskiy7()
    .scale(170)
    .rotate([-10, 0])
    .translate([width / 2, height / 2])
    .precision(.1);
/*
// Alternatively:
var projection = d3.geoMercator().scale(100)
	;
*/

var path = d3.geoPath()
    .projection(projection);

var g1 = svg.append("g");
var g2 = svg.append("g");
var g3 = svg.append("g");

// Add globe outline and graticule
g1.append("path")
    .datum({type: "Sphere"})
    .attr("class", "sphere")
    .attr("d", path)
    .attr("fill", "#43a2ca")
    .attr("stroke", "black");

g1.append("path")
    .datum(d3.geoGraticule())
    .attr("class", "graticule")
    .attr("d", path);

// Add world map
d3.json("world-50m.json", function(error, world) {
  if (error) throw error;

  g2.insert("path", ".land")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);

  g2.insert("path", ".boundary")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);

var point = g2.append("g")
		.attr("class", "points")
		.selectAll("g")
		.data(d3.entries(points))
		.enter().append("g")
		.attr("transform", function(d) { return "translate(" + projection(d.value) + ")"; });

	point.append("circle")
		.attr("r", 5)
		.attr("class","circle")
		;
});

// Add the buffer:
d3.json("buffer.json", function(error, buffer) {
	// Add the buffer lines
	g3.selectAll("path")
			.data(topojson.feature(buffer, buffer.objects.buffer).features)
			.enter().append("path")
		    .attr("d", path)
			.attr("class", "buffer")
		    .attr("id",function(d) { return "b" + d.properties.Distance; });

	// Add the buffer text
	g3.selectAll(".buffer-text")
		.data(topojson.feature(buffer, buffer.objects.buffer).features)
		.enter()
		.append("text")
		.attr("class","buffer-text")
		.append("textPath")
		.attr("xlink:href", function(d) { return "#b" + d.properties.Distance; })
		.text(function(d) { return d.properties.Distance/1000 + ",000 km from Whitehorse"; })
		.attr("startOffset", "50%")
		.style("text-anchor","middle");
})


</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## world-50m.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-50m.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.graticule {
	fill: none;
	stroke: #ddd;
	stroke-width: 0.5px;
	stroke-opacity: 0.5;
	}

	.land {
	fill: #a8ddb5;
	}

	.boundary {
	fill: none;
	stroke: #fff;
	stroke-width: 0.5px;
	}

	.buffer-text {
	font-size: 12px;
	font-family: Arial;
	color: #777;
	}
	.circle {
	fill: white;
	stroke: #0868ac;
	stroke-width: 2;
	}
	.buffer {
	fill:none;
	stroke-width: 1;
	stroke: #bbb;
	}
	</style>
	<body>
	<svg width="960" height="500"></svg>


	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<script>


	var points = {
	Whitehorse: [-135.1,60.7]
	};

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height");

	var projection = d3.geoKavrayskiy7()
	.scale(170)
	.rotate([-10, 0])
	.translate([width / 2, height / 2])
	.precision(.1);
	/*
	// Alternatively:
	var projection = d3.geoMercator().scale(100)
	;
	*/

	var path = d3.geoPath()
	.projection(projection);

	var g1 = svg.append("g");
	var g2 = svg.append("g");
	var g3 = svg.append("g");

	// Add globe outline and graticule
	g1.append("path")
	.datum({type: "Sphere"})
	.attr("class", "sphere")
	.attr("d", path)
	.attr("fill", "#43a2ca")
	.attr("stroke", "black");

	g1.append("path")
	.datum(d3.geoGraticule())
	.attr("class", "graticule")
	.attr("d", path);

	// Add world map
	d3.json("world-50m.json", function(error, world) {
	if (error) throw error;

	g2.insert("path", ".land")
	.datum(topojson.feature(world, world.objects.land))
	.attr("class", "land")
	.attr("d", path);

	g2.insert("path", ".boundary")
	.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
	.attr("class", "boundary")
	.attr("d", path);

	var point = g2.append("g")
	.attr("class", "points")
	.selectAll("g")
	.data(d3.entries(points))
	.enter().append("g")
	.attr("transform", function(d) { return "translate(" + projection(d.value) + ")"; });

	point.append("circle")
	.attr("r", 5)
	.attr("class","circle")
	;
	});

	// Add the buffer:
	d3.json("buffer.json", function(error, buffer) {
	// Add the buffer lines
	g3.selectAll("path")
	.data(topojson.feature(buffer, buffer.objects.buffer).features)
	.enter().append("path")
	.attr("d", path)
	.attr("class", "buffer")
	.attr("id",function(d) { return "b" + d.properties.Distance; });

	// Add the buffer text
	g3.selectAll(".buffer-text")
	.data(topojson.feature(buffer, buffer.objects.buffer).features)
	.enter()
	.append("text")
	.attr("class","buffer-text")
	.append("textPath")
	.attr("xlink:href", function(d) { return "#b" + d.properties.Distance; })
	.text(function(d) { return d.properties.Distance/1000 + ",000 km from Whitehorse"; })
	.attr("startOffset", "50%")
	.style("text-anchor","middle");
	})




	</script>