Visual Analytics / Computer Science.
Published
Edited
Jul 4, 2022
D3.JS rocket-start template
function drawSomething() {
let width;
let height;
let margins = { l: 30, r: 10, t: 10, b: 20 };
let titleText = "title";
// let someAttr = 'blah'
function chart(g, data, someArgs) {
g.selectAll("svg").remove();
g.each(function () {
// const sx = d3
// .scaleBand()
// .domain(d3.range(100))
// .range([margins.l, width - margins.r]);
const sx = d3
.scaleLinear()
.domain([0, 100])
.range([margins.l, width - margins.r]);
const sy = d3
.scaleLinear()
.domain([0, 200])
.range([height - margins.t, margins.b]);
const svg = d3
.select(this)
.append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "#ccc");
// Draw Axis
const xaxis = d3.axisBottom(sx).ticks(3);
svg
.append("g")
.attr("transform", `translate(0, ${height - margins.b})`)
.call(xaxis);
const yaxis = d3.axisLeft(sy);
svg
.append("g")
.attr("transform", `translate(${margins.l}, -${margins.t})`)
.call(yaxis);
// Draw your chart
const plot = svg.append("g");
plot
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", (d) => console.log(sx(d.x)))
.attr("cx", (d) => sx(d.x))
.attr("cy", (d) => sy(d.y))
.attr("r", (d) => 10)
.attr("fill", (d) => "black");
const title = svg.append("g").attr("class", "title");
title
.append("text")
.attr("x", margins.l)
.attr("y", d3.min(sy.range()))
.style("font-size", margins.t)
.text(titleText);
});
}
chart.width = function (_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.height = function (_) {
if (!arguments.length) return height;
height = _;
return chart;
};
chart.margins = function (_) {
if (!arguments.length) return margins;
margins = _;
return chart;
};
chart.titleText = function (_) {
if (!arguments.length) return titleText;
titleText = _;
return chart;
};
return chart;
}
data = [
{ x: 20, y: 100 },
{ x: 40, y: 120 },
{ x: 60, y: 10 }
]
{
const chart = drawSomething().width(600).height(400);
const svg = d3.select("#plot").call(chart, data);
}
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.
