Published
Edited
Mar 13, 2020
2 forks
16 stars
import {vl} from '@vega/vega-lite-api'
d3 = require("d3-dsv@1")
import {printTable} from '@uwdata/data-utilities'
countries_url = "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries-sans-antarctica.json"
vl.markGeoshape()
.data(vl.topojson(countries_url).feature("countries1"))
.render()
vl.markGeoshape({fill: "lightgrey", stroke: "black"})
.data(vl.topojson(countries_url).feature("countries1"))
.project(vl.projection("mercator").scale(500).center(15, 28))
.width(600)
.height(600)
.render()
cities_file = FileAttachment("worldcities.csv")
cities_text = cities_file.text()
cities_data = d3.csvParse(cities_text, d3.autoType)
printTable(cities_data.slice(0, 10))
{
const map = vl.markGeoshape({fill: "lightgrey", stroke: "black"})
.data(vl.topojson(countries_url).feature("countries1"))
const city_points = vl.markPoint({filled: true, opacity: 0.3})
.data(cities_data)
.transform(vl.filter("datum.population >= 1000000"))
.encode(vl.latitude().fieldQ("lat"),
vl.longitude().fieldQ("lng"),
vl.color().value("purple"),
vl.size().fieldQ("population").scale({range:[0, 3000]}),
vl.tooltip("city"))
return vl.layer(map, city_points)
.project(vl.projection("mercator").scale(500).center(15, 28))
.width(600)
.height(600)
.render()
}
ag_file = FileAttachment("agricultural_land.csv")
ag_text = ag_file.text()
ag_data = d3.csvParse(ag_text, d3.autoType)
printTable(ag_data.slice(0,10))
vl.markGeoshape({stroke: "black"})
.data(vl.topojson(countries_url).feature("countries1"))
.transform(vl.lookup("id").from(vl.data(ag_data).key("Country Code").fields("2015")))
.encode(vl.color().fieldQ("2015"),
vl.tooltip("properties.name"))
.height(500)
.width(700)
.render()
vl.markGeoshape({stroke: "black"}).config({invalidValues: null})
.data(vl.topojson(countries_url).feature("countries1"))
.transform(vl.lookup("id").from(vl.data(ag_data).key("Country Code").fields("2015")))
.encode(vl.color().fieldQ("2015").condition({test: "datum['2015'] == null", value: "lightgrey"}),
vl.tooltip("properties.name"))
.height(500)
.width(700)
.render()
viewof selectYear = html`<input type=range min=1961 max=2015 step=1>`
vl.markGeoshape({stroke: "black"}).config({invalidValues: null})
.data(vl.topojson(countries_url).feature("countries1"))
.transform(vl.lookup("id").from(vl.data(ag_data).key("Country Code").fields(String(selectYear))))
.encode(vl.color().fieldQ(String(selectYear)).condition({test: "datum['" + String(selectYear) +"'] == null", value: "lightgrey"}),
vl.tooltip("properties.name"))
.height(500)
.width(700)
.render()
vl.markGeoshape({stroke: "black"}).config({invalidValues: null})
.data(vl.topojson(countries_url).feature("countries1"))
.transform(vl.lookup("id").from(vl.data(ag_data).key("Country Code").fields(String(selectYear))),
vl.filter("datum['" + String(selectYear) +"'] == null"))
.encode(vl.color().value("lightgrey"),
vl.tooltip("properties.name"))
.height(500)
.width(700)
.render()
uk_url = "https://raw.githubusercontent.com/deldersveld/topojson/master/countries/united-kingdom/uk-counties.json"
vl.markGeoshape({stroke: "grey"})
.data(vl.topojson(uk_url).feature("GBR_adm2"))
.encode(vl.color().fieldN("properties.TYPE_2"),
vl.tooltip("properties.TYPE_2"))
.project(vl.projection("conicEqualArea"))
.height(500)
.width(500)
.render()
vl.markGeoshape({stroke: "grey"})
.data(vl.topojson(uk_url).feature("GBR_adm2"))
.transform(vl.filter("datum.properties.TYPE_2 == 'London Borough' || datum.properties.TYPE_2 == 'London Borough (royal)' || datum.properties.TYPE_2 == 'London Borough (city)'"))
.encode(
vl.color().fieldN("properties.NAME_2").title("Borough").scale({scheme:"category20"}),
vl.tooltip("properties.NAME_2"))
.project(vl.projection("conicEqualArea").scale(50000).center(-0.118092, 51.509865))
.height(500)
.width(500)
.render()
census_file = FileAttachment("census-2001-ks24-borough.csv")
census_text = census_file.text()
census_data = d3.csvParse(census_text, d3.autoType)
printTable(census_data.slice(0, 10))
vl.markGeoshape({stroke: "grey"})
.data(vl.topojson(uk_url).feature("GBR_adm2"))
.transform(
vl.lookup("properties.NAME_2")
.from(vl.data(census_data).key("Area Name").fields("All people", "Number of all people who are migrants")),
vl.calculate("(datum['Number of all people who are migrants']/datum['All people'])*100").as("Migrant %"))
.encode(vl.color().fieldQ("Migrant %"),
vl.tooltip("properties.NAME_2"))
.project(vl.projection("conicEqualArea").scale(50000).center(-0.118092, 51.509865))
.height(500)
.width(500)
.render()
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.
