Lecturer, Interactive Games & Media at the Rochester Institute of Technology
Simplify path
import {dStringToPoints}
from '@tstodter/path-d-parser'
tolerance = Inputs.range([0, 10], {
label: "Tolerance",
value: 1.0,
step: 0.01
})
path = svg`<path d="M 10 10 L 20 20 Z"></path>`
dString = d3.select(path).attr('d')
simplifiedDString = simplifyPathDString(dString)
simplifiedPath = simplifyPath(path)
simplifyPath = (pathSvg) => {
const _dString = d3.select(pathSvg).attr('d');
const points = dStringToPoints(_dString);
const simplifiedPoints = points
.map(subpath => subpath.map(([x, y]) => ({x, y})))
.map(subpath => simplify(subpath, tolerance, true));
return d3.select(pathSvg).clone()
.attr('d', pointsToDString(simplifiedPoints))
.node()
}
simplifyPathDString = (pathDString) => {
const points = dStringToPoints(pathDString);
const simplifiedPoints = points
.map(subpath => subpath.map(([x, y]) => ({x, y})))
.map(subpath => simplify(subpath, tolerance, true));
return pointsToDString(simplifiedPoints);
}
Math.round(1.9876543 * 10) / 10
pointsToDString = (xyPoints) => xyPoints
.map(subpath => subpath.map(({x, y}) => [Math.round(x * 1000) / 1000,
Math.round(y * 1000) / 1000]))
.map(subpath => `M ${subpath[0][0]} ${subpath[0][1]} ${subpath.slice(1).map(([x, y]) => `L ${x} ${y}`).join(' ')}`)
.join(' ')
simplifyImport = require('simplify-js@1.2.4/simplify.js')
simplify = (points, tolerance, highestQuality) => {
const simplified = simplifyImport(points, tolerance, highestQuality);
return Object.assign([], points, simplified, {length: simplified.length})
}
simplify([
{
"x": 1222.8147438540698,
"y": 709.4294970107113,
"value": 0.528503398570624
},
{
"x": 1224.446704617863,
"y": 710.3824125921977,
"value": 0.5265438607534113
},
{
"x": 1226.0805295213886,
"y": 711.3321284574013,
"value": 0.5246144153770552
},
{
"x": 1227.7161838074946,
"y": 712.2786901808736,
"value": 0.5227153877167994
},
{
"x": 1229.3536326900812,
"y": 713.2221440466858,
"value": 0.5208470151294369
},
{
"x": 1230.992841436967,
"y": 714.1625369029609,
"value": 0.5190094481782527
},
{
"x": 1232.6337754501958,
"y": 715.0999160174225,
"value": 0.5172027517972827
},
{
"x": 1234.2764003438288,
"y": 716.0343289340803,
"value": 0.5154269064938499
},
{
"x": 1235.9206820192671,
"y": 716.9658233311744,
"value": 0.5136818095883909
},
{
"x": 1237.5665867381533,
"y": 717.8944468804924,
"value": 0.5119672764906054
},
{
"x": 1239.2140811929005,
"y": 718.8202471081751,
"value": 0.510283042011031
},
{
"x": 1240.8631325748966,
"y": 719.7432712571206,
"value": 0.5086287617072002
},
{
"x": 1242.5137086404336,
"y": 720.6635661510954,
"value": 0.507004013263581
},
{
"x": 1244.1657777744083,
"y": 721.5811780606563,
"value": 0.5054082979045982
},
{
"x": 1245.8193090518419,
"y": 722.4961525709839,
"value": 0.5038410418400514
},
{
"x": 1247.4742722972615,
"y": 723.4085344517281,
"value": 0.5023015977423636
},
{
"x": 1249.1306381419888,
"y": 724.3183675289573,
"value": 0.500789246255097
},
{
"x": 1250.7883780793738,
"y": 725.2256945593045,
"value": 0.49930319753228225
},
{
"x": 1252.44746451801,
"y": 726.1305571063983,
"value": 0.4978425928081385
},
{
"x": 1254.1078708329683,
"y": 727.0329954196623,
"value": 0.49640650599680336
},
{
"x": 1255.7695714150755,
"y": 727.9330483155659,
"value": 0.49499394532176544
},
{
"x": 1257.4325417182679,
"y": 728.830753061404,
"value": 0.49360385497470394
},
{
"x": 1259.096758305039,
"y": 729.7261452616806,
"value": 0.4922351168034886
}
], 111, true)
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.
