data_compare = [d3.csvParse(await files[Year1-2015].text(), ({State: name, "rate" : value}) => ({name, value})), d3.csvParse(await files[Year1-2015].text(), ({State: name, "murder" : value}) => ({name, value})), d3.csvParse(await files[Year1-2015].text(), ({State: name, "Robbery" : value}) => ({name, value})), d3.csvParse(await files[Year1-2015].text(), ({State: name, "Aggravated_assault" : value}) => ({name, value})), d3.csvParse(await files[Year1-2015].text(), ({State: name, "Property_crime" : value}) => ({name, value})), d3.csvParse(await files[Year1-2015].text(), ({State: name, "Burglary" : value}) => ({name, value})), d3.csvParse(await files[Year1-2015].text(), ({State: name, "rape" : value}) => ({name, value})), d3.csvParse(await files[Year1-2015].text(), ({State: name, "theft" : value}) => ({name, value}))][Crimes_list.indexOf(Crimes)]
data_year2 = [d3.csvParse(await files[Year2-2015].text(), ({State: name, "rate" : value}) => ({name, value})), d3.csvParse(await files[Year2-2015].text(), ({State: name, "murder" : value}) => ({name, value})), d3.csvParse(await files[Year2-2015].text(), ({State: name, "Robbery" : value}) => ({name, value})), d3.csvParse(await files[Year2-2015].text(), ({State: name, "Aggravated_assault" : value}) => ({name, value})), d3.csvParse(await files[Year2-2015].text(), ({State: name, "Property_crime" : value}) => ({name, value})), d3.csvParse(await files[Year2-2015].text(), ({State: name, "Burglary" : value}) => ({name, value})), d3.csvParse(await files[Year2-2015].text(), ({State: name, "rape" : value}) => ({name, value})), d3.csvParse(await files[Year2-2015].text(), ({State: name, "theft" : value}) => ({name, value}))][Crimes_list.indexOf(Crimes)]
a = Object.keys(data_year2)
{
if (metric === "absolute"){
for (let i=0; i<(a.length-1);i++){
data_compare[a[i]]["name"] = data_year2[a[i]]["name"],
data_compare[a[i]]["value"] = data_year2[a[i]]["value"] - data_year1[a[i]]["value"],
console.log(data_compare[a[i]]["value"],data_compare[a[i]]["name"])
}
}
else {
for (let i=0; i<a.length;i++){
data_compare[a[i]]["name"] = data_year2[a[i]]["name"],
data_compare[a[i]]["value"] = (data_year2[a[i]]["value"] - data_year1[a[i]]["value"])/data_year1[a[i]]["value"],
console.log(data_compare[a[i]])
}
//console.log(data_compare[a[i]])
}}
data = data_compare
x = d3.scaleLinear();
Crimes
{
if (metric === "absolute"){
x.domain(d3.extent(data, d => d.value))
.rangeRound([margin.left, width - margin.right])
}
else {
var maximum= Math.max(...data.map(d => d.value)) + 0.3;
var minimum = Math.min(...data.map(d => d.value)) - 0.3;
x.domain([minimum, maximum])
//.domain(d3.extent(data, d => d.value))
.rangeRound([margin.left, width - margin.right])
}
}
y = d3.scaleBand()
.domain(d3.range(data.length))
.rangeRound([margin.top, height - margin.bottom])
.padding(0.1)
xAxis = g => g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x).ticks(width / 80).tickFormat(tickFormat))
.call(g => g.select(".domain").remove())
yAxis = g => g
.attr("transform", `translate(${x(0)},0)`)
.call(d3.axisLeft(y).tickFormat(i => data[i].name).tickSize(0).tickPadding(6))
.call(g => g.selectAll(".tick text").filter(i => data[i].value < 0)
.attr("text-anchor", "start")
.attr("x", 6))
format = d3.format(metric === "absolute" ? "+,d" : "+,.0%")
tickFormat = metric === "absolute" ? d3.formatPrefix("+.1", 1e0) : format
barHeight = 25
height = Math.ceil((data.length + 0.1) * barHeight) + margin.top + margin.bottom
margin = ({top: 30, right: 60, bottom: 10, left: 60})
Crimes_list = ["rate","murder", "Robbery", "Aggravated_assault", "Property_crime", "Burglary", "rape", "theft"]
files = [FileAttachment("crimes_cleaned_2015-1.csv"),
FileAttachment("crimes_cleaned_2016-1.csv"),
FileAttachment("crimes_cleaned_2017-1.csv"),
FileAttachment("crimes_cleaned_2018-1.csv"),
FileAttachment("2019.csv")];
d3 = require("d3@6")
import {select} from "@mesto00/requirements"
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.
