viewof crimeBars = V({
width: 400,
height:300,
data: {values: vanCrime2},
config: {
background: "white"
},
mark: "rect",
encoding: {
x: {field: "Offense", type: "nominal"},
y: {field: "*", type: "quantitative", aggregate: "count"},
color: {
field: "Offense Category",
type: "nominal",
scale: {
domain: Array.from(new Set(vanCrime2.map(d => d['Offense Category']))),
range: ["#4e79a7","#f28e2c","#e15759","#76b7b2"]}},
}
})
viewof crimeTime = V({
width: 600,
height: 200,
config: {
background: "white"
},
data: {values: vanCrime2},
mark: "line",
encoding: {
x: {field: "Date", type: "temporal"},
y: {field: "*", type: "quantitative", aggregate: "count"},
color: {field: "Offense Category", type: "nominal", scale: {domain: Array.from(new Set(vanCrime2.map(d => d['Offense Category']))), range: ["#4e79a7","#f28e2c","#e15759","#76b7b2"]}}
}
})
viewof CrimeMap = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });
yield container
let map = L.map(container);
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);
let VanAreasLayer = L.geoJson(vanAreas, { //instantiates a new geoJson layer using built in geoJson handling
weight: 2, //Attributes of polygons including the weight of boundaries and colors of map.
color: "#432",
}).bindPopup(function (Layer) { //binds a popup when clicking on each polygon to access underlying data
return Layer.feature.properties.NAME;
}).addTo(map); //Adds the layer to the map.
//This function formats our geojson file to be commensurate with leaflet. Geojson files are formatted using
//[lon, lat], we need to reverse this. we are creating an arrray of "feature(s)", that hold two lat lon coordinates
// and we reverse them. We then concatenate (or add on) final value which is the intensity. This is the strength of
// of each of these points. This heat map works by overlapping points and the added intensity of each dot changes the // color based on hot spots.
let crimePoints = vanCrime.features.map(feature =>
feature.geometry.coordinates.slice().reverse().concat([0.5]));
//We add this layer to the map.
let crimeLayer = heatLayer(crimePoints).addTo(map);
map.fitBounds(VanAreasLayer.getBounds());
}
// html`<div style="
// background: #fff;
// display: grid;
// height: ${screen.height / screen.width * 100}vw;
// grid-template-areas:
// 'a b'
// 'a b'
// 'c b'
// 'c b';
// grid-gap: 10px;
// ">
// <div name="a" style="grid-area:a;border:solid 1px #ccc;">${viewof crimeBars}</div>
// <div name="b" style="grid-area:b;border:solid 1px #ccc;">${viewof CrimeMap}</div>
// <div name="c" style="grid-area:c;border:solid 1px #ccc;">${viewof crimeTime}</div>
// </div>`
md` ## Loading and Preparing Data`
vanCrime = FileAttachment("vanCrime.json").json()
vanAreas = FileAttachment("VanAreas.json").json()
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.
