Published
Edited
Jul 1, 2021
md`# Teste`
viewof height = html`<input type = "range" min = "180" max = "900">`
viewof attribs = multiAutoSelect(Object.keys(data[0]))
viewof typeoftree = select(["treemap","treemapcascaded","zoomtreemap"])
chart = typeoftree === "treemap"? treemap : typeoftree === "treemapcascaded"? treemapcascaded : zoomtreemap;
treedata = table2Tree(data, attribs)
html`<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">`
url = "https://testenbanodejs.herokuapp.com/person/"
data = fetch(url).then(res => res.json())
import { chart as treemap } with {treedata as data, height, attribs, color } from "@d3/treemap"
import { chart as treemapcascaded } with {treedata as data, height, attribs, color} from "@d3/cascaded-treemap"
import {chart as zoomtreemap } with {treedata as data, height, attribs, color} from "@mfgomezb/zoomable-treemap"
import { table2Tree } from "@john-guerra/table-2-tree"
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
import {multiAutoSelect} from "@john-guerra/multi-auto-select"
import { select } from "@jashkenas/inputs"
color = function color (d){
var colors = {
"Male": "Red",
"Female": "Blue",
};
return colors[d];
}
d3 = require("d3@6")
minAge = d3.min(data, d => d.age)
maxAge = d3.max(data, d => d.age)
hierarchy = d3.hierarchy(treedata)
.sum(d => treedata.value)
.sort((a, b) => b.value - a.value)
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.
