Variable-Color Line / 深度碎片

深度碎片

as simple as possible

Workspace

Published

Edited

Dec 24, 2019

Fork of Variable-color line

DOM.uid().id; // create a unique id (keep running it to see the effect)

data.labels

(data.labels[0] + "").replace(/"/g, """)

legend = {

const id = DOM.uid().id;

return html`<style>

.${id} {

display: flex;

min-height: 33px;

font: 10px sans-serif;

margin-left: ${margin.left}px;

}

.${id}-item {

display: flex;

align-items: center;

width: 60px;

padding-bottom: 1px;

}

.${id}-swatch {

width: 20px;

height: 20px;

margin: 0 5px 0 0;

}

</style>

<div class="${id}">${color.domain().map((name, i) => html`

${document.createTextNode(name)}

</div>`)}

</div>`;

}

color = d3.scaleOrdinal(

data.conditions === undefined ? data.map(d => d.condition) : data.conditions,

data.colors === undefined ? d3.schemeCategory10 : data.colors

).unknown("red") // there is no unknown data, that's why we don't see redness

xAxis = g => g

.attr("transform", `translate(0,${height - margin.bottom})`)

.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))// tickSizeInner(0)) can shrink inner tize size to nothing

// https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axis_tickSizeOuter

.call(g => g.select(".domain").remove()) // remove the xAxis horizontal line

// .call(g => g.select(".tick:last-of-type text").append("tspan").text(data.y)) // this works too

chart = {

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

svg.append("g")

.call(grid);

const colorId = DOM.uid("color"); // https://github.com/observablehq/stdlib#DOM_uid

svg.append("linearGradient") // https://developer.mozilla.org/en-US/docs/Web/SVG/Element/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) // divide width is for offset ratio

.attr("stop-color", d => color(d.condition)); // use condition to map different color

svg.append("path")

.datum(data)

.attr("fill", "none") // if fill with "red", there will be a area of redness

.attr("stroke", colorId ) // https://github.com/observablehq/stdlib#DOM_uid

.attr("stroke-width", 2)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", line);

// svg.append("path")

// .datum(data)

// .attr("fill", "none")

// .attr("stroke", colorId)

// .attr("stroke-width", 2)

// .attr("stroke-linejoin", "round")

// .attr("stroke-linecap", "round")

// .attr("d", line2);

return svg.node();

}

colorId = DOM.uid("color");

// see how to use stop offset

html`

xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>

</linearGradient>

</defs>

</svg>

html`

<radialGradient id="gradient1" gradientUnits="userSpaceOnUse"

cx="100" cy="100" r="100" fx="100" fy="100">

</radialGradient>

<radialGradient id="gradient2" gradientUnits="userSpaceOnUse"

cx="100" cy="100" r="100" fx="100" fy="100"

gradientTransform="skewX(20) translate(-35, 0)">

</radialGradient>

</svg>

FileAttachment("FCM.txt").text()

data = {

const parseDate = d3.utcParse("%Y-%m-%d %H:%M");

return Object.assign(d3.csvParse(await FileAttachment("FCM.txt").text(), ({valid, tmpf, skyc1}) => {

return tmpf === "M" ? null : { // if null, it won't be included into data

date: parseDate(valid),

value: +tmpf,

condition: skyc1

};

}), {

y: " °F",

conditions: ["CLR", "FEW", "SCT", "BKN", "OVC", "VV "],

labels: ["Clear", "Few clouds", "Scattered clouds", "Broken clouds", "Overcast", "Indefinite ceiling (vertical visibility)"],

colors: ["deepskyblue", "lightskyblue", "lightblue", "#aaaaaa", "#666666", "#666666"]

});

}

line = d3.line()

.curve(d3.curveStep) // without it, it is just normal smooth line; with it, it seems to be steps

.x(d => x(d.date))

.y(d => y(d.value))

line2 = d3.line()

.curve(d3.curveStep)

.x(d => x(d.date))

.y(d => y(d.value * 2))

x = d3.scaleUtc()

.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])

yAxis = g => g

.attr("transform", `translate(${margin.left},0)`)

.call(d3.axisLeft(y))

.call(g => g.select(".domain").remove())

.call(g => g.select(".tick:last-of-type text").append("tspan").text(data.y))

x.ticks()

y.ticks()

grid = g => g

.attr("stroke", "currentColor")

.attr("stroke-opacity", 0.1)

.call(g => g.append("g")

.selectAll("line")

.data(x.ticks())

.join("line")

.attr("x1", d => 0.5 + x(d))

.attr("x2", d => 0.5 + x(d))

.attr("y1", margin.top)

.attr("y2", height - margin.bottom))

.call(g => g.append("g")

.selectAll("line")

.data(y.ticks())

.join("line")

.attr("y1", d => 0.5 + y(d))

.attr("y2", d => 0.5 + y(d))

.attr("x1", margin.left)

.attr("x2", width - margin.right));

margin = ({top: 20, right: 20, bottom: 30, left: 40})

height = 500

d3 = require("d3@5")

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.

Learn more