chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const colorId = DOM.uid("color");
/*
// blurred gradient approach
svg.append("linearGradient")
.attr("id", colorId.id)
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", 0)
.attr("x2", width)
.selectAll("stop")
.data(data)
.join("stop")
.attr("offset", d => x(d.date) / width)
.attr("stop-color", d => color(d.condition));
*/
let linearGradient = svg.append("linearGradient")
.attr("id", colorId.id)
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", 0)
.attr("x2", width)
linearGradient.append("stop")
.attr("offset", x(data[5].date)/ width )
.attr("stop-color", "black");
linearGradient.append("stop")
.attr("offset", x(data[5].date)/ width )
.attr("stop-color", "white");
linearGradient.append("stop")
.attr("offset", x(data[6].date)/ width )
.attr("stop-color", "white");
linearGradient.append("stop")
.attr("offset", x(data[6].date)/ width )
.attr("stop-color", "black");
svg.append("defs")
.append("clipPath")
.attr("id", "chart-path")
.append("rect")
.attr("width", width - 100)
.attr("height", height)
svg.selectAll(".lineTest")
.data([data])
.enter()
.append("path")
.attr("class", "lineTest")
.attr("fill", "none")
.attr("stroke", colorId)
.attr("stroke-width", 3)
.attr("clip-path", "url(#chart-path)")
.attr("d", line)
return svg.node();
}
rawdata = [
{date: "2020-01-01", value: 100, daam: false, condition: "in"},
{date: "2020-01-02", value: 10, daam: true, condition: "in"},
{date: "2020-01-03", value: 60, daam: false, condition: "in"},
{date: "2020-01-04", value: 20, daam: false, condition: "in"},
{date: "2020-01-05", value: 80, daam: true, condition: "in"},
{date: "2020-01-06", value: 100, daam: false, condition: "out"},
{date: "2020-01-12", value: 60, daam: false, condition: "out"},
{date: "2020-01-13", value: 25, daam: true, condition: "in"},
{date: "2020-01-14", value: 110, daam: false, condition: "in"},
{date: "2020-01-15", value: 25, daam: true, condition: "in"},
{date: "2020-01-16", value: 110, daam: false, condition: "in"},
]
data = rawdata.map(function (d) {
return {
date: formatDate(d.date),
value: d.value,
condition: d.condition
};
});
data
data.colors = ["black", "white"]
data.conditions = ["in", "out"]
line = d3.line()
.x(function (d) { return x(d.date); })
.y(function (d) { return y(d.value); })
formatDate = d3.timeParse("%Y-%m-%d");
x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.rangeRound([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain(d3.extent(data, d => d.value)).nice()
.rangeRound([height - margin.bottom, margin.top])
color = d3.scaleOrdinal(
data.conditions === undefined ? data.map(d => d.condition) : data.conditions,
["black", "white"]
).unknown("red")
margin = ({top: 20, right: 20, bottom: 30, left: 40})
height = 500
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.
