UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
crimeChart = {
let div = html`<div style='height:400px;'></div>`;
const mapHolder = [0];
// Like Leaflet and Mapbox GL JS, Google Maps is very picky about
// needing to be initialized on a div that's already included
// in the page. So I yield the div first, to establish it in
// the page.
yield div;
let map = new google.maps.Map(div, {
center: { lng: -122.340700, lat: 47.606925 },
zoom: 10
});
mapHolder[0] = map;
points.map(
p =>
new google.maps.Marker({
position: { lng: p.x, lat: p.y },
map: mapHolder[0]
})
);
}
initialCenter = [-122.340700, 47.606925]
google = require('https://maps.googleapis.com/maps/api/js?key=AIzaSyB4JQkUKSUqHQmteJ5xdk4RdrFqHi04hdg').catch(
() => window.google
)
formatTime1 = d3.timeParse("%m/%d/%Y %I:%M:%S %p")
points = SeattleSafety.filter(
d => formatTime1(d["Event Clearance Date"]).getFullYear() == "2016"
).map(d => {
return {
x: +d.Longitude,
y: +d.Latitude
};
})
topojson = require("topojson-client@3")
width2 = 900
import { swatches } from "@d3/color-legend"
md`### Crime`
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.
