2c:["$","title",null,{"children":"Continuous Area Vector Graphics | Mario Delgado | Observable"}] 31:T400,{ const aNewSVGPaths = fnDataDrivenDistort(parsedSVG); //return aNewSVGPaths const totalOrginalArea = Math.round( d3.sum(parsedSVG.parsedPaths, (d) => d.area) ); const totalDistoredArea = Math.round(d3.sum(aNewSVGPaths, (d) => d.area)); return html`

Total Orignal Area: ${d3.format(",d")( totalOrginalArea )}

${ totalOrginalArea == totalDistoredArea ? `` : `Total Area After Distortions: ${d3.format(",d")( totalDistoredArea )} ` }

${Inputs.table( parsedSVG.parsedPaths.map((d, i) => ({ Id: d.id, "Original Area": d3.format(",d")(d.area), "% of Original Area": d3.format(".1%")(d.area / totalOrginalArea), "Assigned Value": d3.format(",d")(Object.values(areas)[i]), "Distorted Area": d3.format(",d")(aNewSVGPaths[i].area), "% of Distorted Area": d3.format(".1%")( aNewSVGPaths[i].area / totalDistoredArea ) })) )}`; }32:Tf15,//Parse the paths in the svg and return json with path array and parsed paths including x,y coordinates function fnSVGPathsParse(svg) { // https://github.com/xosystem/SVG-getTransformToElement-FIX if (!SVGElement.prototype.getTransformToElement) { SVGElement.prototype.getTransformToElement = function (_element) { return _element.getScreenCTM().inverse().multiply(this.getScreenCTM()); }; } //const paths = d3.select(svg).selectAll("path")[0]; //variable paths to an array collection of all 'paths' in the svg const paths = svg.querySelectorAll("path"); let parsedPaths = []; for (let i = 0; i < paths.length; i++) { let path = paths[i]; if (!path) continue; //determine the relative position of the path let pathMetrics = fnGetMetrics(path); let aCoordinates = []; // Get x,y along path https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength for (let i = 0; i < path.getTotalLength(); i++) { aCoordinates.push([ path.getPointAtLength(i).x, path.getPointAtLength(i).y ]); } // for // close the polygon by pushing initial point at end aCoordinates.push([path.getPointAtLength(0).x, path.getPointAtLength(0).y]); var pathID = path.id == "" ? i : path.id; var initialAreaJson = { id: pathID, area: Math.abs(d3.polygonArea(aCoordinates)) }; parsedPaths.push({ id: pathID, area: initialAreaJson.area, coordinates: aCoordinates, // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d originalD: path.attributes.d.value }); } // for return { paths: d3.selectAll(paths), parsedPaths: parsedPaths }; function fnGetMetrics(el) { function pointToLineDist(A, B, P) { var nL = Math.sqrt((B.x - A.x) * (B.x - A.x) + (B.y - A.y) * (B.y - A.y)); return ( Math.abs((P.x - A.x) * (B.y - A.y) - (P.y - A.y) * (B.x - A.x)) / nL ); } function dist(point1, point2) { var xs = 0, ys = 0; xs = point2.x - point1.x; xs = xs * xs; ys = point2.y - point1.y; ys = ys * ys; return Math.sqrt(xs + ys); } var b = el.getBBox(), objDOM = el, svgDOM = objDOM.ownerSVGElement; // Get the local to global matrix var matrix = svgDOM.getTransformToElement(objDOM).inverse(), oldp = [ [b.x, b.y], [b.x + b.width, b.y], [b.x + b.width, b.y + b.height], [b.x, b.y + b.height] ], pt, newp = [], obj = {}, i, pos = Number.POSITIVE_INFINITY, neg = Number.NEGATIVE_INFINITY, minX = pos, minY = pos, maxX = neg, maxY = neg; for (i = 0; i < 4; i++) { pt = svgDOM.createSVGPoint(); pt.x = oldp[i][0]; pt.y = oldp[i][1]; newp[i] = pt.matrixTransform(matrix); if (newp[i].x < minX) minX = newp[i].x; if (newp[i].y < minY) minY = newp[i].y; if (newp[i].x > maxX) maxX = newp[i].x; if (newp[i].y > maxY) maxY = newp[i].y; } // The next refers to the transformed object itself, not bbox // newp[0] - newp[3] are the transformed object's corner // points in clockwise order starting from top left corner obj.newp = newp; // array of corner points obj.width = pointToLineDist(newp[1], newp[2], newp[0]) || 0; obj.height = pointToLineDist(newp[2], newp[3], newp[0]) || 0; obj.toplen = dist(newp[0], newp[1]); obj.rightlen = dist(newp[1], newp[2]); obj.bottomlen = dist(newp[2], newp[3]); obj.leftlen = dist(newp[3], newp[0]); // The next refers to the transformed object's bounding box obj.BBx = minX; obj.BBy = minY; obj.BBx2 = maxX; obj.BBy2 = maxY; obj.BBwidth = maxX - minX; obj.BBheight = maxY - minY; return obj; } // get_metrics } //fnSVGPathsParse33:T18ab,//Distort images as a function of newValues determined by proportional areas; keeping all area constant function fnDataDrivenDistort(svgPaths) { const aNewValues = Object.keys(areas).map((id) => ({ id: id, value: areas[id] })); const aNewSVGPaths = fnAssignNewAreas(svgPaths, aNewValues); /* Use aNewSVGPaths array to d3-'update' the paths. Video on d3 selection logic: https://www.dashingd3js.com/lessons/d3-basic-general-update-pattern aNewSVGPaths is in the same order as the svg paths (arrrayPathCoordinates), so straight positional assignment will work. */ svgPaths.paths .data(aNewSVGPaths) .attr("d", (d, i) => "M" + d.coordinates.join("L") + "Z"); return aNewSVGPaths; //newValues are the new area values for each polygon in SVGPaths.parsedPath [NewArea1, NewArea2, ...] //Returns and array (aDistortedSVGs) of new polygons where total area is equal to total array of SVGPaths, //but each individual polygon's area in proportion to its respective newValue //Alogrithm is from the appendix in this paper: http://lambert.nico.free.fr/tp/biblio/Dougeniketal1985.pdf //and first implemented with cartograms here: https://github.com/aerrity/d3-cartogram function fnAssignNewAreas(SVGPaths, newValues) { var iterations = 8; var totalValue = d3.sum(newValues.map((inJson) => [inJson.value])); var aDistortedSVGs = JSON.parse(JSON.stringify(SVGPaths.parsedPaths)); // a deep clone of aPolygons var i = 0; while (i++ < iterations) { let arrDistortedAreas = aDistortedSVGs.map((d) => ({ id: d.id, area: Math.abs(d3.polygonArea(d.coordinates)) })); let totalArea = d3.sum(arrDistortedAreas.map((inJson) => [inJson.area])); let sizeErrorsTot = 0, sizeErrorsNum = 0; let aDistortionCalculations = aDistortedSVGs.map( (aDistortedPolygon, nthPolygon) => { let area = arrDistortedAreas.filter( (inJson) => inJson.id == aDistortedPolygon.id )[0].area, v = newValues.filter( (inJson) => inJson.id == aDistortedPolygon.id )[0].value, desired = (totalArea * v) / totalValue, radius = Math.sqrt(area / Math.PI), mass = Math.sqrt(desired / Math.PI) - radius, sizeError = Math.max(area, desired) / Math.min(area, desired); sizeErrorsTot += sizeError; sizeErrorsNum++; return { id: aDistortedPolygon.id, area: area, // https://github.com/d3/d3-polygon/blob/main/README.md#polygonCentroid centroid: d3.polygonCentroid(aDistortedPolygon.coordinates), value: v, desired: desired, radius: radius, mass: mass, sizeError: sizeError }; // for centroid: https://github.com/d3/d3-3.x-api-reference/blob/master/Polygon-Geom.md } ); // aDistortionCalculations = aDistortedSVGs.map.... var meanSizeError = sizeErrorsTot / sizeErrorsNum; //forceReductionFactor = 1 / (1 + meanSizeError); //From Dougenik's paper (http://lambert.nico.free.fr/tp/biblio/Dougeniketal1985.pdf): // This is for map topologies. //Set to minimum of 50% for images; // based on experimentation so that polygon displays even for very small values var forceReductionFactor = Math.max(0.5, 1 / (1 + meanSizeError)); let i1 = 0, i2, i3, delta, centroid, mass, radius, rSquared, dx, dy, distSquared, dist, Fij; while (i1 < aDistortedSVGs.length) { i2 = 0; while (i2 < aDistortedSVGs[i1].coordinates.length) { delta = [0, 0]; i3 = 0; let xCoordinate = 0; let yCoordinate = 1; while (i3 < aDistortionCalculations.length) { centroid = aDistortionCalculations[i3].centroid; mass = aDistortionCalculations[i3].mass; radius = aDistortionCalculations[i3].radius; rSquared = radius * radius; dx = aDistortedSVGs[i1].coordinates[i2][xCoordinate] - centroid[xCoordinate]; dy = aDistortedSVGs[i1].coordinates[i2][yCoordinate] - centroid[yCoordinate]; distSquared = dx * dx + dy * dy; dist = Math.sqrt(distSquared); //Via Pythagorean Theorem Fij = dist > radius ? mass * (radius / dist) : mass * (distSquared / rSquared) * (4 - 3 * (dist / radius)); delta[xCoordinate] += Fij * cosArctan(dy, dx); delta[yCoordinate] += Fij * sinArctan(dy, dx); i3++; } //while aDistortionCalculations.length aDistortedSVGs[i1].coordinates[i2][xCoordinate] += delta[xCoordinate] * forceReductionFactor; aDistortedSVGs[i1].coordinates[i2][yCoordinate] += delta[yCoordinate] * forceReductionFactor; i2++; } // while aDistortedSVGs[i1].length i1++; } // while aDistortedSVGs.length // break if we hit the target size error if (meanSizeError <= 1) break; } // while iterations //Update the final areas of the distorted polygons aDistortedSVGs .map((d) => ({ id: d.id, area: Math.abs(d3.polygonArea(d.coordinates)) })) .map( (distortedArea) => (aDistortedSVGs.filter( (distortedSVG) => distortedSVG.id == distortedArea.id )[0].area = distortedArea.area) ); return aDistortedSVGs; //Cosine ArcTangent https://www.rapidtables.com/math/trigonometry/arctan/cos-of-arctan.html function cosArctan(dx, dy) { if (dy === 0) return 0; var div = dx / dy; return dy > 0 ? 1 / Math.sqrt(1 + div * div) : -1 / Math.sqrt(1 + div * div); } // cosArctan //Sine ArcTangent https://www.rapidtables.com/math/trigonometry/arctan/sin-of-arctan.html function sinArctan(dx, dy) { if (dy === 0) return 1; var div = dx / dy; return dy > 0 ? div / Math.sqrt(1 + div * div) : -div / Math.sqrt(1 + div * div); } // sinArctan } // fnAssignNewAreas } // fnDataDrivenDistort34:T18ac,//Distort images as a function of newValues determined by proportional areas; keeping all area constant function fnDataDrivenDistort1(svgPaths) { const aNewValues = Object.keys(areas).map((id) => ({ id: id, value: areas[id] })); const aNewSVGPaths = fnAssignNewAreas(svgPaths, aNewValues); /* Use aNewSVGPaths array to d3-'update' the paths. Video on d3 selection logic: https://www.dashingd3js.com/lessons/d3-basic-general-update-pattern aNewSVGPaths is in the same order as the svg paths (arrrayPathCoordinates), so straight positional assignment will work. */ svgPaths.paths .data(aNewSVGPaths) .attr("d", (d, i) => "M" + d.coordinates.join("L") + "Z"); return aNewSVGPaths; //newValues are the new area values for each polygon in SVGPaths.parsedPath [NewArea1, NewArea2, ...] //Returns and array (aDistortedSVGs) of new polygons where total area is equal to total array of SVGPaths, //but each individual polygon's area in proportion to its respective newValue //Alogrithm is from the appendix in this paper: http://lambert.nico.free.fr/tp/biblio/Dougeniketal1985.pdf //and first implemented with cartograms here: https://github.com/aerrity/d3-cartogram function fnAssignNewAreas(SVGPaths, newValues) { var iterations = 8; var totalValue = d3.sum(newValues.map((inJson) => [inJson.value])); var aDistortedSVGs = JSON.parse(JSON.stringify(SVGPaths.parsedPaths)); // a deep clone of aPolygons var i = 0; while (i++ < iterations) { let arrDistortedAreas = aDistortedSVGs.map((d) => ({ id: d.id, area: Math.abs(d3.polygonArea(d.coordinates)) })); let totalArea = d3.sum(arrDistortedAreas.map((inJson) => [inJson.area])); let sizeErrorsTot = 0, sizeErrorsNum = 0; let aDistortionCalculations = aDistortedSVGs.map( (aDistortedPolygon, nthPolygon) => { let area = arrDistortedAreas.filter( (inJson) => inJson.id == aDistortedPolygon.id )[0].area, v = newValues.filter( (inJson) => inJson.id == aDistortedPolygon.id )[0].value, desired = (totalArea * v) / totalValue, radius = Math.sqrt(area / Math.PI), mass = Math.sqrt(desired / Math.PI) - radius, sizeError = Math.max(area, desired) / Math.min(area, desired); sizeErrorsTot += sizeError; sizeErrorsNum++; return { id: aDistortedPolygon.id, area: area, // https://github.com/d3/d3-polygon/blob/main/README.md#polygonCentroid centroid: d3.polygonCentroid(aDistortedPolygon.coordinates), value: v, desired: desired, radius: radius, mass: mass, sizeError: sizeError }; // for centroid: https://github.com/d3/d3-3.x-api-reference/blob/master/Polygon-Geom.md } ); // aDistortionCalculations = aDistortedSVGs.map.... var meanSizeError = sizeErrorsTot / sizeErrorsNum; //forceReductionFactor = 1 / (1 + meanSizeError); //From Dougenik's paper (http://lambert.nico.free.fr/tp/biblio/Dougeniketal1985.pdf): // This is for map topologies. //Set to minimum of 50% for images; // based on experimentation so that polygon displays even for very small values var forceReductionFactor = Math.max(0.5, 1 / (1 + meanSizeError)); let i1 = 0, i2, i3, delta, centroid, mass, radius, rSquared, dx, dy, distSquared, dist, Fij; while (i1 < aDistortedSVGs.length) { i2 = 0; while (i2 < aDistortedSVGs[i1].coordinates.length) { delta = [0, 0]; i3 = 0; let xCoordinate = 0; let yCoordinate = 1; while (i3 < aDistortionCalculations.length) { centroid = aDistortionCalculations[i3].centroid; mass = aDistortionCalculations[i3].mass; radius = aDistortionCalculations[i3].radius; rSquared = radius * radius; dx = aDistortedSVGs[i1].coordinates[i2][xCoordinate] - centroid[xCoordinate]; dy = aDistortedSVGs[i1].coordinates[i2][yCoordinate] - centroid[yCoordinate]; distSquared = dx * dx + dy * dy; dist = Math.sqrt(distSquared); //Via Pythagorean Theorem Fij = dist > radius ? mass * (radius / dist) : mass * (distSquared / rSquared) * (4 - 3 * (dist / radius)); delta[xCoordinate] += Fij * cosArctan(dy, dx); delta[yCoordinate] += Fij * sinArctan(dy, dx); i3++; } //while aDistortionCalculations.length aDistortedSVGs[i1].coordinates[i2][xCoordinate] += delta[xCoordinate] * forceReductionFactor; aDistortedSVGs[i1].coordinates[i2][yCoordinate] += delta[yCoordinate] * forceReductionFactor; i2++; } // while aDistortedSVGs[i1].length i1++; } // while aDistortedSVGs.length // break if we hit the target size error if (meanSizeError <= 1) break; } // while iterations //Update the final areas of the distorted polygons aDistortedSVGs .map((d) => ({ id: d.id, area: Math.abs(d3.polygonArea(d.coordinates)) })) .map( (distortedArea) => (aDistortedSVGs.filter( (distortedSVG) => distortedSVG.id == distortedArea.id )[0].area = distortedArea.area) ); return aDistortedSVGs; //Cosine ArcTangent https://www.rapidtables.com/math/trigonometry/arctan/cos-of-arctan.html function cosArctan(dx, dy) { if (dy === 0) return 0; var div = dx / dy; return dy > 0 ? 1 / Math.sqrt(1 + div * div) : -1 / Math.sqrt(1 + div * div); } // cosArctan //Sine ArcTangent https://www.rapidtables.com/math/trigonometry/arctan/sin-of-arctan.html function sinArctan(dx, dy) { if (dy === 0) return 1; var div = dx / dy; return dy > 0 ? div / Math.sqrt(1 + div * div) : -div / Math.sqrt(1 + div * div); } // sinArctan } // fnAssignNewAreas } // fnDataDrivenDistort35:[{"id":"65f07038be28d172668cab684b98ade3717de154fc7dc1a7bb4962b141732ebb700d3490a2716636f2afc0a6e29374c7707f5b405458a41c3a8aa3d3de4203c8","href":"https://static.observableusercontent.com/files/65f07038be28d172668cab684b98ade3717de154fc7dc1a7bb4962b141732ebb700d3490a2716636f2afc0a6e29374c7707f5b405458a41c3a8aa3d3de4203c8","name":"robotarm.svg","type":"image/svg+xml","lastModified":1632013388235.23,"size":4481},{"id":"5a15d720732ffc600626622492da8de3abaefb108eb175a51f70b0c3c6290903d8798d548d8e16b51f69b73fd1c136d38285574c6aaa2e7eb169f5beffdbfc80","href":"https://static.observableusercontent.com/files/5a15d720732ffc600626622492da8de3abaefb108eb175a51f70b0c3c6290903d8798d548d8e16b51f69b73fd1c136d38285574c6aaa2e7eb169f5beffdbfc80","name":"face.svg","type":"image/svg+xml","lastModified":1632013388238.295,"size":2135},{"id":"8ee643ead2bde2b63aaf4ba1ce46350d99b3fd68c6c156ca7852a2a8e632587c56dbf7f992535f31d8ae3a19ec741140f4919865a3f31cd024af0a099af4c6d3","href":"https://static.observableusercontent.com/files/8ee643ead2bde2b63aaf4ba1ce46350d99b3fd68c6c156ca7852a2a8e632587c56dbf7f992535f31d8ae3a19ec741140f4919865a3f31cd024af0a099af4c6d3","name":"sailboat.svg","type":"image/svg+xml","lastModified":1632013388290.719,"size":1898},{"id":"2caeab8c65caa61fe9bb4e9a35fec0fea96f7ae5ad2690d396501bdcd9fab548c0939c9bfc04f8a4cf845af546e587c96b744e49fa58221b428f97abc157aef2","href":"https://static.observableusercontent.com/files/2caeab8c65caa61fe9bb4e9a35fec0fea96f7ae5ad2690d396501bdcd9fab548c0939c9bfc04f8a4cf845af546e587c96b744e49fa58221b428f97abc157aef2","name":"truck.svg","type":"image/svg+xml","lastModified":1632013388291.24,"size":2915}] 2f:{"id":"c9bc98ad3aca0ae3","slug":"continuous-area-vector-graphics","title":"Continuous Area Vector Graphics","thumbnail":"c4176bdc0331b8988800600817c43e70f3d90700b801254f6af78d6d2654f2a6","access_level":"public","create_time":"$D2021-09-19T00:34:41.458Z","update_time":"$D2023-02-07T18:33:05.191Z","view_time":null,"first_public_time":"$D2021-09-20T21:23:40.336Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"f57b9f8a19d28778","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":"starter_2024","bio":"Designing and Engineering a Better Tomorrow"},"version":363,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null,"bio":"Designing and Engineering a Better Tomorrow"}],"members":[{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Continuous Area Vector Graphics","cells":[{"id":0,"value":"md`# Continuous Area Vector Graphics\nInspired by [Dougenik, J. A., Chrisman, N. R., & Niemeyer, D. R. (1985). An algorithm to construct continuous area cartograms. The Professional Geographer, 37(1), 75-81.](http://lambert.nico.free.fr/tp/biblio/Dougeniketal1985.pdf)\n\n## Usage: \nSelect an SVG file and assign a new value to a [path(s)](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path) to distort the image. Initial values are determined with [d3.polygonArea](https://github.com/d3/d3-polygon/blob/v3.0.1/README.md#polygonArea).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"viewof svgText = { \n \n const fileAttachments = {face: await FileAttachment(\"face.svg\").text(),\n truck: await FileAttachment(\"truck.svg\").text(),\n sailboat: await FileAttachment(\"sailboat.svg\").text(),\n robotarm: await FileAttachment(\"robotarm.svg\").text()\n }\n \n return Inputs.select(Object.keys(fileAttachments),\n {format: file => `${file}.svg`,\n label: \"SVG File\",\n valueof: file => fileAttachments[file]\n }\n );\n\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"svg = html`${svgText}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof areas = \n{ \n reset;\n \n const parsedPaths = parsedSVG.parsedPaths; \n const totalArea = d3.sum(parsedSVG.parsedPaths, d => d.area);\n\n return inputsGroup(\n [\n parsedPaths.map(p => slider({value: p.area,\n min: 1,\n max: p.area,\n description: `Value for ${p.id}`, \n format: v => `${d3.format(\",d\")(v)}` \n })\n ) // map\n ],\n [ parsedPaths.map(p => p.id)],\n { objOnly: true }\n ) // inputsGroup\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"viewof reset = Inputs.button(\"Reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"parsedSVG = fnSVGPathsParse(svg);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {inputsGroup} from \"@bumbeishvili/input-groups\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"d3 = require(\"d3@4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 30:"$2f:body" 2b:E{"digest":"NEXT_REDIRECT;replace;/@mariodelgadosr/continuous-area-vector-graphics;307;"}