Published
Edited
Apr 1, 2019
embed = require("vega-embed@3")
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
L = require('leaflet@1.2.0')
parking = VegaL({
$schema: 'https://vega.github.io/schema/vega/v5.json',
data:[{
name: "disabilities",
url: "https://gist.githubusercontent.com/StanisNowak/7432a7e657f857e1e98d2f0f10015db7/raw/8a211fcffbea75f7caa8583736048e096679727b/disabilityParking.geojson",
format: {
type: "json",
property: "features"
}
}],
projections: [{
name: "projection",
fit: {signal: "data('disabilities')"},
size: {signal: "[800, 600]"},
//scale: 190000,
//center: [-123.149648,49.265815],
type: "mercator"
}],
marks: [
{
type: "shape",
from: {data: "disabilities"},
encode: {
update: {
opacity: {value: 0.25},
fill: {value: "blue"}
}
},
transform: [
{
type: "geoshape",
projection: "projection",
pointRadius: 6
}
]
}
]
})
//html` <svg width="128" height="128">${parking}</svg>`
Vega = L, require('leaflet-vega@0.8.6/dist/bundle.js').catch(() => L.Vega)
grandCentral = {
let response = await fetch('https://gist.githubusercontent.com/StanisNowak/7432a7e657f857e1e98d2f0f10015db7/raw/8a211fcffbea75f7caa8583736048e096679727b/disabilityParking.geojson');
let json = await response.json();
return json
}
map2 = {
const map = L.map(mapDOM).setView([49.265815, -123.14], 13);
L.svg().addTo(map);
L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', {
attribution: 'Wikimedia maps beta | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
yield map;
}
mapDOM = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
}
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.
