viewof treemap_json = textarea({
value: `{"name":"Tables","children":[{"name":"information_schema","children":[{"name":"sql_features","value":"106496"},{"name":"sql_implementation_info","value":"49152"},{"name":"sql_packages","value":"49152"},{"name":"sql_parts","value":"49152"},{"name":"sql_sizing","value":"49152"},{"name":"sql_languages","value":"49152"},{"name":"sql_sizing_profiles","value":"8192"}]},{"name":"public","children":[{"name":"feedstats_subscribercount","value":"35168256"},{"name":"blog_entry","value":"18833408"},{"name":"blog_blogmark","value":"8044544"},{"name":"blog_quotation","value":"4079616"},{"name":"blog_blogmark_tags","value":"2293760"},{"name":"blog_entry_tags","value":"827392"},{"name":"blog_tag","value":"737280"},{"name":"redirects_redirect","value":"688128"},{"name":"django_admin_log","value":"679936"},{"name":"blog_quotation_tags","value":"393216"},{"name":"django_session","value":"303104"},{"name":"django_sql_dashboard_dashboard","value":"114688"},{"name":"auth_user","value":"98304"},{"name":"auth_permission","value":"90112"},{"name":"django_content_type","value":"73728"},{"name":"django_migrations","value":"65536"},{"name":"django_sql_dashboard_dashboardquery","value":"49152"},{"name":"blog_comment","value":"40960"},{"name":"auth_group_permissions","value":"32768"},{"name":"auth_user_user_permissions","value":"32768"},{"name":"blog_photoset_photos","value":"32768"},{"name":"auth_user_groups","value":"32768"},{"name":"auth_group","value":"24576"},{"name":"blog_photoset","value":"24576"},{"name":"blog_photo","value":"8192"}]}]}`
})
treemap_json
chart = {
const root = treemap(data);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "10px sans-serif");
const leaf = svg.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0},${d.y0})`);
leaf.append("title")
.text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.value)}`);
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);
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 + i * 0.9}em`)
.attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
.text(d => d);
return svg.node();
}
data = JSON.parse(treemap_json)
treemap = data => d3.treemap()
.tile(tile)
.size([width, height])
.padding(1)
.round(true)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value))
width = 954
height = 954
format = d3.format(",d")
color = d3.scaleOrdinal(d3.schemeCategory10)
d3 = require("d3@6")
import { textarea } from "@jashkenas/inputs"
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.
