The Washington Post graphics team
Public
Edited
Mar 7, 2023
1 fork
Importers
4 stars
// Super basic linear gradient generator
gradientGenerator = gradientLinear();
// Basic usage
{
const svg = d3.create("svg").attr("width", 200).attr("height", 20);
// Call the generator on your SVG
svg.call(gradientGenerator);
svg.append("rect")
.attr("width", 200)
.attr("height", 20)
.attr("fill", `url(#${gradientGenerator.id()})`); // Fill the SVG element with the gradient
return svg.node();
}
// It's a configurable function. See the gradientLinear function below for all configuration methods.
gradientGenerator2 = gradientLinear()
.id("myAwesomeGradient")
.offsets([10, 50, 90])
.colors(["red", "white", "blue"])
.transform("rotate(90)") // This does the same thing as the next two lines
// .x2(0)
// .y2(100);
// Super basic radial gradient generator
radialGradientGenerator = gradientRadial();
// It's a configurable function. See the gradientRadial function below for all configuration methods.
radialGradientGenerator2 = gradientRadial()
.id("myAwesomeRadialGradient")
.offsets([0, 50, 100])
.colors(["papayawhip", "gold", "tomato"])
.cx(30)
.cy(30)
.fx(20)
.fy(20);
// Dependency: d3-selection
// https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient
gradientLinear = () => {
let id = DOM.uid().id,
offsets = [0, 100],
colors = ["white", "black"],
transform = "",
units = "objectBoundingBox", // userSpaceOnUse|objectBoundingBox
spread = "pad", // pad|reflect|repeat
x1 = 0,
x2 = 100,
y1 = 0,
y2 = 0;
function gradient(svg){
let defs = svg.select("defs");
if (defs.empty()) {
defs = svg.append("defs");
}
defs.append("linearGradient")
.attr("id", id)
.attr("gradientTransform", transform)
.attr("gradientUnits", units)
.attr("spreadMethod", spread)
.attr("x1", `${x1}%`)
.attr("x2", `${x2}%`)
.attr("y1", `${y1}%`)
.attr("y2", `${y2}%`)
.selectAll("stop")
.data(offsets.map((offset, i) => [offset, colors[i]]))
.enter().append("stop")
.attr("offset", ([offset, _]) => `${offset}%`)
.attr("stop-color", ([_, color]) => color);
}
gradient.id = function(string){
return string ? (id = string, gradient) : id;
}
gradient.offsets = function(array){
return array ? (offsets = array, gradient) : offsets;
}
gradient.colors = function(array){
return array ? (colors = array, gradient) : colors;
}
gradient.transform = function(string){
return string ? (transform = string, gradient) : transform;
}
gradient.units = function(string){
return string ? (units = string, gradient) : units;
}
gradient.spread = function(string){
return string ? (spread = string, gradient) : spread;
}
gradient.x1 = function(number){
return !isNaN(number) ? (x1 = number, gradient) : x1;
}
gradient.x2 = function(number){
return !isNaN(number) ? (x2 = number, gradient) : x2;
}
gradient.y1 = function(number){
return !isNaN(number) ? (y1 = number, gradient) : y1;
}
gradient.y2 = function(number){
return !isNaN(number) ? (y2 = number, gradient) : y2;
}
return gradient;
}
// Dependency: d3-selection
// https://developer.mozilla.org/en-US/docs/Web/SVG/Element/radialGradient
gradientRadial = () => {
let id = DOM.uid().id,
offsets = [0, 100],
colors = ["white", "black"],
transform = "",
units = "objectBoundingBox", // userSpaceOnUse|objectBoundingBox
spread = "pad", // pad|reflect|repeat
cx = 50,
cy = 50,
r = 50,
fx = 50,
fy = 50,
fr = 0;
function gradient(svg){
let defs = svg.select("defs");
if (defs.empty()) {
defs = svg.append("defs");
}
defs.append("radialGradient")
.attr("id", id)
.attr("gradientTransform", transform)
.attr("gradientUnits", units)
.attr("spreadMethod", spread)
.attr("cx", `${cx}%`)
.attr("cy", `${cy}%`)
.attr("r", `${r}%`)
.attr("fx", `${fx}%`)
.attr("fy", `${fy}%`)
.attr("fr", `${fr}%`)
.selectAll("stop")
.data(offsets.map((offset, i) => [offset, colors[i]]))
.enter().append("stop")
.attr("offset", ([offset, _]) => `${offset}%`)
.attr("stop-color", ([_, color]) => color);
}
gradient.id = function(string){
return string ? (id = string, gradient) : id;
}
gradient.offsets = function(array){
return array ? (offsets = array, gradient) : offsets;
}
gradient.colors = function(array){
return array ? (colors = array, gradient) : colors;
}
gradient.transform = function(string){
return string ? (transform = string, gradient) : transform;
}
gradient.units = function(string){
return string ? (units = string, gradient) : units;
}
gradient.spread = function(string){
return string ? (spread = string, gradient) : spread;
}
gradient.cx = function(number){
return !isNaN(number) ? (cx = number, gradient) : cx;
}
gradient.cy = function(number){
return !isNaN(number) ? (cy = number, gradient) : cy;
}
gradient.r = function(number){
return !isNaN(number) ? (r = number, gradient) : r;
}
gradient.fx = function(number){
return !isNaN(number) ? (fx = number, gradient) : fx;
}
gradient.fy = function(number){
return !isNaN(number) ? (fy = number, gradient) : fy;
}
gradient.fr = function(number){
return !isNaN(number) ? (fr = number, gradient) : fr;
}
return gradient;
}
d3 = require("d3-selection@3");
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.
