Published
Edited
May 2, 2019
d3 = require("d3@5") //d3 version5
md`## Setting parameters for the visualization chart.`
width = 800
height = 600
margin = 15
md`## Loading Seattle map data`
seattle = d3.json('https://raw.githubusercontent.com/seattleio/seattle-boundaries-data/master/data/zip-codes.geojson')
projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], seattle)
pathGenerator = d3.geoPath().projection(projection)
md`## Drawing Seattle map`
seattleMap = {
// create SVG element
let svg = d3.select(DOM.svg(width, height))
// construct the element
svg.append('path')
.datum(seattle)
.attr('d', pathGenerator)
.attr('fill', 'none')
.attr('stroke', '#999999')
.attr('stroke-width', '1')
// pass to Observable to draw this block
return svg.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.
