Published unlisted
Edited
Jun 6, 2021
md`# CSE 412 Project`
import { vl } from "@vega/vega-lite-api-v5"
dataset = d3.csv("https://raw.githubusercontent.com/cse412-21sp/fatal-police-shooting/main/data/search_history.csv")
plot = {
const hover = vl.selectPoint('hover')
.encodings('x') // limit selection to x-axis value
.on('mouseover') // select on mouseover events
.toggle(false) // disable toggle on shift-hover
.nearest(true); // select data point nearest the cursor
// predicate to test if a point is hover-selected
// return false if the selection is empty
const isHovered = hover.empty(false);
// define our base line chart of stock prices
const line1 = vl.markLine().encode(
vl.x().fieldT('date').axis({title: 'Date'}),
vl.y().fieldQ('shooting_count').axis({title: 'Shooting Count'}).scale({"domain": [0,150]})
);
const line2 = vl.markLine().encode(
vl.x().fieldT('date').axis({title: 'Date'}),
vl.y().fieldQ('search_count').axis({title: 'Google Search Popularity Score'}).scale({"domain": [0,105]})
);
// shared base for new layers, filtered to hover selection
const base1 = line1.transform(vl.filter(isHovered));
const base2 = line2.transform(vl.filter(isHovered))
// mark properties for text label layers
const label = {align: 'left', dx: 5, dy: -5};
const white = {stroke: 'white', strokeWidth: 2};
const plot1 = vl.data('https://raw.githubusercontent.com/cse412-21sp/fatal-police-shooting/main/data/search_history.csv')
.layer(
line1,
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldT('date')),
line1.markCircle()
.params(hover)
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
base1.markText(label, white).encode(vl.text().fieldQ('shooting_count')),
base1.markText(label).encode(vl.text().fieldQ('shooting_count'))
);
const plot2 = vl.data('https://raw.githubusercontent.com/cse412-21sp/fatal-police-shooting/main/data/search_history.csv')
.layer(
line2,
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldT('date')),
line2.markCircle()
.params(hover)
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
base2.markText(label, white).encode(vl.text().fieldQ('search_count')),
base2.markText(label).encode(vl.text().fieldQ('search_count'))
);
return vl.vconcat(plot1, plot2)
.padding({"left": 50, "top": 50, "right": 50, "bottom": 50})
.render();
}
d3 = require("d3@6")
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.
