viewof color = Inputs.select(["red", "orange", "yellow", "green", "blue", "violet"], {value: "green"})
color
<span style="color: ${color}">hello!</span>
clearance_data.view()
states = [
// Let's first create a space holder called "all states"
"all states",
... new Set(clearance_data
// There are a few cases where the state column is empty. Let's drop those
.filter(d => d.state !== "")
//.objects() turns an Arquero table into an array of objects, each item representing one row
.objects()
.map(d => d.state))
]
viewof selectedStatePractice = Inputs.select(states,
{
// We'll make the state names show up in title case
format: x => toTitleCase(x),
// And default to select Tennessee, in the spirit of NICAR 2023
value: "tennessee"
})
selectedStatePractice
filteredDataPractice = clearance_data
// First, we need to parse in outside parameters into Arquero using .params({})
// https://uwdata.github.io/arquero/api/table#params
.params({selectedStatePractice: selectedStatePractice})
// If we are selecting all states, basically don't do any filtering. Otherwise wilter by state.
.filter(d => selectedStatePractice === "all states" ? d.state !== "placeholder" : d.state === selectedStatePractice)
filteredDataPractice.view()
Plot.plot({
grid: true,
marks: [
Plot.dot(search,
{x: "new_murder",
y: "cleared_murder",
title: (d) =>
`${d.agency_name} \n year : ${d.year} \n new murder: ${d.new_murder}` // \n makes a new line
})
]
})
// Let's use Inputs.range to create a slider for year
// https://observablehq.com/@observablehq/input-range
viewof selectedYearPractice = Inputs.range([1970, 2020], {step: 1, label: "data year", value: 2020})
// We'll also use Inputs.checkbox to create a toggle of types of crimes
viewof selectedCrimesPractice = Inputs.checkbox(["murder", "manslaughter", "rape", "robbery", "assault", "burglary", "theft", "motor_vehicle_theft", "arson", "violent_crime", "property_crime"], {label: "Type of crimes", value: ["murder", "violent_crime"]})
// Using the crimes we selected, we'll create a list of columns that we'll display
selectArraysPractice = [
[
"agency_name",
"state",
"year",
],
selectedCrimesPractice.map(d => "new_"+d),
selectedCrimesPractice.map(d => "cleared_"+d),
selectedCrimesPractice.map(d => "clearance_rate_"+d)
].flat(1)
// And use Inputs.search to search the dataset that we filtered by state and year
// https://observablehq.com/@observablehq/input-search
viewof searchPractice = Inputs.search(filteredDataPractice
.orderby(aq.desc("new_total_crime"))
.params({selectedYearPractice: selectedYearPractice, selectArraysPractice:selectArraysPractice})
.filter(d => op.parse_int(d.year) === selectedYearPractice)
.select(selectArraysPractice)
)
filteredData2Practice = clearance_data
// First, we need to parse in outside parameters into Arquero using .params({})
// https://uwdata.github.io/arquero/api/table#params
.params({selectedStatePractice: selectedStatePractice})
// If we are selecting all states, basically don't do any filtering. Otherwise wilter by state.
.filter(d => selectedStatePractice === "all states" ? d.state !== "placeholder" : d.state === selectedStatePractice)
Inputs.table(searchPractice, {layout: "auto"})
clearance_data_raw2 = FileAttachment("test.csv").csv()
clearance_data = aq.from(clearance_data_raw)
import { aq, op } from "@uwdata/arquero"
import {Plot} from "@mkfreeman/plot-tooltip"
function toTitleCase(str) {
return str.toLowerCase().split(' ').map(function (word) {
return (word.charAt(0).toUpperCase() + word.slice(1));
}).join(' ');
}
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.
