31:T246f,{ replay; let currentArc = null; const [x, y] = proportion.split("/").map(d => +d); const k = y / x; const height = selectedWidth * k; const stepDuration = 750; const marginTop = proportion === "9/16" ? 120 : 64; const marginBottom = proportion === "9/16" ? 120 : 100; const marginLeft = proportion === "9/16" ? 16 : 24; const marginRight = proportion === "9/16" ? 16 : 24; const chartInnerHeight = height - marginTop - marginBottom const gradientbarHeight = chartInnerHeight - 145 - 100 console.log("Safe space %", chartInnerHeight, (chartInnerHeight) / height) const container = d3.create("div").style("position", "relative").style("width", selectedWidth + "px"); const globeContainer = container.append("div"); const scale = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.cumAttendance)]) .range([0, 100]); container .append("div") .attr("class", "title-root") .style("position", "absolute") .style("top", marginTop + "px") .style("left", "0px") .style("width", "100%") .style("z-index", 999990).html(`

COLDPLAY

THE ROAD TO 10 MILLION TICKETS

Music of the Spheres World Tour

`); container .append("div") .attr("class", "logo-root") .style("position", "absolute") .style("bottom", 32 + "px") .style("left", marginLeft + "px") .style("width", "50%") .style("z-index", 999990).html(`

${billboardSvg}

BOXSCORE

ACCORDING TO FIGURES REPORTED TO BILLBOARD BOXSCORE

`); const thermometer = container .append("div") .attr("class", "metric-root") .style("position", "absolute") .style("bottom", marginBottom + 8 + "px") .style("left", marginLeft + "px") .style("width", "64px") .style("height", gradientbarHeight + "px") .style("z-index", 999990); const thermometerFill = thermometer .append("div") .style("width", "100%") .style("height", "0%") .style("position", "absolute") .style("bottom", "0px") .style("left", "0px") .style("border-radius", "8px 8px 0px 0px") .style("background", "linear-gradient(to top, yellow, red)") .style("background-size", "100% " + height * 0.7 + "px") .style("background-repeat", "no-repeat") .style("background-position", "bottom"); const attendanceText = thermometer .append("div") .style("color", "#ccc") .style("font-size", "14px") .style("font-weight", "bold") .style("position", "absolute") .style("bottom", "0px") .style("left", "0px") .html(getAttendanceText(data[0].cumAttendance)); const tickerText = container .append("div") .attr("class", "ticker") .style("position", "absolute") .style("bottom", marginBottom + "px") .style("right", marginRight + "px") .style("width", "64px") .style("z-index", 999990) .append("div") .attr("class", "ticker-text") .html(formatDateStr(data[0].start_date, data[0].end_date)); let counter = 0; const arcsData = d3.pairs(data, (a, b) => { return { index: counter++, hidden: false, current: false, id: `${a.City}->${b.City}`, sourceAttendance: a.cumAttendance, targetDeltaAttendance: b.attendance, targetAttendance: b.cumAttendance, sourceCity: a.City, targetCity: b.City, startLat: a.latitude, startLng: a.longitude, endLat: b.latitude, endLng: b.longitude, color: "rgba(0, 0, 0, 0)", start_date: b.start_date, end_date: b.end_date, progress: 0 }; }); const labelsIndexes = new Map(data.map((d, i) => [d.City, i])); const labelsData = allCitiesGeoJson.features .slice() .sort((a, b) => { const indexA = labelsIndexes.get(a.properties.city); const indexB = labelsIndexes.get(b.properties.city); return indexA - indexB; }) .map((d, index) => ({ ...d, properties: { ...d.properties, index: index, hidden: index > 0, current: index === 0 } })); const globe = Globe() // .labelTypeFace(neueHaasGroteskDisplayPro_65Medium) .labelTypeFace(crystalSemiBold_regular) .width(selectedWidth) .height(height) .globeImageUrl("//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg") .bumpImageUrl("//cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png") .backgroundImageUrl("//cdn.jsdelivr.net/npm/three-globe/example/img/night-sky.png") .labelsData(labelsData) .labelLat((d) => d.properties.latitude) .labelLng((d) => d.properties.longitude) .labelText((d) => { if (!d.properties.current) { return " "; } return d.properties.name; }) .labelSize((d) => 1) .labelDotRadius((d) => { return 0.3; // if (!d.properties.current) { // return 0.5; // } // return Math.sqrt(d.properties.value) * 0.0005; }) .labelColor((d) => { if (d.properties.hidden) { return "rgba(0, 0, 0, 0)"; } if (d.properties.current) { return colors.label; } return colors.grey; }) // .labelAltitude((d) => { // return 0.05 // // if (d.properties.current) { // // return 0.05; // // } // // return 0.0000001 * d.properties.index; // }) .labelResolution(12); globe .arcsData(arcsData) .arcAltitudeAutoScale(0.4) .arcColor((d) => { if (d.hidden) { return "rgba(0, 0, 0, 0)"; } if (d.current) { return colors.arc; } return colors.grey; }) .arcStroke(0.3) .arcDashInitialGap(1) .arcDashAnimateTime((d) => { return d.current ? stepDuration : 0; }) .arcDashLength(1) .arcDashGap(0); const firstPoint = labelsData[0]; globe.onGlobeReady(() => { // Show number in label by cloning TextGeometry in each label setTimeout(() => { showNumber(firstPoint.properties.city, globe); }, 10); }); const timeline = gsap.gsap.timeline(); // Move globe to the start point timeline.to(globe, { delay: 1, duration: (stepDuration / 1000) * 0.75, onStart: function () { globe.pointOfView( { lat: firstPoint.properties.latitude, lng: firstPoint.properties.longitude, altitude: 1 }, [stepDuration * 0.75] ); } }); arcsData.forEach((arc, i) => { timeline.to(arc, { delay: stepDuration / 1000, // A little bit delay between transitions duration: stepDuration / 1000, // Start transition to another point onStart: function () { currentArc = arc; // Move globe to target, a little bit faster than entire animation globe.pointOfView({ lat: arc.endLat, lng: arc.endLng, altitude: 1 }, [ stepDuration * 0.75 ]); // Compute new arcs data const newArcData = globe.arcsData().map((d, index) => { const isCurrent = d.id === currentArc.id; const hidden = index > currentArc.index; d.current = isCurrent; d.hidden = hidden; return d; }); globe.arcsData(newArcData); // Compute new labels data const newLabels = globe.labelsData().map((d, index) => { d.properties.current = d.properties.city === currentArc.targetCity; d.properties.hidden = index > currentArc.index + 1; return d; }); globe.labelsData(newLabels); // Show number in label by cloning TextGeometry in each label setTimeout(() => { showNumber(currentArc.targetCity, globe); }, 10); // Update metric bar const transition = d3.transition().duration(750); const h = scale(arc.targetAttendance); const deltaH = scale(arc.targetDeltaAttendance); thermometerFill.transition(transition).style("height", h + "%"); attendanceText .transition(transition) .tween("html", function () { const interpolator = d3.interpolateNumber( arc.sourceAttendance, arc.targetAttendance ); return function (t) { attendanceText.html(getAttendanceText(interpolator(t))); }; // return value }) .style("bottom", h + "%"); tickerText.html( formatDateStr(currentArc.start_date, currentArc.end_date) ); }, onComplete: function () { if (i === arcsData.length - 1) { // Update ticker date range tickerText.html(formatDateStr(data[0].start_date, arc.end_date)); // Move camera to europe globe.pointOfView({ lat: 42, lng: 8.78634, altitude: 2.5 }, [ stepDuration * 0.75 ]); const controls = globe.controls(); controls.autoRotate = true; controls.update(); } } }); }); globe(globeContainer.node()); invalidation.then(() => { timeline.clear(); globe._destructor(); }); return container.node(); }32:T477,function showNumber(currentLabel, globe, isFirst) { globe.labelsData().forEach((label) => { const threeObject = label.__threeObjLabel; if (!threeObject) { return; } if (label.properties.city !== currentLabel) { threeObject.children = threeObject.children.slice(0, 2); return; } const textGeometry = threeObject.children.find((d) => { return d.geometry.type === "TextGeometry"; }); if (textGeometry) { const copy = textGeometry.clone(); copy.geometry = new THREE.TextGeometry( formatNumber(label.properties.attendance), { ...copy.geometry.parameters.options, font: new THREE.Font(crystalUltraCondensed_bold), // Alternative: new THREE.FontLoader().parse(crystalSemiBold_regular) size: copy.geometry.parameters.options.size * 2 } ); const text = copy.geometry; text.computeBoundingBox(); const boundingBox = text.boundingBox; copy.position.x = -0.5 * (boundingBox.max.x - boundingBox.min.x); copy.position.y = -copy.position.y - 0.5; threeObject.add(copy); } }); }33:T122c,cityCoordinates = ({ "San Jose, Costa Rica": {"latitude": 9.928069, "longitude": -84.090725}, "Santo Domingo, Dominican Republic": {"latitude": 18.486057, "longitude": -69.931212}, "Guadalupe, Mexico": {"latitude": 25.677796, "longitude": -100.259668}, "Guadalajara, Mexico": {"latitude": 20.659699, "longitude": -103.349609}, "Mexico City, Mexico": {"latitude": 19.432608, "longitude": -99.133209}, "Dallas, Texas": {"latitude": 32.776665, "longitude": -96.796989}, "Houston, Texas": {"latitude": 29.760427, "longitude": -95.369804}, "Glendale, Ariz.": {"latitude": 33.538652, "longitude": -112.186019}, "Santa Clara, Calif.": {"latitude": 37.354113, "longitude": -121.955174}, "Chicago, Ill.": {"latitude": 41.878113, "longitude": -87.629799}, "Landover, Md.": {"latitude": 38.933449, "longitude": -76.896275}, "East Rutherford, N.J.": {"latitude": 40.833990, "longitude": -74.097037}, "Philadelphia, Pa.": {"latitude": 39.952584, "longitude": -75.165222}, "Atlanta, Ga.": {"latitude": 33.748995, "longitude": -84.387982}, "Tampa, Fla.": {"latitude": 27.950575, "longitude": -82.457178}, "Frankfurt, Germany": {"latitude": 50.110922, "longitude": 8.682127}, "Warsaw, Poland": {"latitude": 52.229676, "longitude": 21.012229}, "Berlin, Germany": {"latitude": 52.520007, "longitude": 13.404954}, "Paris, France": {"latitude": 48.856613, "longitude": 2.352222}, "Brussels, Belgium": {"latitude": 50.850346, "longitude": 4.351721}, "London, England": {"latitude": 51.507351, "longitude": -0.127758}, "Glasgow, Scotland": {"latitude": 55.864237, "longitude": -4.251806}, "Lima, Peru": {"latitude": -12.046374, "longitude": -77.042793}, "Bogota, Colombia": {"latitude": 4.710989, "longitude": -74.072092}, "Santiago, Chile": {"latitude": -33.448890, "longitude": -70.669265}, "Buenos Aires, Argentina": {"latitude": -34.603684, "longitude": -58.381559}, "Sao Paulo, Brazil": {"latitude": -23.550520, "longitude": -46.633308}, "Curitiba, Brazil": {"latitude": -25.429596, "longitude": -49.271272}, "Rio de Janeiro, Brazil": {"latitude": -22.906847, "longitude": -43.172896}, "Coimbra, Portugal": {"latitude": 40.203314, "longitude": -8.410257}, "Barcelona, Spain": {"latitude": 41.385064, "longitude": 2.173404}, "Manchester, England": {"latitude": 53.480759, "longitude": -2.242631}, "Cardiff, Wales": {"latitude": 51.481583, "longitude": -3.179090}, "Naples, Italy": {"latitude": 40.851798, "longitude": 14.268121}, "Milan, Italy": {"latitude": 45.464203, "longitude": 9.189982}, "Zurich, Switzerland": {"latitude": 47.376887, "longitude": 8.541694}, "Copenhagen, Denmark": {"latitude": 55.676098, "longitude": 12.568337}, "Gothenburg, Sweden": {"latitude": 57.708870, "longitude": 11.974560}, "Amsterdam, Netherlands": {"latitude": 52.367573, "longitude": 4.904139}, "Seattle, Wash.": {"latitude": 47.603754, "longitude": -122.332008}, "Vancouver, British Columbia": {"latitude": 49.282729, "longitude": -123.120738}, "San Diego, Calif.": {"latitude": 32.715738, "longitude": -117.161084}, "Pasadena, Calif.": {"latitude": 34.147785, "longitude": -118.144516}, "Tokyo, Japan": {"latitude": 35.689487, "longitude": 139.691711}, "Kaohsiung, Taiwan": {"latitude": 22.627278, "longitude": 120.301435}, "Jakarta, Indonesia": {"latitude": -6.208763, "longitude": 106.845599}, "Perth, Australia": {"latitude": -31.950527, "longitude": 115.860457}, "Kuala Lumpur, Malaysia": {"latitude": 3.139003, "longitude": 101.686855}, "Manila, Philippines": {"latitude": 14.599512, "longitude": 120.984219}, "Singapore": {"latitude": 1.352083, "longitude": 103.819836}, "Bangkok, Thailand": {"latitude": 13.756331, "longitude": 100.501765}, "Athens, Greece": {"latitude": 37.983810, "longitude": 23.727539}, "Bucharest, Romania": {"latitude": 44.426767, "longitude": 26.102538}, "Budapest, Hungary": {"latitude": 47.497912, "longitude": 19.040235}, "Lyon, France": {"latitude": 45.764043, "longitude": 4.835659}, "Rome, Italy": {"latitude": 41.902784, "longitude": 12.496366}, "Dusseldorf, Germany": {"latitude": 51.227741, "longitude": 6.773456}, "Helsinki, Finland": {"latitude": 60.169856, "longitude": 24.935415}, "Munich, Germany": {"latitude": 48.135125, "longitude": 11.581981}, "Vienna, Austria": {"latitude": 48.208176, "longitude": 16.373819}, "Dublin, Ireland": {"latitude": 53.349805, "longitude": -6.260310}, "Melbourne, Australia": {"latitude": -37.813628, "longitude": 144.963058}, "Sydney, Australia": {"latitude": -33.868820, "longitude": 151.209296}, "Auckland, New Zealand": {"latitude": -36.848460, "longitude": 174.763332} })34:T8d2,35:T91a,billboardSvg = ` `36:[{"id":"d54835b755894a9b22f877cc9982c772ca941e6839da81570824e633e58d16abc2ec39784f6b6dc487eb4edb7aade14664cd5bd3642d122fd1757becb9212659","href":"https://static.observableusercontent.com/files/d54835b755894a9b22f877cc9982c772ca941e6839da81570824e633e58d16abc2ec39784f6b6dc487eb4edb7aade14664cd5bd3642d122fd1757becb9212659","name":"Crystal-Black.otf","type":"font/otf","lastModified":1733358359498.768,"size":84984},{"id":"e062349e376a501a455f36b78971cb44585bc16aaee7527f186a053e659fe434b3a0fc14b18dab2d6d6c3cf6090e5b476c4a8359a659c05c65b5d87523bb75ec","href":"https://static.observableusercontent.com/files/e062349e376a501a455f36b78971cb44585bc16aaee7527f186a053e659fe434b3a0fc14b18dab2d6d6c3cf6090e5b476c4a8359a659c05c65b5d87523bb75ec","name":"Crystal-ExtraBold.otf","type":"font/otf","lastModified":1733358365114.756,"size":85972},{"id":"2af851c3ec595a2791aebf310bc31763f315adea9a8811cf5830ae6bceee9da0d7e6fe8d8164c300c2d50930705faf9aeafae02821be55c530c2c3b3107aa7b5","href":"https://static.observableusercontent.com/files/2af851c3ec595a2791aebf310bc31763f315adea9a8811cf5830ae6bceee9da0d7e6fe8d8164c300c2d50930705faf9aeafae02821be55c530c2c3b3107aa7b5","name":"Crystal-CondensedBook@1.otf","type":"font/otf","lastModified":1733372778628.658,"size":82816},{"id":"17d9a0b35a9ea285e0b196f9d20ee333f102a5118e45c65fe8378f2f0dab25910745ce0d9da3048caec55a9924254b6665ba65a0b8d54ad77dcd290689cc79ec","href":"https://static.observableusercontent.com/files/17d9a0b35a9ea285e0b196f9d20ee333f102a5118e45c65fe8378f2f0dab25910745ce0d9da3048caec55a9924254b6665ba65a0b8d54ad77dcd290689cc79ec","name":"Crystal-CondensedLight@1.otf","type":"font/otf","lastModified":1733372926178.539,"size":82972},{"id":"e287c48e5d51ba75e59aea4c1ee6c3744aee1946da3850016af850fc7c5435639ae25054471f6b8e82537f6b4c2fa0e97bcf2df821ccab5c2fcd003c966bf09b","href":"https://static.observableusercontent.com/files/e287c48e5d51ba75e59aea4c1ee6c3744aee1946da3850016af850fc7c5435639ae25054471f6b8e82537f6b4c2fa0e97bcf2df821ccab5c2fcd003c966bf09b","name":"Crystal-CondensedBold@1.otf","type":"font/otf","lastModified":1733373290604.452,"size":91908},{"id":"b41063084180c969f97da1c8c54a909501ae0b93fe247da380ee3c262e6517e2173f0d9428131b669b94f9d5d283cfc4fc647c3f24543d3463fddc7bcdc052fd","href":"https://static.observableusercontent.com/files/b41063084180c969f97da1c8c54a909501ae0b93fe247da380ee3c262e6517e2173f0d9428131b669b94f9d5d283cfc4fc647c3f24543d3463fddc7bcdc052fd","name":"Crystal-CondensedExtraBold@1.otf","type":"font/otf","lastModified":1733373305353.815,"size":90916},{"id":"e74126dacb36bac81c70fd7f8c8f7897efbb70701cb67049090c4d42341dcaf221abd2290306005f4e19a7fbd8b0a2ccb8f838d42a344137f1d97af770c40a20","href":"https://static.observableusercontent.com/files/e74126dacb36bac81c70fd7f8c8f7897efbb70701cb67049090c4d42341dcaf221abd2290306005f4e19a7fbd8b0a2ccb8f838d42a344137f1d97af770c40a20","name":"Crystal-CondensedSemiBold@1.otf","type":"font/otf","lastModified":1733373414701.697,"size":91896},{"id":"d64e70f671819c82f6aa96d688e5383374723841a01cdc54cc20883619626ee123cf953105ee20a7c270fad23dda76b487ac90b0d92773493c9770b73c2729b3","href":"https://static.observableusercontent.com/files/d64e70f671819c82f6aa96d688e5383374723841a01cdc54cc20883619626ee123cf953105ee20a7c270fad23dda76b487ac90b0d92773493c9770b73c2729b3","name":"Crystal Ultra Condensed_Regular.json","type":"application/json","lastModified":1733374274605.492,"size":116800},{"id":"d24d6a9ff993df378d860cb1a7b6fb0c351c99c9ed95aa6312ea95dd127661297571d1dea5eca1edad9dadc2f6de38feb0579286cfdf2405dc58b2c80518c42b","href":"https://static.observableusercontent.com/files/d24d6a9ff993df378d860cb1a7b6fb0c351c99c9ed95aa6312ea95dd127661297571d1dea5eca1edad9dadc2f6de38feb0579286cfdf2405dc58b2c80518c42b","name":"Crystal-UltraCondensedBold@1.otf","type":"font/otf","lastModified":1733374482000.579,"size":104388},{"id":"7aa5e249ab8e8a986773bca9de751afc1b3b2c51a01095bba9f12d50db3d3303f62b337110d662090a8afc93d1613e382a1bd7da83f7d3e42bca77b296075f77","href":"https://static.observableusercontent.com/files/7aa5e249ab8e8a986773bca9de751afc1b3b2c51a01095bba9f12d50db3d3303f62b337110d662090a8afc93d1613e382a1bd7da83f7d3e42bca77b296075f77","name":"Crystal-UltraCondensedBook@1.otf","type":"font/otf","lastModified":1733374642566.208,"size":82188},{"id":"c00c7d905d9e24e7e28238f70f0216d0eadfcc9334f33794a579b559f2d97a11d1223c7551e0994790969a8ebda0e8a5c91aacccb32f118b6f85235433db905d","href":"https://static.observableusercontent.com/files/c00c7d905d9e24e7e28238f70f0216d0eadfcc9334f33794a579b559f2d97a11d1223c7551e0994790969a8ebda0e8a5c91aacccb32f118b6f85235433db905d","name":"Crystal-UltraCondensedBlack@1.otf","type":"font/otf","lastModified":1733374642707.131,"size":104084},{"id":"d24d6a9ff993df378d860cb1a7b6fb0c351c99c9ed95aa6312ea95dd127661297571d1dea5eca1edad9dadc2f6de38feb0579286cfdf2405dc58b2c80518c42b","href":"https://static.observableusercontent.com/files/d24d6a9ff993df378d860cb1a7b6fb0c351c99c9ed95aa6312ea95dd127661297571d1dea5eca1edad9dadc2f6de38feb0579286cfdf2405dc58b2c80518c42b","name":"Crystal-UltraCondensedBold@2.otf","type":"font/otf","lastModified":1733374642720.263,"size":104388},{"id":"204f56a76953806578f13aae500e9bac5055e4ed19200fd78af080eb0ecacdd18c1abc9f4d92bc42e8abee1a9a3b67e4577ddb8d1cd39ec38c780e00ff80884b","href":"https://static.observableusercontent.com/files/204f56a76953806578f13aae500e9bac5055e4ed19200fd78af080eb0ecacdd18c1abc9f4d92bc42e8abee1a9a3b67e4577ddb8d1cd39ec38c780e00ff80884b","name":"Crystal-UltraCondensedLight@1.otf","type":"font/otf","lastModified":1733374642732.17,"size":83232},{"id":"c02df2a68a4407a6c0d354798d01e3adbd896fb824148a799bbb59845350bcf6981670d4153bbb547b600096391a92847c1158411db7e0c3eee1c359ec542e74","href":"https://static.observableusercontent.com/files/c02df2a68a4407a6c0d354798d01e3adbd896fb824148a799bbb59845350bcf6981670d4153bbb547b600096391a92847c1158411db7e0c3eee1c359ec542e74","name":"Crystal-UltraCondensedMedium@1.otf","type":"font/otf","lastModified":1733374642779.046,"size":100800},{"id":"b10c958a18da7bbd2555369d839efb09bcacc2f4d8c155510d9769110f342163b5af2315659f79ac45715ace66392f506cfb56c2cdfbc61559ef7d1dc9c5d0f2","href":"https://static.observableusercontent.com/files/b10c958a18da7bbd2555369d839efb09bcacc2f4d8c155510d9769110f342163b5af2315659f79ac45715ace66392f506cfb56c2cdfbc61559ef7d1dc9c5d0f2","name":"Crystal-UltraCondExtBd@1.otf","type":"font/otf","lastModified":1733375605507.243,"size":105400},{"id":"2b28dfc3272f93534340c85b73b89e9c6f8978fcbcfa9d431a3acef3d681e38c6943204c9c2a745e6431cdf4225162f75ade167a11d6ea7bd28a158f6028ff8e","href":"https://static.observableusercontent.com/files/2b28dfc3272f93534340c85b73b89e9c6f8978fcbcfa9d431a3acef3d681e38c6943204c9c2a745e6431cdf4225162f75ade167a11d6ea7bd28a158f6028ff8e","name":"Crystal Ultra Condensed_Bold.json","type":"application/json","lastModified":1733376213870.483,"size":118227},{"id":"0a7838e39b8e754d4cb51e45cb8df999977a39ce681f2b91e2702c4b2291b971e7eef09a6a1e746899242980b46e7bb11368ef7d56d9cfd67e2e1c672ebbdefa","href":"https://static.observableusercontent.com/files/0a7838e39b8e754d4cb51e45cb8df999977a39ce681f2b91e2702c4b2291b971e7eef09a6a1e746899242980b46e7bb11368ef7d56d9cfd67e2e1c672ebbdefa","name":"Crystal Ultra Condensed_Bold (1).json","type":"application/json","lastModified":1733376436955.546,"size":165364},{"id":"ecf5b106da7418cdceb70c6a1d5ea8ecc68602fbe9a0eab829495f70ec72025a2a257698003b3ed495512f3f6f0dcadc3c3ae4f5b7ea0fcd8e8a08599a4f35df","href":"https://static.observableusercontent.com/files/ecf5b106da7418cdceb70c6a1d5ea8ecc68602fbe9a0eab829495f70ec72025a2a257698003b3ed495512f3f6f0dcadc3c3ae4f5b7ea0fcd8e8a08599a4f35df","name":"Crystal Semi Bold_Regular.json","type":"application/json","lastModified":1733962019544.736,"size":187113},{"id":"393600b44047673f971cfdebfd97b446e92780edf1e519990f1ce8e0189d9f4bb17bd8b095a81cbdd3d635de8b8b7ee7fef2fe8ad7aaeef27da8ef511628685b","href":"https://static.observableusercontent.com/files/393600b44047673f971cfdebfd97b446e92780edf1e519990f1ce8e0189d9f4bb17bd8b095a81cbdd3d635de8b8b7ee7fef2fe8ad7aaeef27da8ef511628685b","name":"Crystal Semi Bold_Regular (1).json","type":"application/json","lastModified":1733962149875.739,"size":117644},{"id":"ecf5b106da7418cdceb70c6a1d5ea8ecc68602fbe9a0eab829495f70ec72025a2a257698003b3ed495512f3f6f0dcadc3c3ae4f5b7ea0fcd8e8a08599a4f35df","href":"https://static.observableusercontent.com/files/ecf5b106da7418cdceb70c6a1d5ea8ecc68602fbe9a0eab829495f70ec72025a2a257698003b3ed495512f3f6f0dcadc3c3ae4f5b7ea0fcd8e8a08599a4f35df","name":"Crystal Semi Bold_Regular (3).json","type":"application/json","lastModified":1733962397418.084,"size":187113},{"id":"393600b44047673f971cfdebfd97b446e92780edf1e519990f1ce8e0189d9f4bb17bd8b095a81cbdd3d635de8b8b7ee7fef2fe8ad7aaeef27da8ef511628685b","href":"https://static.observableusercontent.com/files/393600b44047673f971cfdebfd97b446e92780edf1e519990f1ce8e0189d9f4bb17bd8b095a81cbdd3d635de8b8b7ee7fef2fe8ad7aaeef27da8ef511628685b","name":"Crystal Semi Bold_Regular (2).json","type":"application/json","lastModified":1733962408421.284,"size":117644},{"id":"6d93ba14883c7e61e7ac72dc46108a85e5c3f098e18aee979ae8c36bb2c2cd50cd1df1f6a678aed2b442177576f41c64aa14c8c126dfc2bc1933e4f1c7009468","href":"https://static.observableusercontent.com/files/6d93ba14883c7e61e7ac72dc46108a85e5c3f098e18aee979ae8c36bb2c2cd50cd1df1f6a678aed2b442177576f41c64aa14c8c126dfc2bc1933e4f1c7009468","name":"Crystal-UltraExpandedBlack@1.otf","type":"font/otf","lastModified":1733447395504.45,"size":84716},{"id":"b009bb32ffa62999ce964bb03331e972c7b687ec7bd26ea23706b6b7e5c8d7c2289d787e237569de90aed1fb3e6cb13c9ed071c3e5399bb1bf3e0cf110031122","href":"https://static.observableusercontent.com/files/b009bb32ffa62999ce964bb03331e972c7b687ec7bd26ea23706b6b7e5c8d7c2289d787e237569de90aed1fb3e6cb13c9ed071c3e5399bb1bf3e0cf110031122","name":"Crystal-ExtraCondensedMedium@1.otf","type":"font/otf","lastModified":1733447449119.075,"size":97620},{"id":"bbbb5cb8e278755e4989c480355da2d39fc44c5bafc8bab78dce57017429624e8f80cd03ec841a3759c367efe534ac816d26c3e7c6e35632cf5d6b98c8734046","href":"https://static.observableusercontent.com/files/bbbb5cb8e278755e4989c480355da2d39fc44c5bafc8bab78dce57017429624e8f80cd03ec841a3759c367efe534ac816d26c3e7c6e35632cf5d6b98c8734046","name":"Crystal-ExtraCondSemBd@1.otf","type":"font/otf","lastModified":1733448035689.509,"size":103672},{"id":"6563db1013f8f65068aca6d1aa38c596dab1b024ea269166bcee1ec6e14512e718448dd86d3c49d61bbf87e1c70e45f785a8cf7e84bfa4ffcebcb4dc0c0f4e3c","href":"https://static.observableusercontent.com/files/6563db1013f8f65068aca6d1aa38c596dab1b024ea269166bcee1ec6e14512e718448dd86d3c49d61bbf87e1c70e45f785a8cf7e84bfa4ffcebcb4dc0c0f4e3c","name":"Data-Table 1 - Data-Table 1.csv","type":"text/csv","lastModified":1732762024310.127,"size":4157},{"id":"31a6b3aab8ef07c9800aef54786aa0beeb0918af9751593562b5657b33c35814bd9876d7b2b8cbed4f0ab3abc93614006664a36bdfcd657c3cc345ae5d740303","href":"https://static.observableusercontent.com/files/31a6b3aab8ef07c9800aef54786aa0beeb0918af9751593562b5657b33c35814bd9876d7b2b8cbed4f0ab3abc93614006664a36bdfcd657c3cc345ae5d740303","name":"Crystal-Medium.otf","type":"font/otf","lastModified":1733358356935.983,"size":86320},{"id":"abcf544737c0347964bdcefb2c2dd2b608bfc600f3c0b0fbfa6aa6d15ae7989ce348a699fc69ed9270dd1718ad055bd84634880e11c4f1a0c7edb24cf8460388","href":"https://static.observableusercontent.com/files/abcf544737c0347964bdcefb2c2dd2b608bfc600f3c0b0fbfa6aa6d15ae7989ce348a699fc69ed9270dd1718ad055bd84634880e11c4f1a0c7edb24cf8460388","name":"Crystal-SemiBold.otf","type":"font/otf","lastModified":1733358364691.715,"size":86724},{"id":"9b5943f60d2d41859cc089e802e957e3972b4d4da535a58f79627df390ed53d88f665500f4fe705a06e3ee94e6d2cb88bb02587e1c90671f2bc15720304b30b3","href":"https://static.observableusercontent.com/files/9b5943f60d2d41859cc089e802e957e3972b4d4da535a58f79627df390ed53d88f665500f4fe705a06e3ee94e6d2cb88bb02587e1c90671f2bc15720304b30b3","name":"Crystal-Regular.otf","type":"font/otf","lastModified":1733358357214.882,"size":78280},{"id":"926beca6ade37ac2ae8dc782c08db60de0f3dfdcf36e6b9379ac9eadfbe494d5c1723358ada73c3c87a6bbec5363306fa7a18bb0e4a0e7ee99164d4c6f506d54","href":"https://static.observableusercontent.com/files/926beca6ade37ac2ae8dc782c08db60de0f3dfdcf36e6b9379ac9eadfbe494d5c1723358ada73c3c87a6bbec5363306fa7a18bb0e4a0e7ee99164d4c6f506d54","name":"Crystal-Thin.otf","type":"font/otf","lastModified":1733358357421.577,"size":76508},{"id":"26cc95de87e483a479a595e300a6aef6d6ef6a4b29a567d39d64d705becc2d7becb7634a858f625b78246e2de8db0382d5772c4b27d580ec5ef1657da25985cc","href":"https://static.observableusercontent.com/files/26cc95de87e483a479a595e300a6aef6d6ef6a4b29a567d39d64d705becc2d7becb7634a858f625b78246e2de8db0382d5772c4b27d580ec5ef1657da25985cc","name":"Crystal-Light.otf","type":"font/otf","lastModified":1733358357719.224,"size":82328},{"id":"578a2e39bbbaaa68c130eba19410cd8d16690745f14d384f9aaa99481ef9b2623261db39770278b37a37946bc00dd87b96c1900d30abab74be3942f3ccccdf56","href":"https://static.observableusercontent.com/files/578a2e39bbbaaa68c130eba19410cd8d16690745f14d384f9aaa99481ef9b2623261db39770278b37a37946bc00dd87b96c1900d30abab74be3942f3ccccdf56","name":"Crystal-Bold.otf","type":"font/otf","lastModified":1733358358467.723,"size":85576}] 2f:{"title":"Coldplay ticket sales","cells":[{"id":0,"value":"# Coldplay ticket sales","pinned":false,"hidden":false,"mode":"md"},{"id":1157,"value":"viewof proportion = Inputs.select([\"1.294/1\", \"4/5\", \"9/16\"], {label: \"Proportion\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1161,"value":"viewof selectedWidth = Inputs.range([576, width], {\n step: 1,\n label: \"Width\",\n value: width * 0.8\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"viewof replay = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1155,"value":"crystalUltraCondensed_bold = FileAttachment(\"Crystal Ultra Condensed_Bold (1).json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1185,"value":"crystalSemiBold_regular = FileAttachment(\"Crystal Semi Bold_Regular (3).json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":954,"value":"function getAttendanceText(value) {\n return `\n

Total Attendance

${formatNumber(\n Math.round(value)\n )}

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":578,"value":"colors = ({\n grey: \"rgba(191, 191, 191, 0.6)\",\n yellow: \"rgba(255, 165, 0, 1)\",\n arc: \"rgba(233, 237, 239, 0.7)\",\n label: \"#F7D048\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":562,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"### Data manipulations","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"data = coldplayTicketSalesData.map(d => {\n const coords = cityCoordinates[d.City];\n const startDate = new Date(d.Start)\n const endDate = d.End ? new Date(d.End) : startDate;\n return {\n ...d,\n ...coords,\n start_date: startDate,\n end_date: endDate,\n cumAttendance: parseFloat(d[\"Cumulative Attendance\"].replace(/,/g, '').replace(/\\s/g, '')),\n attendance: parseFloat(d[\"Attendance\"].replace(/,/g, '').replace(/\\s/g, '')),\n }\n}).filter(d => d.attendance && d.cumAttendance).sort((a, b) => a.start_date - b.start_date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"allCitiesGeoJson = ({\n type: \"FeatureCollection\",\n features: data.map((d) => ({\n type: \"Feature\",\n properties: {\n // scalerank: 8,\n // labelrank: 3,\n city: d.City,\n name: d.City.split(\",\")[0],\n value: d.cumAttendance,\n attendance: d.attendance,\n // diffascii: 0,\n latitude: d.latitude,\n longitude: d.longitude,\n // min_zoom: 7\n },\n bbox: [d.longitude, d.latitude, d.longitude, d.latitude],\n geometry: {\n type: \"Point\",\n coordinates: [d.longitude, d.latitude]\n }\n }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"coldplayTicketSalesData = FileAttachment(\"Data-Table 1 - Data-Table 1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"formatNumber = d3.format(\",\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":655,"value":"formatDate = d3.timeFormat(\"%b. %-d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":659,"value":"formatYear = d3.timeFormat(\"%Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":678,"value":"formatDay = d3.timeFormat(\"%-d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":625,"value":"formatDateStr = (start_date, end_date) => {\n let startYear = ''\n\n if (start_date.getYear() !== end_date.getYear()) {\n startYear += `${formatYear(start_date)} - `\n }\n \n let year = `

\n ${startYear}${formatYear(end_date)}\n

`\n\n let endRange = ''\n \n if (start_date.getDate() !== end_date.getDate()) {\n if (start_date.getMonth() !== end_date.getMonth()) {\n endRange += ` - ${formatDate(end_date)}`\n } else {\n endRange += ` - ${formatDay(end_date)}`\n }\n }\n \n let dateRange = `

\n ${formatDate(start_date)}${endRange}\n

`\n\n return year + dateRange\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"Globe = (await import(\"https://cdn.jsdelivr.net/npm/globe.gl@v2.41.2/+esm\")).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"gsap = import(\"https://esm.run/gsap\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"THREE = {\n const three = await import(\"three@0.170.0\");\n const { FontLoader, Font } = await import(\n \"three@0.170.0/examples/jsm/loaders/FontLoader.js\"\n );\n const { TextGeometry } = await import(\n \"three@0.170.0/examples/jsm/geometries/TextGeometry.js\"\n );\n return {\n ...three,\n Font,\n FontLoader,\n TextGeometry\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":494,"value":"helveticaBold = fetch(\"https://raw.githubusercontent.com/mrdoob/three.js/refs/heads/dev/examples/fonts/helvetiker_bold.typeface.json\").then(j => j.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"$34","pinned":true,"hidden":false,"mode":"html"},{"id":1151,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1011,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}