seed, teach, grow
mk_chart = function(data) {
const [rootdiv, svg, g] = initChart();
g.attr("transform", `translate(${dim.mgs.l}, ${dim.mgs.t})`);
// scales:
// x)
const domX = [0, Object.keys(data).length],
ranX = [0, dim.gW];
const xScale = d3.scaleLinear(domX, ranX);
// y)
const yScale = selected_scale;
// 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+ dim.mgs.b - 20})`)
.call(abscissa);
g.append("g")
.attr("class", "y axis")
.attr("transform", `translate(0,0)`)
.call(ordinates);
// line generator
const line_gen = d3
.line()
.x(d => xScale(d.x))
.y(d => yScale(d.y));
const line = g
.append("path")
.datum(data).attr("class", "line")
.attr("d", line_gen);
// 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);
const title = html`<h3>${scale_select} chart</h3>`
rootdiv.append(title)
rootdiv.appendChild(svg.node());
rootdiv.append(style)
return rootdiv;
};
function mk_data(n=50) {
const f = x => x ;
// to work with log, y data should be striclty > 0 or < 0
let data = [...new Array(n)].map((d, i) => ({
x: i + 1,
y: f(i + 1)
}));
return data
}
shape_gen = (d) => d3.symbol()
.type(shapes[shape_type])();
mk_yscales = (data) => {
// domain for logScale should exclude 0
let domY = d3.extent(data, d => d.y),
ranY = [dim.gH, 0],
e = Math.exp(1);
return {
'linear': d3.scaleLinear().domain(domY).range(ranY),
'log10': d3.scaleLog().domain(domY).range(ranY),
'log2': d3.scaleLog().base(2).domain(domY).range(ranY),
'ln': d3.scaleLog().base(e).domain(domY).range(ranY),
}
}
dim = mk_dim(width, 400, {t: 30, r: 100, b: 80, l: 100})
import {shapes, viewof shape_type} from "@maliky/exploring-d3-shape-symbols"
import {select, slider} 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.
