AI Researcher in Medicine.
All opinions are my own.
Public
Edited
Jul 17, 2022
2 stars
viewof flexDisplay = {
const parent = d3.create("div")
.attr("class", "container")
.style("background-color", "#cacaca")
.style("padding", "10px")
.style("margin", "0px")
.style("display", "flex")
.style("flex-direction", "row") // selecting the main-axis: row, row-reverse, column, column-reverse
.style("justify-content", "center") // wrt the main-axis: flex-start, flex-end, center, space-between, space-around, space-evenly
.style("align-items", "center") // wrt the cross-axis: flex-start, flex-end, center, stretch, baseline
.style("flex-wrap", "nowrap"); // nowrap, wrap, wrap-reverse
parent.selectAll("div")
.data(d3.range(1,6))
.join("div")
.attr("class", (d,_) => `item-${d}`)
.text((d,_) => `${d}`)
.style("background-color", "#ff0037")
.style("color", "#fff")
.style("font-size", "35px")
.style("padding", "20px")
.style("margin", "10px") // space between the items
.style("flex", "1"); // occupy all the space available in the container
parent.select(".item-3")
.style("height", "150px");
parent.select(".item-4")
.style("font-size", "70px")
.style("align-self", "flex-end"); // only align this item
// re-ordering the items
parent.select(".item-1").style("order", "1");
parent.select(".item-2").style("order", "0");
parent.select(".item-3").style("order", "3");
parent.select(".item-4")
.style("order", "2")
.style("flex-grow", "2"); // twice as large as other items
parent.select(".item-5").style("order", "4");
return parent.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.
