pacific = ["WA", "OR", "CA", "AK", "HI"]
mountain = ["MT", "ID", "WY", "NV", "UT", "CO", "AZ", "NM"]
west_north_central = ["ND", "SD", "NE", "KS", "MN", "IA", "MO"]
east_north_central = ["WI", "IL", "IN", "MI", "OH"]
mid_atlantic = ["PA", "NY", "NJ"]
new_england = ["VT", "NH", "ME", "MA", "RI", "CT"]
west_South_central = ["TX", "OK", "AR", "LA"]
east_south_central = ["KY", "TN", "MS", "AL"]
south_atlantic = ["WV", "DC", "DE", "MD", "VA", "NC", "SC", "GA", "FL"]
year_2005 = FileAttachment("2005.csv").csv()
year_2006 = FileAttachment("2006.csv").csv()
year_2007 = FileAttachment("2007.csv").csv()
year_2008 = FileAttachment("2008.csv").csv()
year_2009 = FileAttachment("2009.csv").csv()
year_2010 = FileAttachment("2010.csv").csv()
year_2011 = FileAttachment("2011.csv").csv()
all_data_combined
Type Table, then Shift-Enter. Ctrl-space for more options.
function mapStateNames(arr) {
let map = new Map();
arr.forEach((d) => {
map.set(d.key, d.name);
});
return map;
}
state_name_map = mapStateNames(usStates)
color_state_map = mapStateColor()
import { NYTGridMap } from "@severo/examples-of-grid-maps"
import {
countColsRowsFromSparseMatrix,
addSparseMatrix
} from "@severo/helper-functions-for-manipulating-grid-maps"
usStates = d3.csv(
"https://raw.githubusercontent.com/kristw/gridmap-layout-usa/master/src/input/states.csv"
)
import { requiredParam } from "@severo/generic-helper-functions"
import { Legend, Swatches } from "@d3/color-legend"
treeMapGenerator()
color_Scale = d3.scaleOrdinal(d3.schemeSet3)
height = 1100
hierarchy = {
const dataCopy = JSON.parse(JSON.stringify(state_age_suicide_data));
return d3
.hierarchy(dataCopy)
.sum((d) => d.value)
.sort((a, b) => b.value - a.value);
}
treemap = d3
.treemap()
// set the size of the treemap render area
.size([width, height])
// set the padding between every rectangle in px
.padding(2)
// set the padding at the top of each group of rectangles
// so that we can fit the country labels
.paddingTop(10)
// Set the generator to round pixel values to the nearest value
// (makes things look better)
.round(true)
root = treemap(hierarchy)
// fdata = {
// const d = d3.csvParse(
// await FileAttachment("Electricity generation by source-1.csv").text()
// );
// const children = d.map((country) => ({
// name: country.Country,
// children: Object.entries(country)
// .map((c) => {
// if (c[0] == "" || c[0] == "Country" || c[0] == "Year") return;
// else
// return {
// name: c[0],
// value: c[1]
// };
// })
// .filter((d) => d)
// }));
// return {
// children
// };
// }
function mapToTreeFormat(map) {
let arr = [];
for (let [key, val] of map.entries()) {
let obj = {};
obj = {
name: key
};
let child = [];
let obj2 = {};
for (let [k, v] of val.entries()) {
obj2 = {
name: k.split(" ")[0],
value: v
};
child.push(obj2);
}
obj = {
...obj,
children: child
};
arr.push(obj);
}
return arr;
}
sdata = FileAttachment("usa_suicides_2016_onwards.csv").csv()
mapped_data = d3.rollup(
sdata,
(v) =>
d3.mean(
v,
(d) =>
(parseInt(d.Count) * 100000) / parseInt(d.Population.replace(",", ""))
),
(d) => d.Race, // State.replace(/ *\([^)]*\) */g, "")
// (d) => d["Age Groups"]
(d) => d["Method"]
)
mapped_data.delete("")
state_age_suicide_data = ({
children: mapToTreeFormat(mapped_data)
})
function treeMapGenerator() {
const svg = d3
.create("svg")
.style("font-family", "sans-serif")
// .attr("width", 1400)
// .attr("height", 1100);
.attr("viewBox", [-20, -20, width + 20 * 2, 1100 + 20 * 2]);
const g = svg.append("g").attr("class", "treemap-container");
// Place the labels for our countries
g.selectAll("text.country")
// The data is the first "generation" of children
.data(root.children)
.join("text")
.attr("class", "country")
// The rest is just placement/styling
.attr("x", (d) => d.x0)
.attr("y", (d) => d.y0)
.attr("dy", "0.6em")
.attr("dx", 3)
.style("font-size", 12)
// Remember, the data on the original node is available on node.data (d.data here)
.text((d) => d.data.name);
// Now, we place the groups for all of the leaf nodes
const leaf = g
.selectAll("g.leaf")
// root.leaves() returns all of the leaf nodes
.data(root.leaves())
.join("g")
.attr("class", "leaf")
// position each group at the top left corner of the rect
.attr("transform", (d) => `translate(${d.x0},${d.y0})`)
.style("font-size", 10);
// A title element tells the browser to display its text value
// in a popover when the cursor is held over a rect. This is a simple
// way to add some interactivity
leaf
.append("title")
.text(
(d) =>
`${d.parent.data.name}-${d.data.name}\n${
d.value.toLocaleString() + " cases"
}`
);
// Now we append the rects. Nothing crazy here
leaf
.append("rect")
.attr("fill", (d) => color_Scale(d.parent.data.name))
.attr("opacity", 0.7)
// the width is the right edge position - the left edge position
.attr("width", (d) => d.x1 - d.x0)
// same for height, but bottom - top
.attr("height", (d) => d.y1 - d.y0)
// make corners rounded
.attr("rx", 3)
.attr("ry", 3);
// This next section checks the width and height of each rectangle
// If it's big enough, it places labels. If not, it doesn't.
leaf.each((d, i, arr) => {
// The current leaf element
const current = arr[i];
const left = d.x0,
right = d.x1,
// calculate its width from the data
width = right - left,
top = d.y0,
bottom = d.y1,
// calculate its height from the data
height = d.y1 - d.y0;
// too small to show text
const tooSmall = width < 34 || height < 25;
// and append the text (you saw something similar with the pie chart (day 6)
const text = d3
.select(current)
.append("text")
// If it's too small, don't show the text
.attr("opacity", tooSmall ? 0 : 0.9)
.selectAll("tspan")
.data((d) => [d.data.name, d.value.toLocaleString()])
.join("tspan")
.attr("x", 3)
.attr("y", (d, i) => (i ? "2.5em" : "1.15em"))
.text((d) => d);
});
return svg.node();
}
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.
