Public
Edited
Jan 24, 2024
mapOfEurope = {
const isProjected = true // SET TO TRUE TO SEE IT PROJECTED //
const map = europe
const width = 700
const height = 600
const svg = d3.create("svg")
.attr('width', width)
.attr('height', height)
// Paths
const scaleFactor = 0.8
const centerX = 25.19
const centerY = 57
const d3projection = d3.geoConicConformal()
const projection = d3projection
.center([centerX, centerY])
.translate([width/2, height/2])
.scale(width * scaleFactor)
const path = d3.geoPath()
// .projection(projection)
if (isProjected) {
path.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: 'purple'
}))
// 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)
.style('vector-effect', "non-scaling-stroke")
.attr('vector-effect', "non-scaling-stroke")
}
const g = svg
.append('g')
//.style('scale', isProjected ? 1 : 10)
.classed('map', true)
drawMap(g)
return svg.node()
}
europe = FileAttachment("europeUltra.json").json()
mapOfUSA = {
const isProjected = true // CHANGE THIS //
const map = topojson.feature(geoTopo, "geo")
const width = 1000
const height = 600
const svg = d3.create("svg")
.attr('width', width)
.attr('height', height)
// Paths
const projection = d3.geoAlbersUsa()
// .translate([width/2, height/2])
const path = d3.geoPath()
if (isProjected) {
path.projection(projection)
}
// Data
const mapData = map.features.map((d, i) => ({
d: path(d),
centroid: path.centroid(d),
fill: 'purple'
}))
// 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)
}
const g = svg
.append('g')
// .attr('transform', !isProjected ? `translate(${width}, ${height})scale(6, -6)` : 'none')
drawMap(g)
return svg.node()
}
geoTopo = FileAttachment("geo.topo.json").json()
geoGeo = topojson.feature(geoTopo, "geo")
usAlbersCountiesGeo = topojson.feature(usAlbersCountiesTopo, "collection")
usAlbersCountiesTopo = FileAttachment("us-albers-counties.json").json()
mapOfUSAStates = {
const isProjected = true // CHANGE THIS //
const map = topojson.feature(usaStatesTopoUnprojected, 'states')
const width = 800
const height = 700
const svg = d3.create("svg")
.attr('width', width)
.attr('height', height)
// Paths
const d3projection = d3.geoAlbersUsa()
const projection = d3projection
.translate([width/2, height/2])
const path = d3.geoPath()
if (isProjected) {
path.projection(projection)
}
// Data
const mapData = map.features.map((d, i) => ({
d: path(d),
centroid: path.centroid(d),
fill: 'purple'
}))
// 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)
}
const g = svg.append('g')
drawMap(g)
return svg.node()
}
mapOfUSAStatesWithBbox = {
const map = topojson.feature(geoTopo, "geo")
const width = 600
const height = 600
const svg = d3.create("svg")
.attr('width', width)
.attr('height', height)
// Paths
//const bbox = topojson.bbox(usaStatesTopoUnprojected);
const scaleFactor = 1
const d3projection = d3.geoAlbersUsa()
const projection = d3projection
.fitSize([width, height], map)
// .translate([width / 2, height / 2])
const path = d3.geoPath().projection(projection)
// Data
const mapData = map.features.map((d, i) => ({
d: path(d),
centroid: path.centroid(d),
fill: 'purple'
}))
// 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)
}
const g = svg.append('g')
drawMap(g)
return svg.node()
}
mapOfUSAStatesProjected = {
const isProjected = false // CHANGE THIS //
const map = topojson.feature(usaStatesTopoProjected, 'states')
const width = 800
const height = 700
const svg = d3.create("svg")
.attr('width', width)
.attr('height', height)
// Paths
const d3projection = d3.geoAlbersUsa()
const projection = d3projection
.translate([width/2, height/2])
const path = d3.geoPath()
if (isProjected) {
path.projection(projection)
}
// Data
const mapData = map.features.map((d, i) => ({
d: path(d),
centroid: path.centroid(d),
fill: 'purple'
}))
// 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)
}
const g = svg.append('g')
.attr('transform', !isProjected ? `translate(${width/2}, ${height/2})scale(0.00015, -0.00015)` : `translate(${width/2}, ${height/2})scale(0.5, -0.5)`)
drawMap(g)
return svg.node()
}
mapOfUSACountiesProjected = {
const map = topojson.feature(usaCountiesTopoProjected, 'counties')
const width = 800
const height = 700
const svg = d3.create("svg")
.attr('width', width)
.attr('height', height)
// Paths
const path = d3.geoPath()
// Data
const mapData = map.features.map((d, i) => ({
d: path(d),
centroid: path.centroid(d),
fill: 'purple'
}))
// 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', 1)
}
const g = svg.append('g')
drawMap(g)
return svg.node()
}
usaCountiesGeoProjected = topojson.feature(usaCountiesTopoProjected, 'counties')
usaCountiesTopoProjected = FileAttachment("scaled-down.topo.json").json()
usaStatesGeoProjected = topojson.feature(usaStatesTopoProjected, 'states')
usaStatesTopoProjected = FileAttachment("states-proj.topo.json").json()
usaStatesGeoUnprojected = topojson.feature(usaStatesTopoUnprojected, 'states')
usaStatesTopoUnprojected = FileAttachment("states.topo.json").json()
usAlbersCountiesTopo
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.
