Data Scientist, Author, DataVis, Educator, Speaker, Public Service @ClintonBrownley
https://cbrownley.github.io
Public
Edited
Jun 13, 2024
4 forks
html`<svg>
<path stroke="steelblue" stroke-width=3 fill="none" d="M0 0 L 100 100 L 200 0 Q 300 100 400 0" />
</svg>`
html`<svg>
<path stroke="steelblue" stroke-width=3 fill="none" d="M10 10 L 40 100" />
</svg>`
html`<svg>
<path stroke="steelblue" stroke-width="3" fill="none" d="M40 80 Q 70 0 100 80" />
<!-- <circle stroke="firebrick" stroke-width="3" fill="none" cx="150" cy="80" r="20" /> -->
</svg>` // Q 70 160 40 80
html`<svg viewBox="0 0 ${width} ${height}">
<path stroke="steelblue" stroke-width=3 fill="none" d="M4 4 L 4 104 Q 104 50 4 4
M100 54 L 100 104 Q 44 79 100 54
M130 4 L 130 104 M100 34 L 160 34
M180 54 L 180 104 Q 124 79 180 54
M230 4 L 270 104 L 310 4
M320 52 L 320 104
M350 52 L 390 52 L 350 104 L 390 104
M430 4 L 430 90"></path>
<circle cx="320" cy="42" r="4" fill="steelblue" />
<circle cx="430" cy="100" r="4" fill="steelblue" />
</svg>`
dataViz = {
const chart = svg`<svg viewBox="0 0 ${width} ${height}" class="chart">
<path class="u-path" />
<circle id="point1" />
<circle id="point2" />
</svg>`;
const points = [
[4, 4],
[4, 104],
[104, 50],
[4, 4],
[100, 54],
[100, 104],
[44, 79],
[100, 54],
[130, 4],
[130, 104],
[100, 34],
[160, 34],
[180, 54],
[180, 104],
[124, 79],
[180, 54],
[230, 4],
[270, 104],
[310, 4],
[320, 52],
[320, 104],
[350, 52],
[390, 52],
[350, 104],
[390, 104],
[430, 4],
[430, 90]
],
draw = () => {
const path = d3.path();
// D
path.moveTo(...points[0]);
path.lineTo(...points[1]);
path.quadraticCurveTo(...points[2], ...points[3]);
// a
path.moveTo(...points[4]);
path.lineTo(...points[5]);
path.quadraticCurveTo(...points[6], ...points[7]);
// t
path.moveTo(...points[8]);
path.lineTo(...points[9]);
path.moveTo(...points[10]);
path.lineTo(...points[11]);
// a
path.moveTo(...points[12]);
path.lineTo(...points[13]);
path.quadraticCurveTo(...points[14], ...points[15]);
// V
path.moveTo(...points[16]);
path.lineTo(...points[17]);
path.lineTo(...points[18]);
// i
path.moveTo(...points[19]);
path.lineTo(...points[20]);
// z
path.moveTo(...points[21]);
path.lineTo(...points[22]);
path.lineTo(...points[23]);
path.lineTo(...points[24]);
// exclamation mark bar
path.moveTo(...points[25]);
path.lineTo(...points[26]);
return path;
};
d3.select(chart)
.select(".u-path")
.attr("d", draw());
d3.select(chart)
.select("#point1")
.attr("cx", 320)
.attr("cy", 42)
.attr("r", 4)
.attr("fill", "orange");
d3.select(chart)
.select("#point2")
.attr("cx", 430)
.attr("cy", 100)
.attr("r", 4)
.attr("fill", "orange");
return chart; // draw().toString();
}
html`<svg viewBox="0 0 ${width} ${height}">
<path stroke="steelblue" stroke-width=3 fill="none" d="M4 4 L 4 104 Q 104 50 4 4
M100 54 L 100 104 Q 44 79 100 54
M130 4 L 130 104 M100 34 L 160 34
M180 54 L 180 104 Q 124 79 180 54
M230 4 L 270 104 L 310 4
M320 52 L 320 104
M390 52 Q 330 66 370 79 Q 410 93 350 104
M430 4 L 430 90"></path>
<circle cx="320" cy="42" r="4" fill="steelblue" />
<circle cx="430" cy="100" r="4" fill="steelblue" />
</svg>`
dataVis = {
const chart = svg`<svg viewBox="0 0 ${width} ${height}" class="chart">
<path class="u-path" />
<circle id="point1" />
<circle id="point2" />
</svg>`;
const points = [
[4, 4],
[4, 104],
[104, 50],
[4, 4],
[100, 54],
[100, 104],
[44, 79],
[100, 54],
[130, 4],
[130, 104],
[100, 34],
[160, 34],
[180, 54],
[180, 104],
[124, 79],
[180, 54],
[230, 4],
[270, 104],
[310, 4],
[320, 52],
[320, 104],
[390, 52],
[330, 66],
[370, 79],
[410, 93],
[350, 104],
[430, 4],
[430, 90]
],
draw = () => {
const path = d3.path();
// D
path.moveTo(...points[0]);
path.lineTo(...points[1]);
path.quadraticCurveTo(...points[2], ...points[3]);
// a
path.moveTo(...points[4]);
path.lineTo(...points[5]);
path.quadraticCurveTo(...points[6], ...points[7]);
// t
path.moveTo(...points[8]);
path.lineTo(...points[9]);
path.moveTo(...points[10]);
path.lineTo(...points[11]);
// a
path.moveTo(...points[12]);
path.lineTo(...points[13]);
path.quadraticCurveTo(...points[14], ...points[15]);
// V
path.moveTo(...points[16]);
path.lineTo(...points[17]);
path.lineTo(...points[18]);
// i
path.moveTo(...points[19]);
path.lineTo(...points[20]);
// s
path.moveTo(...points[21]);
path.quadraticCurveTo(...points[22], ...points[23]);
path.quadraticCurveTo(...points[24], ...points[25]);
// exclamation mark bar
path.moveTo(...points[26]);
path.lineTo(...points[27]);
return path;
};
d3.select(chart)
.select(".u-path")
.attr("d", draw());
d3.select(chart)
.select("#point1")
.attr("cx", 320)
.attr("cy", 42)
.attr("r", 4)
.attr("fill", "orange");
d3.select(chart)
.select("#point2")
.attr("cx", 430)
.attr("cy", 100)
.attr("r", 4)
.attr("fill", "orange");
return chart; // draw().toString();
}
line_chart = {
const svg = d3
.select(DOM.svg(width, line_chart_height))
.style("-webkit-tap-highlight-color", "transparent")
.style("overflow", "visible");
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg
.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line);
const tooltip = svg.append("g");
svg.on("touchmove mousemove", function(event) {
const { date, close } = bisect(d3.pointer(event, this)[0]);
tooltip.attr("transform", `translate(${x(date)},${y(close)})`).call(
callout,
`${formatValue(close)}
${formatDate(date)}`
);
});
svg.on("touchend mouseleave", () => tooltip.call(callout, null));
return svg.node();
}
line = d3
.line()
.defined(d => !isNaN(d.close))
.x(d => x(d.date))
.y(d => y(d.close))
data
html`<style>
.chart { max-width: 100%; height: auto; overflow: visible; }
.chart .u-line { stroke: #aaa; stroke-dasharray: 2 2; }
.chart .u-path { stroke: orange; stroke-width: 3; fill: none; }
.chart .u-point circle { fill: orange; }
.chart { text-anchor: middle; font: 11px var(--sans-serif); user-select:none; }
</style>`
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.
