2e:null 2f:["$","title",null,{"children":"Light Up the World | Charith Wijewardena | Observable"}] 34:Tf33,{ const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); let data = rawData; let totalPoints = data.length; // Start off with flat canvas. projection.alpha(1).rotate(rotate(1)).scale(scale(1)); // Define globe. const globe = svg .append("g") .append("path") .datum(sphere) .style("fill", "none") .style("stroke", "black") .style("opacity", 0.3) .attr("d", path); // Define graticule. const grat = svg .append("g") .append("path") .datum(graticule) .attr("class", "graticule") .attr("d", path) .style("fill", "none") .style("stroke", "#aaa") .style("opacity", 0.2); // Define points. const points = svg .append("g") .selectAll(".path") .data(data) .join("path") .attr("d", d => path(d)) .style('fill', "#aaa") .style('stroke', "#aaa") .style('stroke-width', 1) .style("opacity", 0.25) .on("click", (event, d) => d.count < 8 ? ++d.count : null); while (true) { let total = d3.sum(data.map(d => d.count)); const stopValue = 8 * totalPoints; let timer = 0; while (total < stopValue) { // Randomly select a neighbour for each colored point. // Return indices of these neighbours in data array. if (timer === 0) { const idxToUpdate = data .filter(d => d.count > 0) .map(d => { const randX = Math.floor(Math.random() * 0.3 * 10); const randY = Math.floor(Math.random() * 0.3 * 10); const newX = d.coordinates[0][0] - 10 + (randX * 10); const newY = d.coordinates[0][1] - 10 + (randY * 10); const xInRange = newX >= -180 && newX <= 170; const yInRange = newY >= -80 && newY <= 80; let newCoords = xInRange && yInRange ? String(newX) + "," + String(newY) : "-1"; newCoords = randX === 1 && randY === 1 ? "-1" : newCoords; // not to update itself return ({...d, updateLoc: newCoords }); }) .filter(d => d.updateLoc !== "-1") .map(d => coords.indexOf(d.updateLoc)); // Update count of selected points. for (let i = 0; i < idxToUpdate.length; ++i) { const idx = idxToUpdate[i]; data[idx].count < 8 ? ++data[idx].count : null; } // Update color of points. d3.selectAll(points) .filter(d => d.count > 0) .transition() .duration(d => 1000 + 2000 * Math.random()) .style("fill", d => d.color) .style("stroke", d => d.color) .style("stroke-width", d => d.count) .style("opacity", d => d.count / 8); total = d3.sum(data.map(d => d.count)); } timer = timer === 10 ? 0 : timer + 1; yield Promises.delay(100, svg.node()); } d3.selectAll(points) .transition().ease(d3.easeQuad).duration(2500) .style("opacity", 0.4); d3.selectAll(grat) .transition().duration(2500) .style("opacity", 0.75); for (let j = 0, n = 300; j < n; ++j) { grat.attr("d", paths.graticule[j]); globe.attr("d", paths.sphere[j]); points.attr("d", (d, i) => paths.points[j][i]); yield svg.node(); } // d3.selectAll(points) // .transition() // .ease(d3.easeQuad) // .duration(7500) // .style("stroke-width", 18); yield Promises.delay(2500, svg.node()) for (let j = 300, n = 600; j < n; ++j) { grat.attr("d", paths.graticule[j]); globe.attr("d", paths.sphere[j]); points.attr("d", (d, i) => paths.points[j][i]); yield svg.node(); } data.forEach(d => d.count = 0); points .transition() .ease(d3.easeQuad) .duration(3000) .style('fill', "#aaa") .style('stroke', "#aaa") .style('stroke-width', 1) .style("opacity", 0.25) yield Promises.delay(3000, svg.node()); } }35:T642,md` I created this interactive artwork because I wanted to share a realization I had about how being kind to others actually has a very profound effect on the universe. I realized how kindness conditions others to be kind in turn, and this effect ripples out even on the scale of lifetimes, through vast swathes of space and time. Specially dedicated to all those who have been kind to me, spoken highly of serving others, and encouraged me to live my life in a wholesome way. ---- ***How to interact with the artwork:*** Simply click on one or more circles to color them in. Each colored circle then begins coloring other circles around them in turn. *Hint: Click on a few circles that are far away from each other to see beautiful communities forming and joining together!* ***How I interpret the artwork:*** Each circle symbolizes a *unique individual*. 🙆🏽‍♂️ The grid symbolizes the *planet*. 🌏 The transformation of circles from grey to colored symbolizes the *transformative power of kindness*. 💖 The gradual spreading out of color symbolizes the *building up of beautiful communities over time*. 🧑🏻‍🤝‍🧑🏽🧑‍🤝‍🧑🧑🏾‍🤝‍🧑🏾 The deepening of color symbolizes how *inner transformation is a gradual process*. 🕒 ${html`

The different colors symbolize our unique personalities.

`} ---- What does it mean for you? 🙏🏽 *Hint: Make sure you don't miss out on the best part at the end, when the "world lights up"!* 😉 Enjoy! ❤️`36:[] 32:{"id":"75ba6e564bd94466","slug":"light-up-the-world","title":"Light Up the World","thumbnail":"174bfa664c4843da270fe16f2eecc1baf003330f7df18acc9ff620c6aa0ce1d7","access_level":"public","create_time":"$D2021-09-10T11:15:46.303Z","update_time":"$D2021-10-06T11:36:11.566Z","view_time":null,"first_public_time":"$D2021-09-11T13:16:30.874Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"046cde780f244322","login":"chaz","name":"Charith Wijewardena","avatar_url":"https://avatars-next.observableusercontent.com/59be3652951cdac59de6ac2160245d82c1c12a02e4d000d6e87abaaa82c8bf7a","tier":"starter_2024"},"version":1091,"publish_version":1091,"role":null,"authored":false,"authors":[{"type":"individual","id":"653cb85288b2ee67","login":"chaz","name":"Charith Wijewardena","avatar_url":"https://avatars-next.observableusercontent.com/59be3652951cdac59de6ac2160245d82c1c12a02e4d000d6e87abaaa82c8bf7a","tier":null}],"members":[{"type":"individual","id":"653cb85288b2ee67","login":"chaz","name":"Charith Wijewardena","avatar_url":"https://avatars-next.observableusercontent.com/59be3652951cdac59de6ac2160245d82c1c12a02e4d000d6e87abaaa82c8bf7a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Light Up the World","cells":[{"id":1085,"value":"md`# Light Up the World\n\n*(Instructions below...)*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"md`**Acknowledgement:** Originally forked from Mike Bostock's amazing [Orthographic to Equirectangular](https://observablehq.com/@d3/orthographic-to-equirectangular).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"paths = {\n const paths = ({sphere: [], graticule: [], points: []});\n const numPoints = rawData.length;\n \n for (let i = 0, n = 600; i < n; ++i) {\n const t = d3.easeCubic(2 * i > n ? 2 - 2 * i / n : 2 * i / n);\n projection.alpha(1-t).rotate(rotate(1-t)).scale(scale(1-t));\n\n paths.sphere.push(path(sphere));\n paths.graticule.push(path(graticule));\n\n const points = [];\n for (let j = 0, n = numPoints; j < numPoints; ++j) {\n points.push(path(rawData[j]));\n }\n paths.points.push(points);\n }\n return paths;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"coords = rawData\n .map(d => String(d.coordinates[0][0]) + \",\" + String(d.coordinates[0][1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"rawData = {\n const xStart = -180;\n const yStart = -80;\n\n let x = xStart;\n let y = yStart;\n let data = [];\n\n while (y < 90) {\n while (x < 180) {\n data.push(({type: \"MultiPoint\", \n coordinates: [[x, y]], \n count: 0, \n color: d3.interpolateWarm(Math.random())}));\n x += 10;\n }\n x = xStart;\n y += 10;\n }\n\n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"function interpolateProjection(raw0, raw1) {\n const mutate = d3.geoProjectionMutator(t => (x, y) => {\n const [x0, y0] = raw0(x, y), [x1, y1] = raw1(x, y);\n return [x0 + t * (x1 - x0), y0 + t * (y1 - y0)];\n });\n let t = 0;\n return Object.assign(mutate(t), {\n alpha(_) {\n return arguments.length ? mutate(t = +_) : t;\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"projection = interpolateProjection(d3.geoOrthographicRaw, d3.geoEquirectangularRaw)\n .scale(scale(0))\n .translate([width / 2, height / 2])\n .rotate(rotate(0))\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"rotate = d3.interpolate([10, -20], [0, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"scale = d3.interpolate(width / 4, (width - 2) / (2 * Math.PI))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"height = width / 1.8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"graticule = d3.geoGraticule()\n .stepMinor([10, 10])();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"