ClipPathUS Map - State Grid - Metro transitions on canvasAdjust Curve in parallel Sankey linksSvg Path Shape Smoothing TechniqueDefining class methods outside bodyD3 Pie Chart Update - v4-v7Network Chart, Multiple Links, with shader arrowsd3.js zoom & minimap (forked)Dividing half circle to equal partsInputs in gridSvg Drop Shadows PlaygroundD3 Lasso selectionJsFiddle - embed notebookstroke-dasharray animationsPulse
Extract empty hierarchy from flat data
flatData = [
{ country: 'USA', state: 'Texas', name: 'Austin' },
{ country: 'USA', state: 'California', name: 'Los Angeles' },
{ country: 'Georgia', state: 'Imereti', name: 'Kutaisi' },
{ country: 'Georgia', state: 'Imereti', name: 'Kutais New' },
{ country: 'Georgia', state: '', name: 'Tbilisi' },
{ country: 'Georgia', state: '', name: 'Tbilisi Old' },
{ country: '', state: '', name: 'International' }
]
d3 = require('d3@v6')
map = d3.group(flatData,
d=> d.country,
d=> d.state
)
mutable item = []
function transformFlatHierarchy({ map, rootTitle, rootType, columns }) {
let obj = {
name: rootTitle || 'root',
type: rootType || 'root',
_type: 'level'
};
let depth = 0;
function process(item, key, map, parent, depth) {
if (!parent.children) parent.children = [];
if (key === '' && !(item instanceof Map)) {
debugger;
parent.children = parent.children.concat(item);
return;
} else if (key == '' && item instanceof Map) {
debugger;
item.forEach((d, k, m) => process(d, k, m, parent, depth + 1));
return;
}
const child = {
name: key,
_type: 'level',
type: columns && columns[depth]
};
parent.children.push(child);
if (item instanceof Map) {
item.forEach((item, key, map) =>
process(item, key, map, child, depth + 1)
);
} else {
child.children = item;
}
}
map.forEach((item, key, map) => process(item, key, map, obj, depth));
return obj;
}
map
result = transformFlatHierarchy({ map, columns: Object.keys(flatData[0]) })
import { chart as chartCorrect } with {
result as data
} from "@d3/radial-dendrogram"
chartCorrect
import { chart as chartIncorrect } with {
dataIncorrect as data
} from "@d3/radial-dendrogram"
dataIncorrect = {
const h = d3.hierarchy(map);
h.each(d => (d.name = d.data[0] || d.data.name));
h.name = 'root';
return h;
}
chartIncorrect
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.
