Published
Edited
Mar 28, 2021
md `# Final Project`
// viewof crimeCategory = select({
// title: "Crime Category",
// description: "As a child, which vegetables did you refuse to eat?",
// options: uniqueCrimes,
// // options: ["Robbery", "Theft", "Disturbance", "Cauliflower", "Kale", "Turnips", "Green Beans", "Asparagus"],
// multiple: true
// })
import {Select} from "@observablehq/inputs"
viewof crimeCategory = Select(uniqueCrimes, {multiple: true, label: "Select crime category"})
crimeCategory
import {vl} from '@vega/vega-lite-api'
import { aq, op } from "@uwdata/arquero"
d3 = require('d3-dsv')
file = FileAttachment("new_data@1.csv")
data_new = d3.csvParse(await file.text())
data_new
md`# Stat 479 Final Project`
import {select} from "@jashkenas/inputs"
crimeCategory
import {date} from "@jashkenas/inputs"
viewof chosenDate = date({title : "Please choose a date", description: "Choose a crime data"})
html `<p> The date you choose is ${chosenDate}`
html `<h1> Plot map </h1>`
data_raw = aq.fromCSV(await FileAttachment("new_data@1.csv").text())
// data_raw.view()
uniqueCrimes = [...new Set( data_new.map(obj => obj.incident)) ];
crimePlot = {
const panAndZoom = vl.selectInterval().bind("scales")
let data = data_new.filter(item => crimeCategory.includes(item.incident))
let plot = vl.markSquare({size: 20, opacity: 1})
.select(panAndZoom)
.data(data)
// .transform(
// vl.filter('datum.incident in ["Robbery"]')
// )
.encode(
vl.x().fieldQ('longitude').scale({"domain": [-89.6, -89.2]}), // apply the field named 'longitude' to the longitude channel
vl.y().fieldQ('latitude').scale({"domain": [43, 43.2]}), // apply the field named 'latitude' to the latitude channel
vl.color().fieldN('incident').legend({orient: 'bottom', titleOrient: 'left'})
)
.project(vl.projection('albersUsa'))
.width(500)
.height(400)
// .config({view: {stroke: null}})
.render()
return plot
}
html `<h2> HeatMap for crime activity <h2>`
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height * years.length])
.attr("font-family", "sans-serif")
.attr("font-size", 10);
const year = svg.selectAll("g")
.data(years)
.join("g")
.attr("transform", (d, i) => `translate(40.5,${height * i + cellSize * 1.5})`);
year.append("text")
.attr("x", -5)
.attr("y", -5)
.attr("font-weight", "bold")
.attr("text-anchor", "end")
.text(([key]) => key);
}
cellSize = 17
width = 954
height = cellSize * (weekday === "weekday" ? 7 : 9)
weekday = "monday"
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.
