The avatar for @sepans
Sepand Ansari
Public
d3 p5 handbook
Edited
Dec 7, 2022
Fork of 1. p5.js and d3.js Hello World: one dimensional chart
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
xScale = d3.scaleLinear().domain(d3.extent(data)).range([margin, width - margin])
Insert cell
Insert cell
Insert cell
Insert cell
yScale = d3.scaleLinear().domain([0, data.length]).range([margin, height - margin])
Insert cell
Insert cell
Insert cell
Insert cell
p5(s => {
s.setup = function() {
s.createCanvas(width, height);

// draw y-axis
s.line(margin, margin, margin, height - margin)
s.noStroke();
for(let i = 0; i < data.length; i++) {
const screenX = margin;
const screenY = yScale(i);
const barLength = xScale(data[i])
s.fill(70, 130, 180)
s.rect(screenX, screenY, barLength, barWidth);

s.fill(0)
s.textAlign(s.RIGHT, s.CENTER)
s.text(data[i], margin - 5, screenY + barWidth / 2)
}
}

})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
margin = 50
Insert cell
height = 400
Insert cell

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.
Learn more