seed, teach, grow
mk_chart()
mk_chart = function() {
const [rootdiv, svg, g] = initChart();
svg.attr("viewBox", [dim.mid.nW, dim.mid.nH, dim.W, dim.H]);
g.attr('tranform', `translate(${dim.mgs.g}, ${dim.mgs.s})`)
.attr("class", "shape")
.append("path")
.attr("d", shape_gen);
const line = d3.line()
.x((d) => rect_border.x(d[0]))
.y((d) => rect_border.y(d[1]))
.curve(d3.curveLinearClosed);
// could use .append('rec'), but more freedome like this
g.append('path')
.datum(rect_border.data)
.attr("class", "shape-border")
.attr('d', line);
rootdiv.appendChild(svg.node());
rootdiv.append(style)
return rootdiv;
}
style = html`<style>
/* Edit to change graph's styles */
.shape {
fill: pink;
stroke-width: 1;
stroke: black;
}
.shape-border{
fill: none;
stroke-width: 2;
stroke: black;
}
</style>`
rect_border = ({data: [[0,0], [1,0], [1, 1], [0,1]],
x : d3.scaleLinear().range([dim.mid.ngW, dim.mid.gW]),
y : d3.scaleLinear().range([dim.mid.ngH, dim.mid.gH])})
dim = mk_dim(width, 400, {t: 30, r: 100, b: 25, l: 30})
viewof size = slider({
min: 0,
max: 1,
step: 0.01,
format: ".0%",
description: "Size (% of the black rectangle's area)"
})
viewof shape_type = select({
title: "Shape type",
description: "Select a type",
options: Object.keys(shapes),
value: Object.keys(shapes)[0]
})
import {initChart} from "@maliky/chart-base-template"
import {mk_dim} from "@maliky/dims"
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.
