Published
Edited
May 27, 2020
md`# Distribution of Higher Education Institutions that Offer Degree Programs across China Mainland`
import {vl} from '@vega/vega-lite-api'
$schema= "https://vega.github.io/schema/vega-lite/v4.json"
d3 = require("d3-dsv@1")
import {printTable} from '@uwdata/data-utilities'
countrie_url = "https://raw.githubusercontent.com/deldersveld/topojson/master/countries/china/china-provinces-simplified.json"
vl.markGeoshape()
.data(vl.topojson(countrie_url).feature("CHN_adm1"))
.render()
vl.markGeoshape({fill: "white", stroke: "grey"})
.data(vl.topojson(countrie_url).feature("CHN_adm1"))
.width(1000)
.height(1000)
.render()
cities_file = FileAttachment("China cities@15.csv")
cities_text = cities_file.text()
cities_data = d3.csvParse(cities_text, d3.autoType)
printTable(cities_data.slice(0, 31))
{const map = vl.markGeoshape({fill: "white", stroke: "grey"})
.data(vl.topojson(countrie_url).feature("CHN_adm1"))
const city_points = vl.markPoint({filled: true, opacity: 0.5})
.data(cities_data)
.transform(vl.filter("datum.heis >= 3"))
.encode(vl.latitude().fieldQ("lat"),
vl.longitude().fieldQ("lng"),
vl.color().value("darkred"),
vl.size().fieldQ("heis").scale({range:[0, 3000]}),
vl.tooltip("city"))
return vl.layer(map, city_points)
.width(800)
.height(800)
.render()
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
