seed, teach, grow
style = html`<style>
/* Edit to change graph's styles */
.line {
stroke: steelblue;
stroke-width: 3;
}
/* Style the dots by assigning a fill and stroke */
.shape {
fill: red;
stroke: black;
}
</style>`
mk_chart = function(data, symbol) {
const [rootdiv, svg, g] = initChart();
g.attr("transform", `translate(${dim.mgs.l}, ${dim.mgs.t})`);
// scales:
// x)
const domX = [0, Object.keys(data).length - 1],
ranX = [0, dim.gW];
const xScale = d3.scaleLinear(domX, ranX);
// y)
const Ymax = d3.max(data, d => d.y);
const domY = d3.extent(data, d => d.y),
ranY = [dim.gH, 0];
const linScale = d3.scaleLinear();
const yScale = linScale.domain(domY).range(ranY);
// Axis :
const abscissa = d3.axisBottom().scale(xScale),
ordinates = d3.axisLeft().scale(yScale);
// Adding axis and datapoint to the drawing zone: g
g.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0, ${dim.gH})`)
.call(abscissa);
g.append("g")
.attr("class", "y axis")
.attr("transform", `translate(0,0)`)
.call(ordinates);
// line generator
const line = d3
.line()
.x(d => xScale(d.x))
.y(d => yScale(d.y));
const ligne = g
.append("path")
.datum(data).attr("class", "line")
.attr("d", line);
// data points (last to be on top)
const shapes = g
.selectAll("p")
.data(data)
.enter()
.append("path").attr("class", "shape")
.attr("transform", d => `translate(${xScale(d.x)}, ${yScale(d.y)})`)
.attr("d", shape_gen);
rootdiv.appendChild(svg.node());
rootdiv.append(style)
return rootdiv;
};
function mk_data(n=5) {
const f = x => x;
let data = [...new Array(n)].map((d, x) => ({
x: x,
y: f(x)
}));
return data
}
shape_gen = (d) => d3.symbol()
.type(shapes[shape_type])();
dim = mk_dim(width, 400, {t: 30, r: 100, b: 25, l: 30})
import {shapes, viewof shape_type} from "@maliky/exploring-d3-shape-symbols"
import {select} 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.
