Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
map = {
let h = (width<600) ? width + 220: width * 0.9,
z = (width<600) ? 6.5 : 7,
container = DOM.element('div', { style: `width:${width}px;height:${h}px` });
yield container;
let map = L.map(container).setView([42.326,-71.0921861], 12); // initializes the map, sets zoom & coordinates
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var geojsonMarkerOptions = {
radius: 3,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.25
};
let citationDots = L.geoJson(ticketsGeo, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
}).addTo(map);
let legend = L.control({position: 'bottomleft'})
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
L = require('leaflet@1.2.0')
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
topojson = require("topojson-client@3")
ticketsGeo = {
let a = new Object;
a.type = "FeatureCollection";
a.features = ticketsArray;
yield a;
}
ticketsArray = violations.map( d => {
let o = new Object;
o.type = "Feature";
o.properties = d;
o.geometry = {"type":"Point", "coordinates": [+d.longitude,+d.latitude]};
return o;
});
violations = FileAttachment("snowviolations@1.csv").csv()
d3 = require('d3@5.0')
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.
