Data viz & art. Likes beautiful and fun things 🌸
Public
Edited
May 16
1 fork
Importers
33 stars
mapCanvas = (d3projection, map, centerX, centerY, scaleFactor=5, width=800, height=800, fillOne='#a2d2ff', fillTwo='#cdb4db') => {
// Paths
const projection = d3projection
.center([centerX, centerY]) // center of the country
.translate([width/2, height/2])
.scale(width * scaleFactor)
const path = d3.geoPath()
.projection(projection)
// Data
// Map each raw feature to the path corresponding to it, e.g. path(franceCommunes.features[0]) produces a path string
// Add any additional properties for the map, such as colours
const mapData = map.features.map((d, i) => ({
d: path(d),
centroid: path.centroid(d),
fill: i%5 === 0 ? fillOne : fillTwo // random colours
}))
// Function to draw the map on canvas
const drawMap = (ctx) => {
ctx.fillStyle = '#ffffff'
for (const { d, fill } of mapData) {
const p = new Path2D(d)
ctx.fillStyle = fill
ctx.strokeStyle = '#fff'
ctx.lineWidth = 1
ctx.stroke(p)
ctx.fill(p)
}
}
// Function to draw the centroids of the map on canvas
const drawCentroids = (ctx) => {
for (const { centroid } of mapData) {
ctx.fillStyle = '#fff'
ctx.beginPath();
ctx.arc(centroid[0], centroid[1], 2, 0, 2 * Math.PI);
ctx.fill();
}
}
// Draw the map on canvas
const ctx = DOM.context2d(width, height)
// Set canvas dimensions
const scale = Math.max(2, window.devicePixelRatio)
ctx.canvas.style.width = `${width}px`
ctx.canvas.style.height = `${height}px`
ctx.canvas.width = width * scale
ctx.canvas.height = height * scale
ctx.scale(scale, scale)
drawMap(ctx)
//drawCentroids(ctx) // uncomment this to see the centroids
return ctx.canvas;
}
mapSvg = (d3projection, map, centerX, centerY, scaleFactor=5, width=800, height=800, fillOne='#a2d2ff', fillTwo='#cdb4db') => {
const svg = d3.create("svg")
.attr('width', width)
.attr('height', height)
// Paths
const projection = d3projection
.center([centerX, centerY])
.translate([width/2, height/2])
.scale(width * scaleFactor)
const path = d3.geoPath()
.projection(projection)
// Data
// Map each raw feature to the path corresponding to it, e.g. path(franceCommunes.features[0]) produces a path string
// Add any additional properties for the map, such as colours
const mapData = map.features.map((d, i) => ({
d: path(d),
centroid: path.centroid(d),
fill: i%5 === 0 ? fillOne : fillTwo // random colours
}))
// Function to draw the map with svg
const drawMap = (el) => {
el.selectAll('path')
.data(mapData)
.join('path')
.attr('d', d => d.d)
.style('fill', d => d.fill)
.style('stroke', '#fff')
.style('stroke-width', 0.5)
}
// Function to draw the centroids of the map with svg
const drawCentroids = (el) => {
el.selectAll('circle')
.data(mapData)
.join('circle')
.attr('cx', d => d.centroid[0])
.attr('cy', d => d.centroid[1])
.attr('r', 2)
.style('fill', '#fff')
}
const g = svg.append('g').classed('map', true)
drawMap(g)
drawCentroids(g) // uncomment to see the centroids
return svg.node()
}
worldRegionsMapCanvas = {
const map = worldRegions
// Geo center of World (ish) WikiMiniAtlas40°52′N 34°34′ECoordinates: 40°52′N 34°34′E, depends on projection
const centerX = 0
const centerY = 0
const width=900
const height=600
// Dynamic values from inputs
const scaleFactor = scaleWorldRegions // map scale
const d3projection = d3projections[d3projWorldRegions] // map projection
return mapCanvas(d3projection, map, centerX, centerY, scaleFactor, width, height, fillTwoWorldRegions, fillTwoWorldRegions)
}
// Example of the same but with SVG
worldRegionsMapSvg = {
const map = worldRegions
// Geo center of World (ish) WikiMiniAtlas40°52′N 34°34′ECoordinates: 40°52′N 34°34′E, depends on projection
const centerX = 0
const centerY = 0
const width=900
const height=600
// Dynamic values from inputs
const scaleFactor = scaleWorldRegions // map scale
const d3projection = d3projections[d3projWorldRegions] // map projection
return mapSvg(d3projection, map, centerX, centerY, scaleFactor, width, height, fillTwoWorldRegions, fillTwoWorldRegions)
}
worldCountriesMapCanvas = {
const map = worldCountries
// Geo center of World (ish) WikiMiniAtlas40°52′N 34°34′ECoordinates: 40°52′N 34°34′E, depends on projection
const centerX = 0
const centerY = 0
const width=900
const height=600
// Dynamic values from inputs
const scaleFactor = scaleWorldCountries // map scale
const d3projection = d3projections[d3projWorldCountries] // map projection
return mapCanvas(d3projection, map, centerX, centerY, scaleFactor, width, height, fillTwoWorldCountries, fillTwoWorldCountries)
}
europeCountriesMapCanvas = {
//const d3projection = d3.geoConicConformal()
const map = europe
// Geo center of Europe (ish) 54°54′N 25°19′E.
const centerX = 25.19
const centerY = 57
const width=800
const height=700
// Dynamic values from inputs
const scaleFactor = scaleEurope // map scale
const d3projection = d3projections[d3projEurope] // map projection
return mapSvg(d3projection, map, centerX, centerY, scaleFactor, width, height, fillTwoEurope, fillTwoEurope)
}
franceCommunesMapCanvas = {
//const d3projection = d3.geoConicConformal()
const map = franceCommunes
// Geo center of France
const centerX = 2.349014
const centerY = 46.279229
const width=800
// Dynamic values from inputs
const scaleFactor = scaleFrance // map scale
const d3projection = d3projections[d3projFrance] // map projection
return mapCanvas(d3projection, map, centerX, centerY, scaleFactor, width, width, fillOneFrance, fillTwoFrance)
}
franceDepartmentsMapCanvas = {
const map = franceDepartments
// Geo center of France
const centerX = 2.349014
const centerY = 46.279229
const width=800
// Dynamic values from inputs
const scaleFactor = scaleFrance // map scale
const d3projection = d3projections[d3projFrance] // map projection
return mapCanvas(d3projection, map, centerX, centerY, scaleFactor, width, width, fillOneFrance, fillTwoFrance)
}
usAlbersCountiesMapCanvas = {
const map = usAlbersCountiesGeo
// Geo center of US(ish) 39.8283° N, 98.5795° W
const centerX = 0
const centerY = 36
const width=900
const height=600
// Dynamic values from inputs
const scaleFactor = scaleUSAlbersCounties // map scale
const d3projection = d3projections[d3projUSAlbersCounties] // map projection
return mapCanvas(d3projection, map, centerX, centerY, scaleFactor, width, height, fillOneUS, fillTwoUS)
}
// Example of the same but with svg
usAlbersCountiesMapSvg = {
const map = usAlbersCountiesGeo
// Geo center of US(ish) 39.8283° N, 98.5795° W
const centerX = 0
const centerY = 36
const width=900
const height=600
// Dynamic values from inputs
const scaleFactor = scaleUSAlbersCounties // map scale
const d3projection = d3projections[d3projUSAlbersCounties] // map projection
return mapSvg(d3projection, map, centerX, centerY, scaleFactor, width, height, fillOneUS, fillTwoUS)
}
japanTownsMapCanvas = {
const map = japanTownsGeo
// Geo center of Japan(ish) 36.2048° N, 138.2529° E
const centerX = 138
const centerY = 36
const width=700
const height=700
// Dynamic values from inputs
const scaleFactor = scaleJapanTowns // map scale
const d3projection = d3projections[d3projJapanTowns] // map projection
return mapCanvas(d3projection, map, centerX, centerY, scaleFactor, width, height, fillOneJapan, fillTwoJapan)
}
usAlbersCountiesTopo = FileAttachment("us-albers-counties.json").json()
// convert topojson
usAlbersCountiesGeo = topojson.feature(usAlbersCountiesTopo, "collection")
japanTownsTopo = FileAttachment("jp-towns.json").json()
japanTownsGeo = topojson.feature(japanTownsTopo, 'JPN_adm2')
topojson = require('topojson-client@3', 'topojson-simplify@3')
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.
