|
<!DOCTYPE html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min.js"></script> |
|
<script src="//curran.github.io/dsv-dataset/dsv-dataset-v0.2.1.js"></script> |
|
</head> |
|
|
|
<body> |
|
<script> |
|
|
|
function render(data){ |
|
|
|
// This computes totals for each offense. |
|
// Could be a bar chart. |
|
var offenses = d3.nest() |
|
.key(function (d){ return d["Offense charged"];}) |
|
.rollup(function(leaves) { |
|
return d3.sum(leaves, function(d) { return d.count; }); |
|
}) |
|
.entries(data); |
|
d3.select("body") |
|
.append("pre") |
|
.text(JSON.stringify(offenses)); |
|
|
|
// This computes totals for each race. |
|
// Could be a bar chart. |
|
var offenses = d3.nest() |
|
.key(function (d){ return d["Race"];}) |
|
.rollup(function(leaves) { |
|
return d3.sum(leaves, function(d) { return d.count; }); |
|
}) |
|
.entries(data); |
|
d3.select("body") |
|
.append("pre") |
|
.text(JSON.stringify(offenses)); |
|
|
|
// This shows the full data. |
|
// Could be a stacked or grouped bar chart. |
|
d3.select("body") |
|
.append("pre") |
|
.text(JSON.stringify(data, null, 2)); |
|
} |
|
|
|
d3.csv("data.csv", function(data){ |
|
d3.json("data.json", function(metadata){ |
|
|
|
var dataset = dsvDataset.parse({ |
|
data: data, |
|
metadata: metadata |
|
}); |
|
|
|
// Transform the table so "Race" is a single column. |
|
data = normalize(dataset.data, "Race", "count", [ |
|
"White", |
|
"Black or African American", |
|
"American Indian or Alaska Native", |
|
"Asian", |
|
"Native Hawaiian or Other Pacific Islander" |
|
]); |
|
|
|
// Remove the "TOTAL" values. |
|
data = data.filter(function (d){ |
|
return d["Offense charged"] !== "TOTAL"; |
|
}); |
|
|
|
data.forEach(function (d){ |
|
delete d["Total"]; |
|
}); |
|
|
|
render(data); |
|
}); |
|
}); |
|
|
|
function normalize(dataIn, dimension, measure, values){ |
|
|
|
var data = []; |
|
|
|
// All the columns not in "values". |
|
var columns = Object.keys(dataIn[0]).filter(function (column){ |
|
return !values.some(function (value){ |
|
return column === value; |
|
}); |
|
}); |
|
|
|
dataIn.forEach(function (d){ |
|
values.forEach(function (value){ |
|
var row = {}; |
|
|
|
// Pivot the given value columns into rows. |
|
row[dimension] = value; |
|
row[measure] = d[value]; |
|
|
|
// Copy over values from other columns. |
|
columns.forEach(function (column){ |
|
row[column] = d[column]; |
|
}); |
|
|
|
data.push(row); |
|
}); |
|
}); |
|
|
|
return data; |
|
} |
|
|
|
</script> |
|
</body> |
despite...