Interested in data visualisation, maps, JavasScript, and geology
Public
Edited
Dec 24, 2022
1 star
relativeLines = [...transitMap.children]
.map(child => ({
lijn: colorLijnMap.get(child.getAttribute("stroke")),
path: child.getAttribute("d"),
stroke: child.getAttribute("stroke")
}))
.sort((d, e) => d3.ascending(+d.lijn, +e.lijn))
svg`<svg viewBox="0 0 567 704" stroke-width="2.5" >
${absoluteMoveToLines.map(
line =>
svg`<path d="${line.path}" id=${line.lijn} stroke=${line.stroke} fill="none" />`
)}
</svg>
`
// svg`<svg viewBox="0 0 567 704" stroke-width="2.5" >
// ${absoluteMoveToLines.map(
// line => svg`<path d="${line.path}" stroke=${line.stroke} fill="none" />`
// )}
// </svg>
// `
absoluteMoveToLines = relativeLines.map(d => ({
stroke: d.stroke,
path: correctPathString(d.path),
lijn: colorLijnMap.get(d.stroke)
}))
correctPathString = (pathString) => {
// 1. Convert relative commands to absolute commands
const pathArray = snap.path.toAbsolute(pathString);
// 2. Convert H and V commands to Line to's`
const { length } = pathArray;
const lineToCommandsPathArray = [pathArray[0]];
for (let prevIndex = 0, index = 1; index < length; prevIndex++, index++) {
if (pathArray[index][0] === "H") {
const x = format(pathArray[index][1]);
const y = format(pathArray[prevIndex][2]);
const lineTo = ["L", x, y];
lineToCommandsPathArray.push(lineTo);
} else if (pathArray[index][0] === "V") {
const prevCommand = pathArray[prevIndex][0];
// if (prevCommand === "H")
let x, y;
if (prevCommand === "V") {
x = pathArray[prevIndex - 1][1];
} else {
x = pathArray[prevIndex][1];
}
y = pathArray[index][1];
const lineTo = ["L", format(x), format(y)];
lineToCommandsPathArray.push(lineTo);
} else {
const [c, x, y] = pathArray[index];
lineToCommandsPathArray.push([c, format(x), format(y)]);
}
}
const correctedPathString = lineToCommandsPathArray
.map(([command, ...coords]) => `${command} ${coords.join(",")}`)
.join(" ");
return correctedPathString;
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
transitMap = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 567 704">
<path fill="none" stroke="#00A3DA" stroke-width="2.5" stroke-linecap="round"
d="M105.57 313.51h31.49l3.01.56 2.14 1.85 33.44 40.54 2.66 2.95 1.2 1.04 1.49.55 10.31-.1h47.09l4.13-.12 1.78-.21L246 360l1.04-.66.69-.82 1.99-2.25 26.24-36.84 1.38-1.22 1.39-.9 1.68-.47 2.79-.21h193.61l1.97.23 1.78.53 1.43.69 1.01.92 1.23 1.38.67 1.45.35 2.86.1 92.01v2.58l.4 2.35.74 1.72 1.45 1.93 1.61 1.22 2.17.61 2.56.16h66.12" />
<path fill="none" stroke="#DA322A" stroke-width="2.5" stroke-linecap="round"
d="M18.53 666.87l9.87-16.95.69-1.06 1.12-.71 1.37-.22 1.56-.04h8.35l6.88-1.07 5.65-4.02L85.94 609l2.17-2.21 2.38-1.59 2.78-.71 3.28.05h44.42l2.16-.29 1.2-.87 1.45-1.26.5-1.2 3.48-11.88 1.07-1.92 2.25-.8h10.43l2.23-.23 1.73-.66 1.07-1.43.3-1 7.28-35.48 1.22-2.3 2.01-1.69 1.93-.65 2.18-.17h33.74l4.97-.6 4.18-1.74 5.66-5.45 66.31-66.49 3.99-4.93 1.64-6.99.18-73.53.14-2.28.99-1.53 1.53-.85 2.13-.09h22.95l4.04-.33 3.15-1.69 1.09-3.02.1-3.29-.07-101.13v2.41l-.11-126.91.68-4.68 3.01-5.31 8.33-9.51 20.09-20.09 24.13-22.78" />
<path fill="none" stroke="#98297D" stroke-width="2.5" stroke-linecap="round"
d="M10.06 169.13h233.57l3.22.77 2.14 1.48 1.67 2.27.31 2.83.27 119.18.21 1.74.71 1.77 1.19 1.43 1.8.98 1.41.75 1.74.44 1.31.32 1.4.01h156.21l5.5 1.26 4.12 2.38 2.14 4.04.53 4.47V370l-.01 1.66.85 1.88 1.53.77 2.02.38h22.76l2.66.28 1.94.78 2.22 1.02 1.64 1.2 1.49 1.8.73 1.8.62 3.7v243.29l.04 3.41.4 1.73.66 1.64 1.51 1.35 2.62.93 4.84.19h34.48l2.55-.51 1.88-.73 1.57-1.03 1.25-1.29 1.03-1.65.65-1.84.32-3.82v-31.26l-1.33-2.94-2.33-2.48-3.46-1.32-4.14-.49h-96.47l-3.98 1.29-2.09 2.19-.87 2.78-.29 2.99v16.08l.56 3.24 1.9 2.06 2.64 1.9 2.73.63h35.98l2.95-.1 2.43-.53 1.43-1.69.55-1.95v-5.08" />
<path fill="none" stroke="#777776" stroke-width="2.5" stroke-linecap="round"
d="M109.2 173.08h133.14l1.82.25 1.98 1.18.82 1.63.45 2.62V297.2l.47 1.89.75 1.74 1.07 1.59 2.04 1.52 1.77.79 2.22.87 2.78.54 2.03.24h156.72l3.97.98 3.17 2.06 1.11 3.09.52 3.09v56.16l1.47 4.42 4.63 1.8h23.36l2.26.28 1.88.57 1.51.69 1.41.99 1.01 1.33.57 1.39.42 2.98-.03 244.1.19 4.02.9 2.62 1.19 1.78 1.95 1.29 2.31.61 4.59.59h50.64l2.09.15 1.76.49 1.81.59 1.52 1.19 1.52 1.43 1.08 1.72.48 1.67.09 2.03.04 18.69-1.22 2.52-2.37 2.35-3.24 1.3-3.73.29H407" />
<path fill="none" stroke="#E8892D" stroke-width="2.5" stroke-linecap="round"
d="M6.45 309.84h411.73l4.47 6.49v56.38l9.21 8.54h22.33l6.97 9.46v241.26l12.65 12.73h52.7l6.57 4.75v19.59l-8.61 3.14H407" />
<path fill="none" stroke="#F6BF35" stroke-width="2.5" stroke-linecap="round"
d="M6.45 309.84h410.02l2.74.5 2.1 1.39 1.11 1.78.24 2.82v56.38l.71 3.64 1.36 3.04 3.24 1.64 3.9.21h22.33l2.84.47 1.77.52 1.08.7.82 1.04.36 1.07.15 1-.05 4.66v241.26l-.05 2.55.56 2.52.56 2.55 1.47 1.85 1.97 1.69 2.47.93 2.8.48 2.89.17h52.7l2.22.15 1.67.69 1.2.85.73.82.61.98.15 1.27v19.59l-.81 1.03-2.13 1.28-2.48.67-3.19.16H407" />
<path fill="none" stroke="#009D80" stroke-width="2.5" stroke-linecap="round"
d="M172.31 583.23l6.56-32.21.53-2.04 1.16-1.94.99-.63 1.44-.21 2.92-.08 31.11.05 6.2-.67 5.17-1.97L246 525.92l4.44-2.94 4.39-1.85 5.23-1 5.52-.19h225.59l2.15-.6 1.92-1.17 1.36-2 .81-2.08V438.2l.18-1.18.69-.71 10.44-7.81.9-1.04.38-1.16.08-16.55" />
<path fill="none" stroke="#004A86" stroke-width="2.5" stroke-linecap="round"
d="M8.06 477.56h232.53l2.62-.34 1.9-1.03 1.06-2.01.24-2.45v-39.36l.1-1.83.92-1.82 1.74-1.06 2.27-.32h43.18l1.67-.05 2.46-1.53 1.47-2.3.43-2.34v-39.17l.36-2.5 1.17-2.4 2.48-1.88 3.75-.38h62.81l8.5-.92 5.27-3.49 4.76-4.26 2.85-3.81 1.17-4.85.02-37.52" />
<path fill="none" stroke="#AB836C" stroke-width="2.5" stroke-linecap="round"
d="M356.23 76.83l-3.56 20.2-2.42 5.74-4.49 5.71-4.97 4.97-6.45 3.07-9.3 2.06-11.41.94h-84l-3.2.27-2.51.9-1.72 1.85-.72 2.4v178.35-1.95V363.15l.22 2.85.53.86.84.6 1.04.28 1.28.05H326.2l1.89-.51 1.63-1.31 1.07-1.64.64-1.77v-3.38l-.68-1.84-.95-1.24-1.73-1.18-1.88-.74h-4.88l-1.74.41-1.51 1.31-.99 1.59-.18 1.7v8.26" />
<path fill="none" stroke="#E7B2C8" stroke-width="2.5" stroke-linecap="round"
d="M153.7 81.89v77.17l1.23 4.38 3.59 2.15h26.26l2.39.7 2.02 1.43.65 1.92.08 2.27V357.3l.26 2.54 1.16 2.25 1.8 1.45 3.07.79h128.12l2.06-.3 1.52-1.65v-2.71l-1.28-1.7-1.57-.45h-3.34l-1.04.84-.43 1.37v4.18" />
<path fill="none" stroke="#6A3123" stroke-width="2.5" stroke-linecap="round"
d="M276.69 149.78l2.67-3.46 2.77-1.32h11.43l1.5-.8 1.48-1.43 1.43-1.96.58-2.22-.05-1.91v-7.81l-.9-1.7-1.06-1.27-2.06-.85-1.8-.26h-10.23l-2.66.89-1.85 1.85-1.06 2.7-.18 3.5v118.73l.03.81.3 1.07.34 1.03.59.81 1.03.61 1.13.54 1.55.15 105.78.01 3.89.69 3.57 2.3 1.82 2.66.63 3.69v53.64l-.39 1.27-1.1 1.05-1.56.23-1.72.02-34.6-.06-4.72.32-2.99 1.16-1.98 2.64-.55 3.64v42.66l-.43 2.81-1.82 3.09-3.54 1.82-3.08.53h-37.07l-3.47 1.53-1.17 3.07v33.86l-.17 1.62-.89 1.45-1.37.65-1.75.06H175.88L141 423l-2.57-.78L136 420l-20.58-33.77-3.05-3.13-4.2-1.82-4.1-1.03-4.81-.12-37.95.33-1.02.17-.83.54-.4.83-.06 1-.13 9.9-.17 75.65-.38 2.45-.97 1.96-2.11.85-2.95.37H8.11" />
<path fill="none" stroke="#84BF41" stroke-width="2.5" stroke-linecap="round"
d="M7.58 376.77l247.68-.02 2.48-.29 2.53-1.07 5.63-3.19 1.83-.79 2.35-.23h76.4l2.07-.3 1.88-.87.85-1.88.17-1.51-.09-36.14.35-1.71.93-1.24 1.37-.74 2.28-.25h38.49l2.58-.31 2.07-1.27 1.27-2.06.34-1.93V120.79l.61-9.2 2.06-7.61 3.17-5.55 4.07-4.44 4.33-3.01 4.92-2.96 5.02-1.9 5.99-.92h39.49" />
<path fill="none" stroke="#7778AB" stroke-width="2.5" stroke-linecap="round"
d="M393.79 299.86l.02-33.35-.37-1.84-1.11-1.82-2.14-1.11-2.46-.51-39.76-.02-1.88.12-1.4.77-.58 1.53-.09 1.79v162.2l-.37 3.58-1.31 2.38-2.42.75-3.13.32h-23.27L310 436l-1.72 1.6-.6 2.63V519.94l1.39 2.35 3.12.91h30.5l2.59.57 1.96 1.51.63 1.98-.04 2.94V552" />
</svg>`
format = d3.format(".4f")
snap = require("snapsvg")
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.
