Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Published
Edited
Mar 31, 2021
20 stars
// Input path data for the table
path_data = [
{
command: "M",
description: "Move to (absolute)",
x: 125,
y: 100,
x1: "NA",
x2: "NA",
y1: "NA",
y2: "NA"
},
{
command: "L",
description: "Line to (absolute)",
x: 150,
y: 100,
x1: "NA",
x2: "NA",
y1: "NA",
y2: "NA"
},
{
command: "m",
description: "Move to (relative)",
x: 60,
y: 0,
x1: "NA",
x2: "NA",
y1: "NA",
y2: "NA"
},
{
command: "l",
description: "Line to (relative)",
x: 25,
y: 0,
x1: "NA",
x2: "NA",
y1: "NA",
y2: "NA"
},
{
command: "m",
description: "Move to (relative)",
x: -100,
y: 100,
x1: "NA",
x2: "NA",
y1: "NA",
y2: "NA"
},
{
command: "C",
description: "Curve to (absolute)",
x: 225,
y: 200,
x1: 150,
y1: 250,
x2: 200,
y2: 250
},
{
command: "M",
description: "Move to (absolute)",
x: 175,
y: 175,
x1: "NA",
y1: "NA",
x2: "NA",
y2: "NA"
},
{
command: "c",
description: "Curve to (relative)",
x: 4.5,
y: -70,
x1: 70,
y1: -15,
x2: 2,
y2: -20
}
]
// Creating the path from the input table
path = path_table
.map(d =>
d.command.toLowerCase() === "c"
? `${d.command} ${d.x1} ${d.y1}, ${d.x2} ${d.y2}, ${d.x} ${d.y}`
: `${d.command} ${d.x} ${d.y}`
)
.join(" ")
pathUI = () => {
let lx = 0, ly = 0;
const segments = [];
// Note: Doesn't handle H/h/V/v.
for(const {command: c, x, y} of path_table) c.match(/^[a-z]$/)
? segments.push({x1: lx, y1: ly, x2: lx += x, y2: ly += y})
: segments.push({x1: lx, y1: ly, x2: lx = x, y2: ly = y});
let seg = '';
if(selected != null) {
const {x1, y1} = segments[selected],
d = path_table[selected],
cmd = d.command,
cmdVis = cmd === 'm' ? 'l' : cmd === 'M' ? 'L' : cmd,
path = cmd === 'c' || cmd === 'C'
? `${cmd} ${d.x1} ${d.y1}, ${d.x2} ${d.y2}, ${d.x} ${d.y}`
: `${cmdVis} ${d.x} ${d.y}`;
seg = DOM.element('svg:path', {
d: `M${x1},${y1}${path}`,
stroke: '#c30771',
'stroke-width': 4,
'stroke-dasharray': cmd !== cmdVis ? '4,4' : '',
fill: 'none'
});
}
const path = `M0,0${segments.map(({x2,y2}, i)=>`${i === selected ? 'M' : 'L'}${x2},${y2}`)}`;
return svg`<g>
<path d="${path}" stroke="#c3077188" stroke-dasharray="4,4" stroke-width=1 fill="none" />
${seg}
`;
}
import { code_styles } from "@uw-info474/utilities"
code_styles
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.
