Basic Shape and Text Manipulation
viewof range = Inputs.range([1, 8], { label: "Limit", step: 1 })
subset = data.slice(0, range)
twoSumList = {
const retArr = [];
for (let i = 0; i < subset.length; i++) {
const curr_i = subset[i];
const currRow = new Array(range).fill(0);
for (let j = 0; j < subset.length; j++) {
if (i == j) continue;
const curr_j = subset[j];
currRow[j] = curr_i + curr_j;
}
retArr.push(currRow);
}
return retArr;
}
twoSumFlat = twoSumList.flat()
twoSumGrid = {
const width = 500;
const height = 300;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-width / 2, -height / range, width, height]);
const numRows = range;
const numCols = range;
const percentNumber = 92;
const fillActive = "#4D908E";
const fillInactive = "#ADF7B6";
const yScale = d3.scaleBand().range([0, 250]).domain(d3.range(range));
const xScale = d3.scaleBand().range([0, 250]).domain(d3.range(range));
const container = svg.append("g");
container
.selectAll("circle")
.data(twoSumFlat)
.join("text")
.attr("id", (d, i) => `id[${i % numRows}][${Math.floor(i / numCols)}]`)
.attr("x", (d, i) => xScale(i % numRows))
.attr("y", (d, i) => yScale(Math.floor(i / numCols)))
.attr("dy", "0.4em")
.text((d) => d)
.style("text-anchor", "middle")
.style("font-family", "Prompt");
// .attr("fill", (d, i) => (i < percentNumber ? fillActive : fillInactive))
// .style("stroke", "black");
return svg.node();
}
{
const yScale = d3.scaleBand().range([0, 250]).domain(d3.range(range));
const xScale = d3.scaleBand().range([0, 250]).domain(d3.range(range));
return twoSumFlat.map((d) => yScale(Math.floor(d / range)));
}
chart = {
const marginLeft = 100;
const maxCircleRadius = 40;
const height = 200;
const svg = d3.create("svg").attr("width", width).attr("height", height);
const circles = svg
.selectAll("g")
.data(subset)
.join("g")
.classed("item", true);
circles
.append("circle")
.attr("cx", (d, i) => i * 100 + maxCircleRadius + 5)
.attr("cy", height / 2)
.attr("r", maxCircleRadius)
.attr("fill", "white")
.attr("stroke", "red")
.attr("stroke-width", "2");
circles
.append("text")
.attr("x", (d, i) => i * 100 + maxCircleRadius + 5)
.attr("y", height / 2)
.attr("dy", ".4em") // vertical alignment
.style("text-anchor", "middle")
.style("font-family", "Prompt")
.text((d) => d);
circles.on("mouseover", function (e, d) {
d3.select(this).attr("opacity", 0.5);
});
circles.on("mouseout", function (e, d) {
d3.select(this).attr("opacity", 1);
});
return svg.node();
}
data = d3.range(100).map((e) => Math.round(Math.random() * 20) + 1)
htl.html`<head><link href='https://fonts.googleapis.com/css?family=Prompt' rel='stylesheet'></head>`
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.
