{
// Create SVG
const svg = d3.create("svg")
.attr("width", width)
.attr("height", 100);
// Append generated <defs>
svg
.node()
.appendChild(svgGradientDefs(["steelblue", "green"], 'watery'));
// Append <rect> and set fill to gradient
svg
.append("rect")
.attr("width", width)
.attr("height", 100)
.attr("fill", "url(#watery)")
return svg.node();
}
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", 100);
svg
.node()
.appendChild(svgGradientDefs(["white", "pink", "hotpink", "deeppink", "mediumvioletred"], 'pinkish'));
svg
.append("rect")
.attr("width", width)
.attr("height", 100)
.attr("fill", "url(#pinkish)")
return svg.node();
}
{
const steps = d3.range(0, 15),
color_array = steps.map((_,i) => d3.interpolateInferno(i / (steps.length - 1)));
const svg = d3.create("svg")
.attr("width", width)
.attr("height", 100);
svg
.node()
.appendChild(svgGradientDefs(color_array));
svg
.append("rect")
.attr("width", width)
.attr("height", 100)
.attr("fill", "url(#gradient)")
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.
