Published
Edited
Mar 20, 2022
ind = 8932
before = 40
after = 140
zoom = 13
legend({
color: d3.scaleSequential([0.5, 1.5], d3.interpolateRdYlGn),
title: "Relative Speed (Actual Speed / Historical Average Speed)",
ticks: 10,})
map_nyc = {
let container = DOM.element('div', {style: `width:${width}px;height:${width/1.6}px`});
yield container;
let map = L.map(container).setView([incident_lat, incident_lon], zoom);
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);
for (var i=0; i<speed_data.length; i++) {
var item = speed_data[i]
L.polyline(coordinates[i], {color: item.color, opacity:1}).addTo(map);
}
var incident = incident_data[date];
L.circle([incident_lat, incident_lon], 100, {color: incident.color}).addTo(map)
// L.svg({clickable:true}).addTo(map)
// const overlay = d3.select(map.getPanes().overlayPane)
// const svg = overlay.select('svg').attr("pointer-events", "auto")
// svg.append("g")
// // .attr("transform", "translate(610,20)")
// .append(() => legend({
// color: d3.scaleSequential([0, 100], d3.interpolateViridis),
// title: html`<h1 color:"white";>Temperature (°F)</h1>`}));
map.on("zoomend")
}
data = {
let data = await $.ajax({
url: 'http://localhost:5000/generate_data',
data: JSON.stringify([ind, before, after]),
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
type: 'POST'
})
return data
}
coordinates = data.coordinates
datelist = data.datelist
incident_data = data.incident
incident_lat = incident_data.latitude
incident_lon = incident_data.longitude
speed_data = {
let data = await $.ajax({
url: 'http://localhost:5000/get_speed_data',
data: JSON.stringify([date]),
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
type: 'POST'
})
return data
}
import { Scrubber } from "@mbostock/scrubber"
L = require('leaflet@1.2.0')
d3 = require("d3@6", "d3-geo-projection@2")
import { jQuery as $ } from "@ddspog/useful-libs"
import {legend, swatches} from "@d3/color-legend"
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
html`<style>#map { width: 800px; height: 500px; }
.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
.legend { text-align: left; line-height: 12px; color: #555; } .legend i { width: 12px; height: 12px; float: left; margin-right: 5px; opacity: 0.7; }</style>`
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.
