Published
Edited
Feb 25, 2021
md`### Alphabetically Applied Linear Color Scale
I have a list of names which I'd like to be linearly interpolated alphabetically. This way if I have three colors then the names starting with A will be red, names between A and M will be a green-red, and names at the end of the alphabet will be yellow. The closer names are the more close their colors will be too (Maya and Marly should be very similar, and if we have two of the same name they should be exactly the same shade`
data = [
{name: "Adam"},
{name: "Maya"},
{name: "Sharla"},
{name: "Yim"},
{name: "Jessica"},
{name: "Marly"},
//{name: "Sharla"} //this will be the exact same color as circle 3
]
colorScale = d3.scaleLinear()
.domain(d3.sort(data, d => d.name))
.range(["red", "green", "yellow"])
.interpolate(d3.interpolateHcl);
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, 100])
const circle = svg.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", function(d, i) { return (i * 100) + 50 + i*20} )
.attr("cy", 100/2)
.attr("r", 50)
.attr("fill", function(d) {return colorScale(d.name)})
return svg.node()
}
d3 = require("d3@6")
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.
