31:T448,viewof chart = { const { css, layout, containerDivId, usTopology, } = mapProps; const { topoJSONBaseWidth: width, topoJSONBaseHeight: height, } = layout; const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .classed(containerDivId, true) .attr('transform', `translate(${-0.1 * width},0)`) const states = svg .append('g') .classed(css.groups.states, true) const arrows = svg .append('g') .classed(css.groups.arrows, true); const bubbles = svg .append('g') .classed(css.groups.bubbles, true); const voronoi = svg .append('g') .classed(css.groups.voronoi, true); const stateLabels = svg .append('g') .classed(css.groups.stateLabels, true); const bubbleDrawFunction = is3DBubble ? drawBubblesWith3DEffect : drawBubbles; drawArrows(arrows); isCartogram ? bubbleDrawFunction(bubbles, svg) : drawStates(states); drawVoronoi(voronoi, arrows, bubbles, stateLabels, width, height) drawStateLabels(stateLabels); return svg.node(); }32:T81c,function arrowPathFromDatum(datum) { // lookup origin and destination centroids function randomSpread() { return (Math.random() * originSpreadPx) - (originSpreadPx/2); } const dynamicOrigin = datum.Total > 0 ? 'Origin' : 'Destination'; const dynamicDestination = datum.Total > 0 ? 'Destination' : 'Origin'; const origin = new Victor(...centroidLookup[datum[dynamicOrigin]]).clone(); const destination = new Victor(...centroidLookup[datum[dynamicDestination]]); if (originSpreadPx) { origin.add(new Victor(randomSpread(), randomSpread())); } // compute the vector origin -> destination, and get its length const vLength = destination .clone() .subtract(origin) .length(); // get some distance along the length, weighted by arrowMidPointWeight const weightedLength = vLength * arrowMidPointWeight; // lookup the mean resultant vector from the origin (state), // and find the path midpoint by offsetting along the mean resultant by the weighted length const vectorToMidPoint = stateMeanResultantVectors[datum[dynamicOrigin]] .clone() .multiply(new Victor(weightedLength, weightedLength)); // this is the midpoint that adds some curve const mid = origin.clone().add(vectorToMidPoint); // offset the destination vector to avoid overlapping the destination bubble/label const halfRadius = radiusScale(populationChangeLookup[datum[dynamicDestination]][colorPropName]) * destinationArrowPadding; const displaceAwayFromDestination = mid.clone().subtract(destination) // vector destination -> mid .normalize() // normalize to 1 .multiply(new Victor(halfRadius, halfRadius)); // add the distance to displace away from the destination const correctedDestination = destination.clone().add(displaceAwayFromDestination); // graduated stroke on a curved path function from: // @stuartathompson/standalone-function-for-a-graduated-stroke-on-a-curved-path return curvedPath([ origin.toArray(), mid.toArray(), correctedDestination.toArray(), ], arrowSize(Math.abs(datum.Total))) }33:T81c,function drawVoronoi(selection, arrowGroup, bubbleGroup, labelGroup, width, height) { const { transition: { duration } } = mapProps; // voronoi const cells = d3.voronoi() .x((datum) => { return centroidLookup[datum.state][0]; }) .y((datum) => { return centroidLookup[datum.state][1]; }) .extent([[0, 0], [width, height]]) .polygons(populationChange); selection .selectAll('path') .data(cells) .enter() .append('path') .style('pointer-events', 'all') .style("stroke", showVoronoi ? 'gray' : 'transparent') .style('fill', 'transparent') .attr('d', (d) => { return `M${d.join('L')}Z`; }) .on('mouseover', (polygon) => { arrowGroup.selectAll(`:not(.${cssNameLookup[polygon.data.state]})`) .transition() .duration(duration) .style('opacity', 0); arrowGroup.selectAll(`.${cssNameLookup[polygon.data.state]}`) .transition() .duration(duration) .style('opacity', arrowHighlightOpacity); bubbleGroup .selectAll('circle') .transition() .duration(duration) .style('opacity', bubbleHiddenOpacity); bubbleGroup.selectAll(`${connectedStatesLookup[polygon.data.state]}`) .transition() .duration(duration) .style('opacity', bubbleDefaultOpacity); labelGroup.selectAll('*') .transition() .duration(duration) .style('opacity', bubbleHiddenOpacity); labelGroup.selectAll(`${connectedStatesLookup[polygon.data.state]}`) .transition() .duration(duration) .style('opacity', labelDefaultOpacity); }) .on('mouseout', () => { bubbleGroup.selectAll('circle') .transition() .duration(duration) .style('opacity', bubbleDefaultOpacity); labelGroup.selectAll('*') .transition() .duration(duration) .style('opacity', labelDefaultOpacity); arrowGroup.selectAll(`*`) .transition() .duration(duration) .style('opacity', arrowDefaultOpacity); }); }34:[] 2f:{"title":"United States Population Migration","cells":[{"id":0,"value":"md`# United States Population Migration\nMigration arrows represent State-to-State migrations from 2016 - 2017. Colors represent Percent Change in Population from 2010 - 2018. Hover to highlight migrations for each state.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2137,"value":"html`

Population Decrease since 2010

\\<1% Change in Population

Population Increase since 2010

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1225,"value":"md`### Controls`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1794,"value":"viewof migrationTableString = radio({\n title: 'Arrow Directions & Types',\n options: [\n { label: 'All Outward Migration Directions', value: 'allMigration' },\n { label: 'All Inward Migration Directions', value: 'allInwardMigration' },\n { label: 'Net Outward Migration', value: 'nonZeroOutwardMigration' },\n { label: 'Net Inward Migration', value: 'nonZeroInwardMigration' },\n { label: `Top ${nBiDirectional} Bi-Directional Migrations`, value: 'biDirectionalMigrations' },\n ],\n value: 'nonZeroOutwardMigration'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1200,"value":"viewof isCartogram = checkbox({\n title: 'Cartogram/Choropleth',\n options: [{ value: 'toggled', label: \"Show Population change as bubbles\" }],\n value: 'toggled'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2023,"value":"viewof is3DBubble = checkbox({\n title: 'Render bubbles with 3D effect',\n options: [{ value: 'toggled', label: \"Adds a color gradient to each bubble, which can help with labeling\" }],\n value: 'toggled'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1924,"value":"viewof isBubbleScaled = checkbox({\n title: 'Scale bubbles to color property',\n options: [{ value: 'toggled', label: \"Scales bubble sizes by the color prop\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"viewof arrowMidPointWeight = slider({\n title: \"Arrow clustering\", \n min: 0, \n max: 1, \n step: 0.1,\n value: 0.4,\n format: \".0\",\n description: \"0 for straight arrows, 1 for most curved arrows\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1436,"value":"viewof originSpreadPx = slider({\n title: \"Randomize arrow origin\", \n min: 0, \n max: 30, \n step: 1,\n value: 5,\n description: \"Adds some randomness to the origin of arrows so they appear to come from everywhere within a state/bubble\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1636,"value":"viewof destinationArrowPadding = slider({\n title: \"Padding between arrow and destination bubble\", \n min: 0, \n max: 1, \n step: 0.05,\n value: 0.75,\n description: \"Pushes the arrow endpoint away from the destination as a function of the radius\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1393,"value":"viewof showVoronoi = checkbox({\n title: 'Show Voronoi cells',\n options: [{ value: 'toggled', label: \"Show Voronoi cells that handle mouse events\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"import { allMigration, nonZeroOutwardMigration, nonZeroInwardMigration, biDirectionalMigrations, populationChange } from '48e2cf63048c4fd1'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1916,"value":"md`Choose data based on Migration Vector Display radio`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1867,"value":"nBiDirectional = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1824,"value":"migration = migrationLookup[migrationTableString]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1907,"value":"migrationLookup = ({\n 'allMigration': allMigration,\n 'allInwardMigration': allMigration.map((d) => ({ ...d, Total: -d.Total })),\n 'nonZeroOutwardMigration': nonZeroOutwardMigration,\n 'nonZeroInwardMigration': nonZeroInwardMigration,\n 'biDirectionalMigrations': biDirectionalMigrations.slice(0, nBiDirectional * 2),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"populationChangeLookup = _.keyBy(populationChange, 'state')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1520,"value":"stateAbbreviationLookup = _.set(\n _.invert(await d3.json('https://gist.githubusercontent.com/mshafrir/2646763/raw/8b0dbb93521f5d6889502305335104218454c2bf/states_hash.json')),\n 'District of Columbia', 'DC') // manually add DC with 'of' not capitalized","pinned":false,"hidden":false,"mode":"ojs"},{"id":1774,"value":"md`Name of the property to govern bubble/choropleth color`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1874,"value":"colorPropName = 'Percent Population Change'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1499,"value":"md`### Compute centroids`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1505,"value":"md`Use geoPath().centroid() to get geographic centroids`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":"function getGeoCentroidLookup() {\n return topojson.feature(mapProps.usTopology, mapProps.usTopology.objects.states)\n .features\n .reduce((acc, feature) => {\n acc[feature.properties.location_name] = mapProps.path.centroid(feature);\n return acc;\n }, {})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1509,"value":"md`For the bubble case, take the geographic centroids, and force pack them to avoid overlaps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"function getBubbleCentroidLookup() {\n // shape data for force packing\n const nodes = topojson.feature(mapProps.usTopology, mapProps.usTopology.objects.states)\n .features\n .map((feature) => {\n const coords = mapProps.path.centroid(feature);\n return {\n x: coords[0],\n y: coords[1],\n location_name: feature.properties.location_name,\n };\n });\n\n // pack\n return (forcePackNodesToRadii({\n nodes,\n radiusAccessor: (d) => (radiusScale(populationChangeLookup[d.location_name][colorPropName])),\n radiusPadding: 5,\n }))\n // reshape back to the array format used in this notebook\n .reduce((acc, node) => {\n acc[node.location_name] = [node.x, node.y];\n return acc;\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1511,"value":"md`Assign centroid lookup based on user selection of Choropleth/Cartogram`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"centroidLookup = isCartogram ? getBubbleCentroidLookup() : getGeoCentroidLookup()","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"function cleanCssName(string) {\n return string.replace(/^[^a-z]+|[^\\w:.-]+/gi, \"\") \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1676,"value":"md`### State name -> css name lookup\n(remove spaces in state names)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1550,"value":"cssNameLookup = d3.nest()\n .key(d => d.state)\n .rollup((leafState) => { return cleanCssName(leafState[0].state); })\n .object(populationChange)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"md `### Basemap`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1149,"value":"choroplethColorRange = [bubbleColorRange0, bubbleColorRange1, bubbleColorRange1, bubbleColorRange2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1997,"value":"viewof bubbleColorRange0 = colorPicker('#d4a1a9')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2000,"value":"viewof bubbleColorRange1 = colorPicker('white')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2002,"value":"viewof bubbleColorRange2 = colorPicker('#a7c9db')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1145,"value":"choroplethColorScale = d3.scaleThreshold()\n .domain([colorPropDomain[1], -0.001, 0.001, colorPropDomain[1]])\n .range(choroplethColorRange)","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"cssProps = ({\n svgClass: 'us_map',\n groups: {\n states: 'states',\n bubbles: 'bubbles',\n arrows: 'arrows',\n voronoi: 'voronoi',\n stateLabels: 'state_labels',\n },\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"mapProps = ({\n path: d3.geoPath(),\n containerDivId: 'us_map', // for use outside of observable\n layout: {\n topoJSONBaseWidth: 900, // width scaling associated with the topojson\n topoJSONBaseHeight: 550, // width scaling associated with the topojson\n },\n css: cssProps,\n transition: { duration: 500 },\n usTopology: (await d3.json('https://gist.githubusercontent.com/Ryshackleton/b3c0f0fa229c5d32462c9897becdb5f1/raw/56b86a43f10af5382aaf1c2e30e5a338681a699c/usa-topo-fips.json')),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"function drawStates(stateGroup) {\n const { transition: { duration } } = mapProps\n stateGroup\n .selectAll('path')\n .data(\n topojson.feature(mapProps.usTopology, mapProps.usTopology.objects.states).features,\n (datum) => (datum.properties.location_id),\n )\n .enter()\n .append('path')\n .attr('class', (loc) => { return cssNameLookup[loc.properties.location_name]; })\n .attr('d', mapProps.path)\n .style('fill', (loc) => {\n return isCartogram\n ? 'white'\n : choroplethColorScale(populationChangeLookup[loc.properties.location_name][colorPropName]);\n })\n .style('stroke', () => {\n return isCartogram\n ? 'transparent'\n : 'gray';\n })\n .style('stroke-width', '0.25px');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`### Arrows`","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"md`Use Victor.js to compute a mean vector for each state by averaging their outgoing vector to every other city. This allows us to cluster the vectors around the mean resultant vector for each state.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"Victor = require('https://bundle.run/victor@1.1.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"stateMeanResultantVectors = d3.nest()\n .key((datum) => { return datum.Origin; })\n .rollup((all) => {\n // Victor.js - note that these Victor functions ALWAYS mutate unless the Victor is cloned\n const mean = new Victor(0,0);\n all.forEach((state) => {\n const origin = new Victor(...centroidLookup[state.Origin]);\n const destination = new Victor(...centroidLookup[state.Destination]);\n mean.add(destination.clone().subtract(origin));\n });\n mean.normalize();\n return mean;\n })\n .object(migration)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1458,"value":"md`Styling props and sizing of arrows`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"arrowColorRange = [arrowColorRange0, arrowColorRange1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1977,"value":"viewof arrowColorRange0 = colorPicker('lightgrey')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1988,"value":"viewof arrowColorRange1 = colorPicker('#333333')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1454,"value":"md`Create individual color scales for each state, such that the largest migrations have the darkest arrows for each state, rather than using a color scale for all arrows, which washes out the color scale for individual states`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"stateMigrationLocalColorScaleLookup = d3.nest()\n .key((datum) => { return datum.Origin; })\n .rollup((all) => {\n return d3.scaleLinear()\n .domain(d3.extent(all, d => Math.abs(d.Total)))\n .range(arrowColorRange); \n })\n .object(migration)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1109,"value":"arrowHighlightOpacity = 0.85","pinned":false,"hidden":false,"mode":"ojs"},{"id":1113,"value":"arrowDefaultOpacity = 0.075","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"arrowSize = d3.scaleLinear()\n .domain(d3.extent(migration, (datum) => { return Math.abs(datum.Total); }))\n .range([10, 40])","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"md`Draw the path arrows, creating the 'grouped curves' effect by pulling each state's outward migration vector toward the mean resultant for that state. The heavy lifting of of drawing the nice arrows from 3 points has been done [in this excellent notebook](https://observablehq.com/@stuartathompson/standalone-function-for-a-graduated-stroke-on-a-curved-path). Thanks Stuart!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"import { curvedPath } from '@stuartathompson/standalone-function-for-a-graduated-stroke-on-a-curved-path'","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"function drawArrows(selection) {\n selection.selectAll('path')\n .remove();\n \n selection\n .selectAll('path')\n .data(migration).enter()\n .append('path')\n .attr('class', (datum) => { return cleanCssName(datum.Origin); })\n .attr('d', arrowPathFromDatum)\n .attr('stroke', 'lightgray')\n .style('stroke-width', '0.5px')\n .style('pointer-events', 'none')\n .attr('fill', (datum) => {\n return stateMigrationLocalColorScaleLookup[datum.Origin](Math.abs(datum.Total));\n })\n .attr('opacity', arrowDefaultOpacity)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`### Bubbles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"bubbleDefaultOpacity = 0.9","pinned":false,"hidden":false,"mode":"ojs"},{"id":1614,"value":"bubbleHiddenOpacity = 0.15","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"colorPropDomain = d3.extent(populationChange, d => d[colorPropName])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1493,"value":"md`Could scale bubbles here according to some property, but similarly sized bubbles make a nice Cartogram`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"radiusScale = d3.scaleSqrt()\n .domain([colorPropDomain[0], colorPropDomain[1]])\n .range(isBubbleScaled ? [10, 30] : [20, 20])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1302,"value":"import { forcePackNodesToRadii } from 'c8be1d3ac1ee76b5'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2007,"value":"import { render3DBubbles } from '@ryshackleton/3d-bubble-gradient'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2026,"value":"function drawBubblesWith3DEffect(selection, svg) {\n render3DBubbles({\n svgRootSelection: svg,\n bubbleTargetSelection: selection,\n data: populationChange,\n colorAccessor: (pop) => { return choroplethColorScale(pop[colorPropName]); },\n otherBubbleStyles: {\n 'opacity': bubbleDefaultOpacity,\n 'stroke': 'lightgray',\n 'stroke-width': '0.25px',\n },\n radiusAccessor: (pop) => { return radiusScale(pop[colorPropName]); },\n xAccessor: (pop) => { return centroidLookup[pop.state][0]; },\n yAccessor: (pop) => { return centroidLookup[pop.state][1]; },\n // gradient style props\n lightDirectionX: 50,\n lightDirectionY: 50,\n // gradientShineColor: 'white',\n // gradientFocus: gradientStrength,\n })\n .attr('class', (datum) => { return cssNameLookup[datum.state]; });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"function drawBubbles(selection, svg) {\n selection\n .selectAll('circle')\n .data(populationChange)\n .enter()\n .append('circle')\n .attr('class', (datum) => { return cssNameLookup[datum.state]; })\n .style('fill', (pop) => { return choroplethColorScale(pop[colorPropName]); })\n .style('opacity', bubbleDefaultOpacity)\n .style('stroke', 'lightgray')\n .style('stroke-width', '1px')\n .attr('cx', (pop) => { return centroidLookup[pop.state][0]; })\n .attr('cy', (pop) => { return centroidLookup[pop.state][1]; })\n .attr('r', (pop) => { return radiusScale(pop[colorPropName]); });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1377,"value":"md`### Voronoi hovers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1554,"value":"connectedStatesLookup = d3.nest()\n .key(d => d.Origin)\n .rollup((leafStates) => {\n return leafStates.reduce((cssSelector, state, index) => {\n return index\n ? `${cssSelector},.${cssNameLookup[state.Destination]}`\n : `.${cssNameLookup[state.Origin]},.${cssNameLookup[state.Destination]}`;\n }, '');\n })\n .object(migration)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1380,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1523,"value":"md`### Labels`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1602,"value":"labelDefaultOpacity = 0.9","pinned":false,"hidden":false,"mode":"ojs"},{"id":1525,"value":"function drawStateLabels(selection) {\n selection.selectAll('text')\n .data(populationChange)\n .enter()\n .append('text')\n .attr('transform', (datum) => {\n const xy = centroidLookup[datum.state];\n return `translate(${xy[0]},${xy[1]})`;\n })\n .attr('class', (datum) => { return cssNameLookup[datum.state]; })\n .style('pointer-events', 'none')\n .style('alignment-baseline', 'central')\n .style('text-anchor', 'middle')\n .style('fill', 'gray')\n .style('font-size', 14)\n .style('font-weight', 'bold')\n .style('font', 'Arial')\n .style('opacity', labelDefaultOpacity)\n .text((datum) => { return datum.map_id; });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"import {checkbox, radio, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1980,"value":"import { colorPicker } from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}