Published
Edited
Oct 9, 2019
data_nested = d3.nest()
.key( d => d.department )
.key( d => d.classification )
.entries(data);
grouped = d3.group(data, d => d.department, d => d.classification)
// data_2 = d3.hierarchy(data_nested);
// https://medium.com/nightingale/making-hierarchy-layouts-with-d3-hierarchy-fdb36d0a9c56
data_2 = d3.hierarchy(data_nested, d => d.data);
//data_2 = d3.hierarchy(data_nested, d=> d.value);
// data_3 = d3.stratify(data_nested)
// .id(d => d.name)
// .parentId(d => d.parent)
array_ver = Array.from(
grouped,
([key, value]) => ({ key, value: value })
)
// make a reduce function; we don't actually want a reduce function here, just set the value to 1 lol
reduceFn = x => d3.sum(x, d => 1);
groupingFns = [d => d.department, d => d.classification];
rollupData = d3.rollup(array_ver, d => d.length, d => d.department)
// Another chart demo
chart_4 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "14px sans-serif");
// Load in the root of the data...
var root = data_2;
// create a d3 layout with params
var treemapLayout = d3.treemap()
.size([width, height])
.paddingOuter(50);
// run sum to get the value count based on descendants
// root.sum(d => d.values);
//root.sum(function(d) { return d.value ? 1 : 0; });
// return root;
// do some idiosyncratic imperative function
// to mutate the root... :/
treemapLayout(root);
var root_shifted = root.descendants();
// return root_shifted;
svg.selectAll('g rect')
.data(root_shifted)
.enter()
.append('rect')
.attr('x', d => d.x0)
.attr('y', d => d.y0)
.attr('width', d => d.x1 - d.x0)
.attr('height', d => d.y1 - d.y0)
.attr('fill', 'pink')
.style("stroke", "#000")
.attr('opacity', '0.35')
svg.selectAll('g rect')
.data(root_shifted)
.enter()
.append('text')
.text(d => d.data.country)
.attr('dx', d => d.x0)
.attr('dy', d => d.y0)
var nodes = svg.selectAll('g rect')
.selectAll('g')
.data(root.descendants())
.enter()
.append('g')
.attr('transform', d => 'translate(' + [d.x0, d.y0] + ')');
nodes
.append('rect')
.attr('width', function(d) { return d.x1 - d.x0; })
.attr('height', function(d) { return d.y1 - d.y0; });
nodes
.append('text')
.attr('dx', 4)
.attr('dy', 14)
.text(d => d.data.department);
svg.append('text').text('Treemap of Met data by Department')
.attr('x', 20)
.attr('y',40)
.style('font-weight', '600')
.style('font-size', '2rem')
return svg.node();
}
// https://www.d3indepth.com/layouts/
height = 800;
width = 975
format = d3.format(",d")
color = d3.scaleOrdinal(d3.schemeCategory10)
d3 = require("d3@5", "d3-array")
data_2
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.
