parking1 = embedWithSpecificVersions({
$schema: 'https://vega.github.io/schema/vega/v5.json',
data:[
{
name: "streetsVan1",
url:
"https://gist.githubusercontent.com/drlynb/234c622e2f98da7c61393cbb33573bf8/raw/8e8fa5ae3dc76d94dcca3a50e3dce41b89eb7185/vanstreets.json",
format: { type: "json", feature: "vanstreets" },
transform: [
{
type: "geopath",
projection: "projection"
}
]
},
{
name: "disabilities1",
url: "https://gist.githubusercontent.com/StanisNowak/7432a7e657f857e1e98d2f0f10015db7/raw/8a211fcffbea75f7caa8583736048e096679727b/disabilityParking.geojson",
format: {
type: "json",
property: "features"
}
}],
"signals": [
{
"name": "hover",
"value": null,
"on": [
{"events": "symbol:mouseover", "update": "datum.properties"},
{"events": "symbol:mouseout", "update": "null"}
]
},
{
"name": "dparkspots",
"value": "Vancouver Disabled Parking Spaces",
"update": "hover ? hover.properties.NOTES + ' (' + hover + ')' + ': ' + hover: 'Vancouver Disabled Parking Spaces'"
}
],
projections: [{
name: "projection",
fit: {signal: "data('disabilities1')"},
size: {signal: "[800, 600]"},
//scale: 190000,
//center: [-123.149648,49.265815],
type: "mercator",
center: d3.geoCentroid(Streets)
}],
marks: [
{
type: "shape",
from: {data: "disabilities1"},
encode: {
enter: {
opacity: {value: 0.50},
fill: {value: "blue"},
"tooltip":
{"signal": "{'Notes': datum.properties.NOTES, 'Location': datum.properties.LOCATION}"}
},
update: {
opacity: {value: 0.50},
fill: {value: "blue"}
},
hover: {"fill": {"value": "red"}}
},
transform: [
{
type: "geoshape",
projection: "projection",
pointRadius: 6
}
]
},
{
type: "path",
from: { data: "streetsVan1" },
encode: {
enter: {
stroke: { value: "#aaaaaa" }
},
update: {
path: { field: "path" }
}
}
},
{
"type": "text",
"interactive": false,
"encode": {
"enter": {
"x": {"signal": "width", "offset": -5},
"y": {"value": 0},
"fill": {"value": "black"},
"fontSize": {"value": 14},
"align": {"value": "right"}
},
"update": {
"text": {"signal": "dparkspots"}
}
}
}
]
})
ChicagoTraffic = embedWithSpecificVersions({
$schema: 'https://vega.github.io/schema/vega/v5.json',
width: 800,
height: 600,
data:[
{
name: "StreetsChi",
url: "https://www.sfu.ca/~snowak/data/ChiTrafficCount.json", //Hosted on personal Webspace, feel free to download. Initial files are found there as well.
format: { type: "topojson", feature: "ChiTrafficCount" } //this is what the feature layer is called.
}],
projections: [{
name: "projection",
fit: {signal: "data('StreetsChi')"}, //Fit the bounds of the map to the geodata within a particular dataset
size: {signal: "[width, height]"}, // fit the size to the width and height parameters set above
type: "mercator",
}],
marks: [
{
name: "lines",
type: "shape",
from: { data: "StreetsChi" },
encode: {
update: {
strokeWidth: {value: .75}, //width of street lines
stroke: {scale: "color", field: "properties.join_Total Passing Vehicle Volume"} // to access properties of shapes, you have to start with properties.[desired propertyname here]. the same goes for geojson
}
},
transform: [{type: "geoshape", projection: "projection"}] //can do the transformation in the data section, but this reduces the dataset just to the geo feature projection.
}
],
scales: [{
name: "color",
type: "linear",
domain: {data: "StreetsChi", field: "properties.join_Total Passing Vehicle Volume"}, //sets the domain according to min and max of a particular data field
range: {scheme: "lightmulti"} // color schemes available at: https://vega.github.io/vega/docs/schemes/
}]
})
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.
