Learner
Public
Edited
Dec 20, 2024
thingo = {
const marginTop = 20;
const marginRight = 20;
const marginBottom = 30;
const marginLeft = 50;
const barWidth = 200
const barHeight = 40
const width = 500;
// const height = 200;
const height = Math.ceil((colours.length * barHeight) + marginTop + marginBottom)
const y = d3.scaleBand()
.domain(colours)
.range([height - marginBottom, marginTop])
.padding(0.25);
let svg = d3.create("svg")
.attr("class", "essveegee")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
let rects = svg.selectAll("rects")
.data(d3.reverse(colours))
.enter()
.append("rect")
.attr("class", "bars")
.attr("fill", function(d){return d})
.attr("x", 0)
.attr("y", function(d){return y(d)})
.attr("width", barWidth)
.attr("height", (height/colours.length))
rects.on('click', (e, d) => navigator.clipboard.writeText(d))
let texts = svg.selectAll("texts")
.data(d3.reverse(colours))
.enter()
.append("text")
.attr("class", "lines")
.text( (d) => d)
.attr("x", 5)
.attr("y", (d) => y(d) + y.bandwidth())
.attr("dy", "0.35em")
// .style("fill",function(d){return d})
.style("fill","#fff")
texts.on('click', (e, d) => navigator.clipboard.writeText(d))
return svg.node();
}
d3.reverse(colours)
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.
