Public
Edited
Sep 16, 2023
data = FileAttachment("flare.json").json()
chart = {
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 928;
const svg_height = 1060;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
return svg.node();
}
// https://observablehq.com/@d3/sequential-scales
function ramp(color, numscale, n = 512) {
const canvas = DOM.canvas(n, 1);
const context = canvas.getContext("2d"),
w = width + 28;
canvas.style.margin = "0 -14px";
canvas.style.width = `${w}px`;
canvas.style.height = "40px";
canvas.style.imageRendering = "pixelated";
// companion numerical scale, to define the axis.
if (numscale === undefined) numscale = d3.scaleLinear();
if (color.domain) numscale.domain(color.domain());
numscale.range([0, n]);
const t = color.ticks ? color.ticks(n) : d3.range(n).map(i => i / (n - 1));
for (let i = 0; i < t.length; ++i) {
context.fillStyle = color(t[i]);
context.fillRect((i * n) / t.length, 0, 100, 1);
}
d3.select(canvas).on("mousemove click", function(event) {
const t = numscale.invert((d3.pointer(event)[0] / w) * n);
canvas.value = t;
canvas.dispatchEvent(new CustomEvent("input"));
});
canvas.value = 0;
return canvas;
}
myColor = d3.scaleSequential(d3.interpolateMagma)
viewof t0 = ramp(myColor)
myColor2 = d3.scaleSequential([8, 0], d3.interpolateMagma)
viewof t1 = ramp(myColor2)
chart2 = {
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 928;
const svg_height = 1060;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const treemap = data => d3.treemap()
.size([width, height])
.paddingOuter(3) // Differentiate parent and its children
.paddingTop(19) // Put parent title
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value));
const root = treemap(data);
const node = chart.selectAll("g")
.data(d3.group(root, d => d.height))
.join("g")
.selectAll("g")
.data(d => d[1])
.join("g")
.attr("transform", d => `translate(${d.x0}, ${d.y0})`);
const color = d3.scaleSequential([8, 0], d3.interpolateMagma); // Why height starts from 8 here?
node.append("rect")
.attr("id", d => (d.nodeUid = DOM.uid("node")).id)
.attr("fill", d => color(d.height))
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
return svg.node();
}
chart3 = {
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 928;
const svg_height = 1060;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const treemap = data => d3.treemap()
.size([width, height])
.paddingOuter(3)
.paddingTop(19)
// .paddingInner(1)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value));
const root = treemap(data);
const node = chart.selectAll("g")
.data(d3.group(root, d => d.height))
.join("g")
.selectAll("g")
.data(d => d[1])
.join("g")
.attr("transform", d => `translate(${d.x0}, ${d.y0})`);
const color = d3.scaleSequential([8, 0], d3.interpolateMagma);
node.append("rect")
.attr("id", d => (d.nodeUid = DOM.uid("node")).id)
.attr("fill", d => color(d.height))
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
const format = d3.format(",d");
node.append("text")
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g).concat(format(d.value)))
.join("tspan")
.attr("fill-opacity", (d, i, nodes) => i === nodes.length-1 ? 0.7 : null)
.text(d => d);
// Adjust position for those having children
node.filter(d => d.children).selectAll("tspan")
.attr("dx", 3)
.attr("y", 13);
// Adjust position for those are leafs
node.filter(d => !d.children).selectAll("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length-1) * 0.3 + 0.9 * i + 1.1}em`);
return svg.node();
}
chart4 = {
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 928;
const svg_height = 1060;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const treemap = data => d3.treemap()
.size([width, height])
.paddingOuter(3)
.paddingTop(19)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value));
const root = treemap(data);
const node = chart.selectAll("g")
.data(d3.group(root, d => d.height))
.join("g")
.selectAll("g")
.data(d => d[1])
.join("g")
.attr("transform", d => `translate(${d.x0}, ${d.y0})`);
const color = d3.scaleSequential([8, 0], d3.interpolateMagma);
node.append("rect")
.attr("id", d => (d.nodeUid = DOM.uid("node")).id)
.attr("fill", d => color(d.height))
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
const format = d3.format(",d");
// Append clippath
node.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.nodeUid.href);
node.append("text")
.attr("clip-path", d => d.clipUid) // Add clippath
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g).concat(format(d.value)))
.join("tspan")
.attr("fill-opacity", (d, i, nodes) => i === nodes.length-1 ? 0.7 : null)
.text(d => d);
node.filter(d => d.children).selectAll("tspan")
.attr("dx", 3)
.attr("y", 13);
node.filter(d => !d.children).selectAll("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length-1) * 0.3 + 0.9 * i + 1.1}em`);
return svg.node();
}
chart5 = {
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 928;
const svg_height = 1060;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const treemap = data => d3.treemap()
.size([width, height])
.paddingOuter(3)
.paddingTop(19)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value));
const root = treemap(data);
const node = chart.selectAll("g")
.data(d3.group(root, d => d.height))
.join("g")
.selectAll("g")
.data(d => d[1])
.join("g")
.attr("transform", d => `translate(${d.x0}, ${d.y0})`);
const color = d3.scaleSequential([8, 0], d3.interpolateMagma);
node.append("rect")
.attr("id", d => (d.nodeUid = DOM.uid("node")).id)
.attr("fill", d => color(d.height))
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
const format = d3.format(",d");
// Append clippath
node.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.nodeUid.href);
node.append("text")
.attr("clip-path", d => d.clipUid) // Add clippath
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g).concat(format(d.value)))
.join("tspan")
.attr("fill-opacity", (d, i, nodes) => i === nodes.length-1 ? 0.7 : null)
.text(d => d);
node.filter(d => d.children).selectAll("tspan")
.attr("dx", 3)
.attr("y", 13);
node.filter(d => !d.children).selectAll("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length-1) * 0.3 + 0.9 * i + 1.1}em`);
node.append("title")
.text(d => `${d.ancestors().reverse().map(d => d.data.name).join(".")}\n${format(d.value)}`)
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.
