svg = {
const svg = d3.select(DOM.svg(850, height))
// const path = d3.geoPath()
const londonProjection = d3.geoMercator()
.center([-0.1, 51.49])
.scale(Math.pow(2, 17) / (2 * Math.PI))
.translate([width / 2, height / 2])
const path = d3.geoPath().projection(londonProjection)
svg.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
svg.append("path")
.attr("stroke", "#aaa")
.attr("stroke-width", 0.5)
.attr("d", path(topojson.mesh(london, london.objects.boroughs)))
return svg.node()
}
canvas = {
const context = DOM.context2d(width, height)
// const path = d3.geoPath().context(context)
const londonProjection = d3.geoMercator()
.center([-0.1, 51.49])
.scale(Math.pow(2, 17) / (2 * Math.PI))
.translate([width / 2, height / 2])
const path = d3.geoPath().projection(londonProjection).context(context)
context.lineWidth = 0.5
context.strokeStyle = "#aaa"
context.beginPath()
path(topojson.mesh(london))
context.stroke()
context.strokeStyle = "#000"
context.beginPath()
path(topojson.mesh(london, london.objects.boroughs, (a, b) => a !== b))
path(topojson.feature(london, london.objects.boroughs))
context.stroke()
return context.canvas
}
height = 400
topojson = require('topojson')
london = d3.json('https://vega.github.io/vega-datasets/data/londonBoroughs.json')
d3 = require('d3@5')
seoul_gu = FileAttachment("Seoul_Gu.topojson").json()
canvas2 = {
const context = DOM.context2d(width, height)
// const path = d3.geoPath().context(context)
const londonProjection = d3.geoMercator()
.center([126.99, 37.55])
.scale(Math.pow(2, 18) / (2 * Math.PI))
.translate([width / 2, height / 2])
const path = d3.geoPath().projection(londonProjection).context(context)
context.lineWidth = 0.5
context.strokeStyle = "#aaa"
context.beginPath()
path(topojson.mesh(seoul_gu))
context.stroke()
context.strokeStyle = "#000"
context.beginPath()
path(topojson.mesh(seoul_gu, seoul_gu.objects.Seoul_Gu, (a, b) => a !== b))
path(topojson.feature(seoul_gu, seoul_gu.objects.Seoul_Gu))
context.stroke()
return context.canvas
}
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.
