About Map Data: GeoJSON and TopoJSON with D3 / Di

Data Viz Engineer. Author of Practical UI Patterns for Design Systems. Creator of Typey Type for Stenographers.

Workspace

Published

Journal: Getting Started with Data Viz

Edited

Mar 16, 2021

6 forks

33 stars

map = {

const chartWidth = 300;

const chartHeight = 300;

const backgroundColor = "#EAF2FA";

const landColor = "#09A573";

const landStroke = "#FCF5E9";

const markerColor = "#E26F99";

const projection = d3.geoMercator()

.scale([180])

.center(markers[0].geometry.coordinates)

.translate([chartWidth / 3, chartHeight / 3]);

const pathGenerator = d3.geoPath(projection);

const svg = d3.create('svg')

.attr("title", "Map")

.attr('width', chartWidth)

.attr('height', chartHeight)

svg.append("rect")

.attr("width", chartWidth)

.attr("height", chartHeight)

.attr('fill', backgroundColor);

svg.selectAll('path')

.data(au_and_nz.features)

.join('path')

.attr('d', pathGenerator)

.attr('fill', landColor)

.attr('stroke', landStroke)

.attr('stroke-width', 1);

svg.selectAll("circle")

.data(markers)

.join("circle")

.attr("cx", d => projection(d.geometry.coordinates)[0])

.attr("cy", d => projection(d.geometry.coordinates)[1])

.attr("r", 4)

.attr("fill-opacity", 0.5)

.attr("fill", markerColor)

.attr("stroke", markerColor);

return svg.node();

}

map_with_combined_data = {

const chartWidth = 300;

const chartHeight = 300;

const backgroundColor = "#EAF2FA";

const landColor = "#09A573";

const landStroke = "#FCF5E9";

const markerColor = "#E26F99";

const projection = d3.geoMercator()

.scale([180])

.center(markers[0].geometry.coordinates)

.translate([chartWidth / 3, chartHeight / 3]);

const pathGenerator = d3.geoPath(projection);

const svg = d3.create('svg')

.attr("title", "Map")

.attr('width', chartWidth)

.attr('height', chartHeight)

svg.append("rect")

.attr("class", "background")

.attr("width", chartWidth)

.attr("height", chartHeight)

.attr('fill', backgroundColor);

svg.selectAll('g.countries path')

.data(data.features.filter(d => d.geometry.type === "MultiPolygon"))

.join('path')

.attr('d', pathGenerator)

.attr('fill', landColor)

.attr('stroke', landStroke)

.attr('stroke-width', 1);

svg.selectAll("g.markers circle")

.data(data.features.filter(d => d.geometry.type === "Point"))

.join("circle")

.attr("cx", d => projection(d.geometry.coordinates)[0])

.attr("cy", d => projection(d.geometry.coordinates)[1])

.attr("r", 4)

.attr("fill-opacity", 0.5)

.attr("fill", markerColor)

.attr("stroke", markerColor);

return svg.node();

}

map_with_labels = {

const chartWidth = 300;

const chartHeight = 300;

const backgroundColor = "#EAF2FA";

const landColor = "#09A573";

const landStroke = "#FCF5E9";

const markerColor = "#E26F99";

const labelOnWaterColor = "#504C57";

const labelOnLandColor = "#FAF9FB";

const projection = d3.geoMercator()

.scale([180])

.center(markers[0].geometry.coordinates)

.translate([chartWidth / 4, chartHeight / 3]);

const pathGenerator = d3.geoPath(projection);

const svg = d3.create('svg')

.attr("title", "Map")

.attr('width', chartWidth)

.attr('height', chartHeight)

svg.append("rect")

.attr("width", chartWidth)

.attr("height", chartHeight)

.attr('fill', backgroundColor);

svg.selectAll('path')

.data(au_and_nz.features)

.join('path')

.attr('d', pathGenerator)

.attr('fill', landColor)

.attr('stroke', landStroke)

.attr('stroke-width', 1);

svg.selectAll("circle")

.data(markers)

.join("circle")

.attr("cx", d => projection(d.geometry.coordinates)[0])

.attr("cy", d => projection(d.geometry.coordinates)[1])

.attr("r", 4)

.attr("fill-opacity", 0.5)

.attr("fill", markerColor)

.attr("stroke", markerColor);

svg.selectAll("g.countryLabels text")

.data(au_and_nz.features)

.join("text")

.attr("fill", d => d.properties.name === "New Zealand" ? labelOnWaterColor : labelOnLandColor)

.attr("transform", d => `translate(${pathGenerator.centroid(d)})`)

.attr("dx", "0em")

.attr("dy", d => d.properties.name === "New Zealand" ? "2.2em" : "0em")

.attr("text-anchor", "middle")

.style("font", "400 16px/1.5 'Source Sans Pro', 'Noto Sans', sans-serif")

.text(d => d.properties.name);

svg.selectAll("g.pointOfInterest text")

.data(markers)

.join("text")

.attr("fill", labelOnWaterColor)

.attr("transform", d => `translate(${pathGenerator.centroid(d)})`)

.attr("dx", "-0.5em")

.attr("dy", "-0.5em" )

.attr("text-anchor", "end")

.style("font", "400 14px/1.5 'Source Sans Pro', 'Noto Sans', sans-serif")

.text(d => "Broome");

return svg.node();

}

data = {

let data = Object.assign({}, au_and_nz);

data.features = au_and_nz.features.slice(0);

data.features.push(markers[0]);

return data;

}

au_and_nz = FileAttachment("Australia and New Zealand.geo.json").json()

markers = [

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [

122.2111576795578,

-17.928395068168417

]

}

]

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.

Learn more