2e:null 2f:["$","title",null,{"children":"Generated Colonies | Muxing's space | Observable"}] 34:T4cf,chart2 = { const noise = createPerlinNoise(); const svg = d3 .create("svg") .attr("width", config.width) .attr("height", config.height) .attr("viewBox", [0, 0, config.width, config.height]) .style("background", config.backgroundColor); const defs = svg.append("defs"); // Merge config with controls const effectiveConfig = { ...config, baseColonySize: controls.baseColonySize, yellowProbability: controls.yellowProbability, textureIntensity: controls.textureIntensity, granularIntensity: controls.granularIntensity, fibrousIntensity: controls.fibrousIntensity, edgeVariation: controls.edgeVariation, shapePoints: controls.shapePoints, highlightSize: controls.highlightSize, highlightIntensity: controls.highlightIntensity, centerGlowSize: controls.centerGlowSize, blurIntensities: { light: 3 * controls.blurStrength, medium: 6 * controls.blurStrength, strong: 9 * controls.blurStrength } }; createFilters(defs, effectiveConfig); const proj = projection; const colonies = generateColonies(projectedStateData, proj, effectiveConfig); renderColonies(svg, defs, colonies, noise, effectiveConfig); return svg.node(); }35:Tf3c,viewof controls = { const form = html``; // Get the form value as an object const getValue = () => ({ baseColonySize: +form.baseColonySize.value, yellowProbability: +form.yellowProbability.value, textureIntensity: +form.textureIntensity.value, granularIntensity: +form.granularIntensity.value, fibrousIntensity: +form.fibrousIntensity.value, edgeVariation: +form.edgeVariation.value, shapePoints: +form.shapePoints.value, highlightSize: +form.highlightSize.value, highlightIntensity: +form.highlightIntensity.value, centerGlowSize: +form.centerGlowSize.value, blurStrength: +form.blurStrength.value }); // Set initial value form.value = getValue(); // Update outputs and dispatch input event when sliders change form.oninput = () => { form.baseColonySizeOut.value = form.baseColonySize.value; form.yellowProbabilityOut.value = form.yellowProbability.value; form.textureIntensityOut.value = form.textureIntensity.value; form.granularIntensityOut.value = form.granularIntensity.value; form.fibrousIntensityOut.value = form.fibrousIntensity.value; form.edgeVariationOut.value = form.edgeVariation.value; form.shapePointsOut.value = form.shapePoints.value; form.highlightSizeOut.value = form.highlightSize.value; form.highlightIntensityOut.value = form.highlightIntensity.value; form.centerGlowSizeOut.value = form.centerGlowSize.value; form.blurStrengthOut.value = form.blurStrength.value; // Update the form value and dispatch event form.value = getValue(); form.dispatchEvent(new CustomEvent("input")); }; return form; }36:T40c,config = ({ width: 800, height: 800, // Colony appearance colonyOpacity: 0.9, baseColonySize: 80, // Color controls pinkColor: { r: 255, g: 210, b: 230 }, yellowColor: { r: 255, g: 245, b: 210 }, yellowProbability: 0.25, // Texture controls textureIntensity: 1.0, granularIntensity: 0.9, fibrousIntensity: 0.4, // Blur and glow controls blurIntensities: { light: 3, medium: 6, strong: 9 }, // Layer controls layers: [ { scale: 1.05, opacity: 0.5, blur: "strongBlur", timeOffset: 0 }, { scale: 0.95, opacity: 0.65, blur: "mediumBlur", timeOffset: 0.3 }, { scale: 0.85, opacity: 0.75, blur: "lightBlur", timeOffset: 0.6 } ], // Shape complexity shapePoints: 80, edgeVariation: 22, // Highlight controls highlightSize: 0.25, highlightIntensity: 0.6, highlightOffset: 10, // Center glow controls centerGlowSize: 0.5, centerGlowIntensity: 0.8, // Background backgroundColor: "transparent" // backgroundColor: "black" // background: "none" })37:Tbf9,function renderColonies(svg, defs, colonies, noise, config) { const layers = config.layers; const colonyGroups = svg .selectAll(".colony") .data(colonies) .enter() .append("g") .attr("class", "colony") .attr("transform", (d) => `translate(${d.x}, ${d.y})`); // Base layers with blur layers.forEach((layer, layerIndex) => { colonyGroups .append("path") .attr("class", `layer-${layerIndex}`) .attr("fill", (d) => `rgb(${d.color.r}, ${d.color.g}, ${d.color.b})`) .attr("opacity", layer.opacity) .attr("filter", `url(#${layer.blur})`) .attr("d", (d) => generateColonyPath(d, layer.scale, layer.timeOffset, noise, config) ); }); // Main textured layer colonyGroups .append("path") .attr("class", "textured-layer") .attr("fill", (d) => `rgb(${d.color.r}, ${d.color.g}, ${d.color.b})`) .attr("opacity", config.colonyOpacity) .attr("filter", (d) => `url(#${d.textureFilter}) url(#granular)`) .attr("d", (d) => generateColonyPath(d, 0.75, 0.2, noise, config)); // Fibrous overlay colonyGroups .append("path") .attr("class", "fibrous-layer") .attr("fill", (d) => d.isYellow ? "rgb(240, 220, 170)" : "rgb(245, 190, 210)" ) .attr("opacity", config.fibrousIntensity) .attr("filter", "url(#fibrous)") .attr("d", (d) => generateColonyPath(d, 0.65, 0.5, noise, config)); // Radial gradients for centers colonyGroups.each(function (d) { const group = d3.select(this); const radialGrad = defs .append("radialGradient") .attr("id", `radial-${d.id}`); radialGrad .append("stop") .attr("offset", "0%") .attr( "stop-color", d.isYellow ? "rgb(255, 250, 230)" : "rgb(255, 230, 245)" ) .attr("stop-opacity", config.centerGlowIntensity); radialGrad .append("stop") .attr("offset", "50%") .attr("stop-color", `rgb(${d.color.r}, ${d.color.g}, ${d.color.b})`) .attr("stop-opacity", 0.6); radialGrad .append("stop") .attr("offset", "100%") .attr("stop-color", `rgb(${d.color.r}, ${d.color.g}, ${d.color.b})`) .attr("stop-opacity", 0); group .append("circle") .attr("r", d.size * config.centerGlowSize) .attr("fill", `url(#radial-${d.id})`) .attr("filter", "url(#lightBlur)"); }); // Highlights colonyGroups.each(function (d) { const group = d3.select(this); const gradient = defs .append("radialGradient") .attr("id", `highlight-${d.id}`); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", `rgba(255, 255, 250, ${config.highlightIntensity})`); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", "rgba(255, 255, 240, 0)"); group .append("circle") .attr("cx", d.highlightX) .attr("cy", d.highlightY) .attr("r", d.size * config.highlightSize) .attr("fill", `url(#highlight-${d.id})`) .attr("filter", "url(#mediumBlur)"); }); }38:Tead,function createFilters(defs, config) { const createTextureFilter = (id, baseFreq, numOctaves, seed) => { const filter = defs .append("filter") .attr("id", id) .attr("x", "-50%") .attr("y", "-50%") .attr("width", "200%") .attr("height", "200%"); filter .append("feTurbulence") .attr("type", "fractalNoise") .attr("baseFrequency", baseFreq) .attr("numOctaves", numOctaves) .attr("seed", seed) .attr("result", "turbulence"); filter .append("feColorMatrix") .attr("in", "turbulence") .attr("type", "saturate") .attr("values", 0.3 * config.textureIntensity) .attr("result", "colormatrix"); filter .append("feComposite") .attr("in", "colormatrix") .attr("in2", "SourceGraphic") .attr("operator", "in") .attr("result", "clipped"); filter .append("feBlend") .attr("in", "SourceGraphic") .attr("in2", "clipped") .attr("mode", "multiply"); }; createTextureFilter("texture1", "0.08", 4, 1); createTextureFilter("texture2", "0.12", 3, 42); createTextureFilter("texture3", "0.05", 5, 123); // Fibrous texture const fibrousFilter = defs .append("filter") .attr("id", "fibrous") .attr("x", "-50%") .attr("y", "-50%") .attr("width", "200%") .attr("height", "200%"); fibrousFilter .append("feTurbulence") .attr("type", "fractalNoise") .attr("baseFrequency", "0.3 0.02") .attr("numOctaves", 3) .attr("seed", 99) .attr("result", "turbulence"); fibrousFilter .append("feDisplacementMap") .attr("in", "SourceGraphic") .attr("in2", "turbulence") .attr("scale", 3) .attr("xChannelSelector", "R") .attr("yChannelSelector", "G") .attr("result", "displacement"); fibrousFilter .append("feComposite") .attr("in", "displacement") .attr("in2", "SourceGraphic") .attr("operator", "in") .attr("result", "clipped"); fibrousFilter .append("feGaussianBlur") .attr("in", "clipped") .attr("stdDeviation", 0.5); // Granular texture const granularFilter = defs .append("filter") .attr("id", "granular") .attr("x", "-50%") .attr("y", "-50%") .attr("width", "200%") .attr("height", "200%"); granularFilter .append("feTurbulence") .attr("type", "turbulence") .attr("baseFrequency", "0.9") .attr("numOctaves", 2) .attr("seed", 777) .attr("result", "noise"); granularFilter .append("feColorMatrix") .attr("in", "noise") .attr("type", "saturate") .attr("values", "0") .attr("result", "desaturate"); granularFilter .append("feComponentTransfer") .attr("in", "desaturate") .attr("result", "contrast") .append("feFuncA") .attr("type", "linear") .attr("slope", 2 * config.granularIntensity) .attr("intercept", "-0.5"); granularFilter .append("feComposite") .attr("in", "contrast") .attr("in2", "SourceGraphic") .attr("operator", "in") .attr("result", "clipped"); granularFilter .append("feBlend") .attr("in", "SourceGraphic") .attr("in2", "clipped") .attr("mode", "multiply"); // Blur filters defs .append("filter") .attr("id", "lightBlur") .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", config.blurIntensities.light); defs .append("filter") .attr("id", "mediumBlur") .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", config.blurIntensities.medium); defs .append("filter") .attr("id", "strongBlur") .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", config.blurIntensities.strong); }39:Ta2f,function createPerlinNoise() { const permutation = [ 151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180 ]; const p = new Array(512); for (let i = 0; i < 256; i++) { p[256 + i] = p[i] = permutation[i]; } const fade = (t) => t * t * t * (t * (t * 6 - 15) + 10); const lerp = (t, a, b) => a + t * (b - a); const grad = (hash, x, y, z) => { const h = hash & 15; const u = h < 8 ? x : y; const v = h < 4 ? y : h === 12 || h === 14 ? x : z; return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v); }; return function noise(x, y, z) { const X = Math.floor(x) & 255; const Y = Math.floor(y) & 255; const Z = Math.floor(z) & 255; x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z); const u = fade(x); const v = fade(y); const w = fade(z); const A = p[X] + Y; const AA = p[A] + Z; const AB = p[A + 1] + Z; const B = p[X + 1] + Y; const BA = p[B] + Z; const BB = p[B + 1] + Z; return lerp( w, lerp( v, lerp(u, grad(p[AA], x, y, z), grad(p[BA], x - 1, y, z)), lerp(u, grad(p[AB], x, y - 1, z), grad(p[BB], x - 1, y - 1, z)) ), lerp( v, lerp(u, grad(p[AA + 1], x, y, z - 1), grad(p[BA + 1], x - 1, y, z - 1)), lerp( u, grad(p[AB + 1], x, y - 1, z - 1), grad(p[BB + 1], x - 1, y - 1, z - 1) ) ) ); }; }3a:T4cd,chart = { const noise = createPerlinNoise(); const svg = d3 .create("svg") .attr("width", config.width) .attr("height", config.height) .attr("viewBox", [0, 0, config.width, config.height]) .style("background", config.backgroundColor); const defs = svg.append("defs"); // Merge config with controls const effectiveConfig = { ...config, baseColonySize: controls.baseColonySize, yellowProbability: controls.yellowProbability, textureIntensity: controls.textureIntensity, granularIntensity: controls.granularIntensity, fibrousIntensity: controls.fibrousIntensity, edgeVariation: controls.edgeVariation, shapePoints: controls.shapePoints, highlightSize: controls.highlightSize, highlightIntensity: controls.highlightIntensity, centerGlowSize: controls.centerGlowSize, blurIntensities: { light: 3 * controls.blurStrength, medium: 6 * controls.blurStrength, strong: 9 * controls.blurStrength } }; createFilters(defs, effectiveConfig); const proj = projection; const colonies = generateColonies(currentStateData, proj, effectiveConfig); renderColonies(svg, defs, colonies, noise, effectiveConfig); return svg.node(); } 3b:[] 32:{"id":"3bb5e272db42a27c","slug":"generated-colonies","title":"Generated Colonies","thumbnail":"d7fb6a9ce4136ab7b640b4a27a30893927fc4225fe0dee202ce57854304e00f0","access_level":"public","create_time":"$D2025-11-29T22:31:43.733Z","update_time":"$D2026-08-25T20:07:02.152Z","view_time":null,"first_public_time":"$D2025-12-03T04:15:32.819Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"0f4b662f2d98a8ff","login":"muxingchen","name":"Muxing's space","avatar_url":"https://avatars-next.observableusercontent.com/368240394862e9d7a51557dd8e29280b7723238ac9b58a0b9afa597e229d54e0","tier":"starter_2024"},"version":131,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"11f863f45d2e8a37","login":"muxingchen","name":"Muxing Chen","avatar_url":"https://avatars-next.observableusercontent.com/71f66ff178e451fd8a4af4899e597f85da5135d2e8199a4867fcbc0d5a0f53a6","tier":null}],"members":[{"type":"individual","id":"11f863f45d2e8a37","login":"muxingchen","name":"Muxing Chen","avatar_url":"https://avatars-next.observableusercontent.com/71f66ff178e451fd8a4af4899e597f85da5135d2e8199a4867fcbc0d5a0f53a6","tier":null,"role":"editor"},{"type":"team","id":"0f4b662f2d98a8ff","login":"muxingchen","name":"Muxing's space","avatar_url":"https://avatars-next.observableusercontent.com/368240394862e9d7a51557dd8e29280b7723238ac9b58a0b9afa597e229d54e0","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Generated Colonies","cells":[{"id":0,"value":"# Generated Colonies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"projection = {\n // Define geographic bounds\n const lonExtent = d3.extent(stateData, (d) => d.lon);\n const latExtent = d3.extent(stateData, (d) => d.lat);\n\n // Add padding (10%)\n const padding = 0.1;\n const width = config.width;\n const height = config.height;\n\n // Create scales with inverted lat (SVG y goes down, lat goes up)\n const xScale = d3\n .scaleLinear()\n .domain(lonExtent)\n .range([width * padding, width * (1 - padding)]);\n\n const yScale = d3\n .scaleLinear()\n .domain(latExtent)\n .range([height * (1 - padding), height * padding]); // Inverted\n\n return { xScale, yScale };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function generateColonies(stateData, projection, config) {\n const colonies = [];\n\n stateData.forEach((state, i) => {\n const isYellow = i / stateData.length < config.yellowProbability;\n\n colonies.push({\n id: i,\n state: state.state,\n x: projection.xScale(state.lon),\n y: projection.yScale(state.lat),\n size: (state.size || 80) * (config.baseColonySize / 80),\n color: isYellow ? config.yellowColor : config.pinkColor,\n textureFilter: `texture${(i % 3) + 1}`,\n noiseOffset: i * 100,\n highlightX: Math.sin(i) * config.highlightOffset,\n highlightY: Math.cos(i) * config.highlightOffset,\n isYellow: isYellow\n });\n });\n\n return colonies;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"function generateColonyPath(colony, scale, timeOffset, noise, config) {\n const points = config.shapePoints;\n const edgeVariation = config.edgeVariation;\n const path = d3.path();\n\n for (let i = 0; i <= points; i++) {\n const angle = (i / points) * Math.PI * 2;\n const noiseVal = noise(\n Math.cos(angle) * 2 + colony.noiseOffset,\n Math.sin(angle) * 2 + colony.noiseOffset,\n timeOffset\n );\n const offset = noiseVal * edgeVariation;\n const r = colony.size * scale + offset;\n const x = Math.cos(angle) * r;\n const y = Math.sin(angle) * r;\n\n if (i === 0) {\n path.moveTo(x, y);\n } else {\n path.lineTo(x, y);\n }\n }\n path.closePath();\n return path.toString();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"stateData = [\n { state: \"California\", lat: 36.7783, lon: -119.4179, size: 300 },\n { state: \"Texas\", lat: 31.9686, lon: -99.9018, size: 140 },\n { state: \"Virginia\", lat: 37.4316, lon: -78.6569, size: 120 },\n { state: \"Washington\", lat: 47.7511, lon: -120.7401, size: 110 },\n { state: \"Illinois\", lat: 40.6331, lon: -89.3985, size: 100 },\n { state: \"New York\", lat: 43.2994, lon: -74.2179, size: 130 },\n { state: \"Georgia\", lat: 32.1656, lon: -82.9001, size: 105 },\n { state: \"Ohio\", lat: 40.4173, lon: -82.9071, size: 95 },\n { state: \"Arizona\", lat: 34.0489, lon: -111.0937, size: 90 },\n { state: \"Florida\", lat: 27.6648, lon: -81.5158, size: 115 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"currentStateData = [\n { state: \"Washington\", lat: 46.6864, lon: -119.3878, size: 100 },\n { state: \"California\", lat: 38.8497, lon: -122.6072, size: 90 },\n { state: \"Arizona\", lat: 32.9639, lon: -112.4494, size: 70 },\n { state: \"Colorado\", lat: 40.2102, lon: -104.1676, size: 35 },\n { state: \"Texas1\", lat: 32.8033, lon: -96.7051, size: 62 },\n { state: \"Texas2\", lat: 29.2526, lon: -98.7792, size: 66 },\n { state: \"Iwoa\", lat: 41.4088, lon: -94.7901, size: 68 },\n { state: \"Illinois\", lat: 41.7176, lon: -87.998, size: 45 },\n { state: \"Ohio\", lat: 40.7562, lon: -82.1595, size: 30 },\n { state: \"Georgia\", lat: 34.3399, lon: -84.4526, size: 50 },\n { state: \"Maryland\", lat: 39.1739, lon: -77.1486, size: 200 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"projectedStateData = [\n { state: \"Washington\", lat: 46.6864, lon: -119.3878, size: 150 },\n { state: \"Oregon\", lat: 44.9242, lon: -123.1746, size: 120 },\n { state: \"California\", lat: 38.8497, lon: -122.6072, size: 140 },\n { state: \"Arizona\", lat: 32.9639, lon: -112.4494, size: 120 },\n { state: \"Colorado\", lat: 40.2102, lon: -104.1676, size: 72 },\n { state: \"Texas1\", lat: 32.8033, lon: -96.7051, size: 112 },\n { state: \"Texas2\", lat: 29.2526, lon: -98.7792, size: 116 },\n { state: \"Texas3\", lat: 30.0164, lon: -95.031, size: 98 },\n { state: \"Iwoa\", lat: 41.4088, lon: -94.7901, size: 148 },\n { state: \"Illinois\", lat: 41.7176, lon: -87.998, size: 80 },\n { state: \"Ohio\", lat: 40.7562, lon: -82.1595, size: 70 },\n { state: \"Georgia\", lat: 34.3399, lon: -84.4526, size: 100 },\n { state: \"Maryland\", lat: 39.1739, lon: -77.1486, size: 300 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 33:"$32:body"