embed({
width: 900,
height: 560,
padding: { top: 0, left: 0, right: 0, bottom: 0 },
data: [
{
name: "streetsVan",
url:
"https://gist.githubusercontent.com/drlynb/234c622e2f98da7c61393cbb33573bf8/raw/8e8fa5ae3dc76d94dcca3a50e3dce41b89eb7185/vanstreets.json",
format: { type: "json", feature: "vanstreets" },
transform: [
{
type: "geopath",
projection: "projection"
}
]
},
{
name: "parkingVan",
values: dparking1,
//"format": {"type": "csv", "parse": "auto"},
"transform": [
{
"type": "geopoint",
"projection": "projection",
"fields": ["longitude", "latitude"]
},
{
"type": "filter",
"expr": "datum.x != null && datum.y != null"
}
]
}],
scales: [],
"signals": [
{
"name": "hover",
"value": null,
"on": [
{"events": "symbol:mouseover", "update": "datum"},
{"events": "symbol:mouseout", "update": "null"}
]
},
{
"name": "dparkspots",
"value": "Vancouver Disabled PArking Spaces",
"update": "hover ? hover.NOTES + ' (' + hover.DESCRIPTN + ')' + ': ' + hover.LOCATION: 'Vancouver Disabled Parking'"
}
],
projections: [
{
name: "projection",
type: "mercator",
scale: 200000,
center: d3.geoCentroid(Streets)
//"translate": [{"signal": "width / 2"}, {"signal": "height / 2"}]
}
],
marks: [
{
type: "path",
from: { data: "streetsVan" },
encode: {
enter: {
stroke: { value: "#bbbbbb" }
},
update: {
path: { field: "path" }
}
}
},
{
"type": "symbol",
"from": {"data": "parkingVan"},
"encode": {
"enter": {
"size": {"value": 60},
"fill": {"value": "green"},
"fillOpacity": {"value": 0.8},
"stroke": {"value": "black"},
"strokeWidth": {"value": .5}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"fill": {"value": "green"}
},
"exit": {
"x": {"field": "x"},
"y": {"field": "y"},
"fill": {"value": "green"}
},
"hover":
{
"fill": {"value": "red"}
}}},
{
"type": "text",
"interactive": false,
"encode": {
"enter": {
"x": {"signal": "width", "offset": -5},
"y": {"value": 0},
"fill": {"value": "black"},
"fontSize": {"value": 12},
"align": {"value": "right"}
},
"update": {
"text": {"signal": "dparkspots"}
}
}
}
]
})
dp2 = d3.json("https://gist.githubusercontent.com/StanisNowak/7432a7e657f857e1e98d2f0f10015db7/raw/8a211fcffbea75f7caa8583736048e096679727b/disabilityParking.geojson")
usa = d3.json('https://vega.github.io/vega-datasets/data/us-10m.json')
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.
