The avatar for @qua
Ao Qu
Published
Edited
Aug 11, 2021
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
topojson_data = await FileAttachment('regions_ny.geojson').json()
Insert cell
topojson_data.features
Insert cell
Insert cell
Insert cell
Insert cell
import {Radio} from "@observablehq/inputs"
Insert cell
import {Range} from "@observablehq/inputs"
Insert cell
import {button} from "@jashkenas/inputs"
Insert cell
d3 = require("d3@6", "d3-geo-projection@2")
Insert cell
import { jQuery as $ } from "@ddspog/useful-libs"
Insert cell
L = require('leaflet@1.2.0')
Insert cell
import {legend, swatches} from "@d3/color-legend"
Insert cell
path = d3.geoPath().projection(projection);
Insert cell
projection = d3.geoMercator().fitExtent([[0, plot_margin], [plot_width, plot_width]], topojson_data)
Insert cell
width = 900
Insert cell
plot_width = width / 3
Insert cell
plot_margin = 20
Insert cell
topojson = require("topojson-client@3")
Insert cell
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
Insert cell
html`<style>#map { width: 800px; height: 500px; }
.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
.legend { text-align: left; line-height: 12px; color: #555; } .legend i { width: 12px; height: 12px; float: left; margin-right: 5px; opacity: 0.7; }</style>`
Insert cell

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