logo = {
const svg = d3.create("svg")
.attr("class", "logo")
.attr("viewbox", [0, 0, 500, 500])
.attr("width", 500)
.attr("height", 500);
const stripes = svg.append("g")
.selectAll("g")
.data(colors)
.enter();
stripes
.append("rect")
.attr("width", 500 / gradient_steps)
.attr("height", 500)
.attr("y", 0)
.attr("x", (d, i) => (500/gradient_steps) * i)
.attr("fill", d => d);
const letter_back = svg.append("g")
.append("text")
.attr("fill", "red")
.attr("x", 255)
.attr("y", 255)
.attr("font-size", font_size)
.attr("text-anchor", "middle")
.attr("dy", "0.25em")
.text("m")
const letter_front = svg.append("g")
.append("text")
.attr("fill", "white")
.attr("x", 250)
.attr("y", 250)
.attr("font-size", font_size)
.attr("text-anchor", "middle")
.attr("dy", "0.25em")
.text("m")
return svg.node();
}
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.
