function Cubehelix(t) {
return t = (t + 0.2) % 1, d3.cubehelix(
360 * t - 100,
1.5 - 1.5 * Math.abs(t - 0.5),
0.8 - 0.9 * Math.abs(t - 0.5)
);
}
function t(t) {
(t + 0.2) % 1, d3.cubehelix(
360 * t - 100,
1.5 - 1.5 * Math.abs(t - 0.5),
0.8 - 0.9 * Math.abs(t - 0.5)
)
}
chartRgb(Sinebow)
chartRgb(Cubehelix)
chartL(Sinebow)
chartL(Cubehelix)
chartL(Rainbow)
function chartRgb(interpolate) {
const height = 240;
const margin = { top: 20, right: 0, bottom: 30, left: 1 };
const x = d3.scaleLinear().range([margin.left, width - margin.right]);
const y = d3
.scaleLinear()
.domain([0, 255])
.range([height - margin.bottom, margin.top]);
const xAxis = (g) =>
g.attr("transform", `translate(0,${height - margin.bottom})`).call(
d3
.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0)
);
const yAxis = (g) =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(8))
.call((g) => g.select(".domain").remove());
const svg = d3.select(DOM.svg(width, height));
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
const g = svg
.append("g")
.datum(Array.from({ length: width }, (_, i) => i / (width - 1)))
.attr("fill", "none")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
g.append("path")
.attr("stroke", "#f00")
.attr(
"d",
d3
.line()
.x(x)
.y((t) => y(d3.rgb(interpolate(t)).r))
);
g.append("path")
.attr("stroke", "#0f0")
.attr(
"d",
d3
.line()
.x(x)
.y((t) => y(d3.rgb(interpolate(t)).g))
);
g.append("path")
.attr("stroke", "#00f")
.attr(
"d",
d3
.line()
.x(x)
.y((t) => y(d3.rgb(interpolate(t)).b))
);
return svg.node();
}
function chartL(interpolate) {
const height = 240;
const margin = { top: 20, right: 0, bottom: 30, left: 1 };
const x = d3.scaleLinear().range([margin.left, width - margin.right]);
const y = d3
.scaleLinear()
.domain([0, 100])
.range([height - margin.bottom, margin.top]);
const xAxis = (g) =>
g.attr("transform", `translate(0,${height - margin.bottom})`).call(
d3
.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0)
);
const yAxis = (g) =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(8))
.call((g) => g.select(".domain").remove());
const svg = d3.select(DOM.svg(width, height));
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg
.append("line")
.datum(
d3.mean(d3.range(width), (i) => d3.lab(interpolate(i / (width - 1))).l)
)
.attr("fill", "none")
.attr("stroke", "#aaa")
.attr("stroke-dasharray", "2,2")
.attr("x1", margin.left)
.attr("x2", width - margin.right)
.attr("y1", y)
.attr("y2", y);
svg
.append("path")
.datum(d3.range(width).map((i) => i / (width - 1)))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr(
"d",
d3
.line()
.x(x)
.y((t) => y(d3.lab(interpolate(t)).l))
);
return svg.node();
}
//import {ramp} from "@mbostock/color-ramp"
d3 = require("d3@5", "d3-color-difference@0.1")
chartRgb(Petrel)
chartDifference(Petrel)
import { ramp as ramp2 } from "@fil/perceptually-uniform"
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.
