Public
Edited
Aug 12, 2023
data = FileAttachment("flare.json").json()
data.children
chart = {
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 1154;
const svg_height = 1154;
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();
}
chart2 = {
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 1154;
const svg_height = 1154;
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 tile = d3.treemapBinary;
const tile = d3.treemapSquarify;
const root = d3.treemap()
.tile(tile)
.size([width, height])
(d3.hierarchy(data)
.sum(d => d.value));
const leaf = chart.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0}, ${d.y0})`);
leaf.append("rect")
.attr("fill", "steelblue")
.attr("fill-opacity", 0.6)
.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 = 1154;
const svg_height = 1154;
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 tile = d3.treemapBinary;
const tile = d3.treemapSquarify;
const color = d3.scaleOrdinal(data.children.map(d => d.name), d3.schemeTableau10);
const root = d3.treemap()
.tile(tile)
.size([width, height])
(d3.hierarchy(data)
.sum(d => d.value));
const leaf = chart.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0}, ${d.y0})`);
leaf.append("rect")
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
return svg.node();
}
chart4 = {
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 1154;
const svg_height = 1154;
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 tile = d3.treemapBinary;
const tile = d3.treemapSquarify;
const color = d3.scaleOrdinal(data.children.map(d => d.name), d3.schemeTableau10);
const root = d3.treemap()
.tile(tile)
.size([width, height])
.padding(1)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value));
const leaf = chart.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0}, ${d.y0})`);
leaf.append("rect")
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
return svg.node();
}
import {Swatches} from "@d3/color-legend"
key5 = Swatches(chart5.scales.color)
chart5 = {
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 1154;
const svg_height = 1154;
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 tile = d3.treemapBinary;
const tile = d3.treemapSquarify;
const color = d3.scaleOrdinal(data.children.map(d => d.name), d3.schemeTableau10);
const root = d3.treemap()
.tile(tile)
.size([width, height])
.padding(1)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value));
const leaf = chart.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0}, ${d.y0})`);
leaf.append("rect")
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
return Object.assign(svg.node(), {scales: {color}});
}
chart6 = {
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 1154;
const svg_height = 1154;
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 tile = d3.treemapBinary;
const tile = d3.treemapSquarify;
const color = d3.scaleOrdinal(data.children.map(d => d.name), d3.schemeTableau10);
const root = d3.treemap()
.tile(tile)
.size([width, height])
.padding(1)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value));
const leaf = chart.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0}, ${d.y0})`);
leaf.append("rect")
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
leaf.append("text")
.selectAll("tspan")
.data(d => d.data.name)
.join("tspan")
.attr("y", "1.1em")
.text(d => d);
return Object.assign(svg.node(), {scales: {color}});
}
// https://regex101.com/
// https://www.regular-expressions.info/lookaround.html
data.children[0].children[0].children[0].name.split(/(?=[A-Z][a-z])|\s+/g)
"Aasda Basdas".split(/(?=[A-Z][a-z])|\s+/g)
"aasda B".split(/(?=[A-Z][a-z])|\s+/g)
chart7 = {
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 1154;
const svg_height = 1154;
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 tile = d3.treemapBinary;
const tile = d3.treemapSquarify;
const color = d3.scaleOrdinal(data.children.map(d => d.name), d3.schemeTableau10);
const root = d3.treemap()
.tile(tile)
.size([width, height])
.padding(1)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value));
const leaf = chart.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0}, ${d.y0})`);
leaf.append("rect")
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
leaf.append("text")
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g))
.join("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${1.1 + 0.9 * i}em`)
.text(d => d);
return Object.assign(svg.node(), {scales: {color}});
}
chart8 = {
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 1154;
const svg_height = 1154;
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 tile = d3.treemapBinary;
const tile = d3.treemapSquarify;
const color = d3.scaleOrdinal(data.children.map(d => d.name), d3.schemeTableau10);
const root = d3.treemap()
.tile(tile)
.size([width, height])
.padding(1)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value));
const leaf = chart.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0}, ${d.y0})`);
leaf.append("rect")
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
const format = d3.format(",d");
leaf.append("text")
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value)))
.join("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length-1) * 0.3 + 1.1 + 0.9 * i}em`)
.attr("fill-opacity", (d, i, nodes) => (i === nodes.length-1) ? 0.7 : null)
.text(d => d);
return Object.assign(svg.node(), {scales: {color}});
}
chart9 = {
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 1154;
const svg_height = 1154;
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 tile = d3.treemapBinary;
const tile = d3.treemapSquarify;
const color = d3.scaleOrdinal(data.children.map(d => d.name), d3.schemeTableau10);
const root = d3.treemap()
.tile(tile)
.size([width, height])
.padding(1)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value));
const leaf = chart.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0}, ${d.y0})`);
leaf.append("rect")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id) // Add id for clipPath
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
const format = d3.format(",d");
// Add clipPath
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
leaf.append("text")
.attr("clip-path", d => d.clipUid) // Add clip path as clip uid
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value)))
.join("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length-1) * 0.3 + 1.1 + 0.9 * i}em`)
.attr("fill-opacity", (d, i, nodes) => (i === nodes.length-1) ? 0.7 : null)
.text(d => d);
return Object.assign(svg.node(), {scales: {color}});
}
chart10 = {
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 1154;
const svg_height = 1154;
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 tile = d3.treemapBinary;
const tile = d3.treemapSquarify;
const color = d3.scaleOrdinal(data.children.map(d => d.name), d3.schemeTableau10);
const root = d3.treemap()
.tile(tile)
.size([width, height])
.padding(1)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value));
const leaf = chart.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0}, ${d.y0})`);
leaf.append("rect")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
const format = d3.format(",d");
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
leaf.append("text")
.attr("clip-path", d => d.clipUid)
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value)))
.join("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length-1) * 0.3 + 1.1 + 0.9 * i}em`)
.attr("fill-opacity", (d, i, nodes) => (i === nodes.length-1) ? 0.7 : null)
.text(d => d);
// Add the tooltip
leaf.append("title")
.text(d => `${d.ancestors().reverse().map(d => d.data.name).join(".")}\n${format(d.value)}`)
return Object.assign(svg.node(), {scales: {color}});
}
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.
