Published
Edited
Jul 6, 2019
2 forks
5 stars
md`# India Map Examples`
md`## India With Disputed Areas`
html`
<div class="india-with-disputed">
<svg>
</svg>
</div>
`
d3 = require('d3@5')
{
d3.select('.india-with-disputed > svg').remove() // Without this, D3 just keeps appending new svgs each time.
const width = 500;
const height = 500;
// returns a d3 selection of parent-DOM-element-for-d3 (which continues down the method chain...)
const d3SelectionOfSVGCanvas = d3.select('.india-with-disputed')
.append('svg')
.attr('class', 'my-canvas')
.attr('width', width)
.attr('height', height)
var g = d3SelectionOfSVGCanvas.append("g");
var url = "https://raw.githubusercontent.com/HindustanTimesLabs/shapefiles/master/india/state_ut/india_state.json";
const json = await d3.json(url);
// now build the projection
var projection = d3.geoMercator().fitSize([width, height], json);
var path = d3.geoPath().projection(projection);
d3SelectionOfSVGCanvas.selectAll("path")
.data(json.features)
.enter()
.append('path')
.attr('d', path);
return d3SelectionOfSVGCanvas.node();
}
md`## India Without Disputed Areas`
html`
<div class="india-without-disputed">
<svg>
</svg>
</div>
`
{
d3.select('.india-without-disputed > svg').remove() // Without this, D3 just keeps appending new svgs each time.
const width = 500;
const height = 500;
// returns a d3 selection of parent-DOM-element-for-d3 (which continues down the method chain...)
const d3SelectionOfSVGCanvas = d3.select('.india-without-disputed')
.append('svg')
.attr('class', 'my-canvas')
.attr('width', width)
.attr('height', height)
var g = d3SelectionOfSVGCanvas.append("g");
var url = "https://raw.githubusercontent.com/india-in-data/india_maps/master/india_state_ut_administered.geojson";
const json = await d3.json(url);
// now build the projection
var projection = d3.geoMercator().fitSize([width, height], json);
var path = d3.geoPath().projection(projection);
d3SelectionOfSVGCanvas.selectAll("path")
.data(json.features)
.enter()
.append('path')
.attr('d', path);
return d3SelectionOfSVGCanvas.node();
}
md`# India on World Map`
md`The next couple of examples center India in the world map. We'll look at examples using a version of the country map from Natural Earth`
md`## World Map With India Without The Disputed Areas`
md`Here is a world map with India colored in red. The map is centered on India using \`.rotate()\` and the longitude of the Indian mainland.`
html`
<div class="world-india-without-disputed">
<svg>
</svg>
</div>
`
{
d3.select('.world-india-without-disputed > svg').remove() // Without this, D3 just keeps appending new svgs each time.
const width = 600;
const height = 600;
// returns a d3 selection of parent-DOM-element-for-d3 (which continues down the method chain...)
const d3SelectionOfSVGCanvas = d3.select('.world-india-without-disputed')
.append('svg')
.attr('class', 'my-canvas')
.attr('width', width)
.attr('height', height)
var g = d3SelectionOfSVGCanvas.append("g");
var url = "https://raw.githubusercontent.com/shriphani/india_in_data/master/geojson/countries.geojson";
const json = await d3.json(url);
// now build the projection
var projection = d3.geoMercator().rotate([-78.9629,0]).fitSize([width, height], json);
var path = d3.geoPath().projection(projection);
d3SelectionOfSVGCanvas.selectAll("path")
.data(json.features)
.enter()
.append('path')
.attr('d', path)
.style('fill', function(d, i) {if (d.properties.ADMIN == "India") { return d3.color("red ") }})
return d3SelectionOfSVGCanvas.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
