2f:T16a4,allCities = { //worldMap.attr("style", "background-color:#23548A;"); worldMap.select("#cities").remove() worldMap.select("#names").remove() // worldMap.select("#land").attr("fill", "#d8d8d8"); const simulation = d3 .forceSimulation(computedPopns) .force( "x", d3.forceX((d) => mapProjection([d.Longitude, d.Latitude])[0]) ) .force( "y", d3.forceY((d) => mapProjection([d.Longitude, d.Latitude])[1]) ) // .force( // "collide", d => // d3.forceCollide(radius*repulsionFactor).strength(0.5) // ) .force( "collide", d3.forceCollide(d => { if (show === 'GDP') { if (d[gdp[0]] < d[gdp[1]]) { return gdpScale(d[gdp[0]])+repulsionFactor; } else { return gdpScale(d[gdp[1]])+repulsionFactor; } } else { if (d[popn[0]] < d[popn[1]]) { return popnScale(d[popn[0]])+repulsionFactor; } else { return popnScale(d[popn[1]])+repulsionFactor; } } }).strength(1) ); const nodeG = worldMap.append("g") .attr("id", "cities") .selectAll("g") .data(computedPopns) .join("g") .call(drag(simulation)); // nodeG.append('circle') // .attr("r", d => radiusScale(d[d["plotOrder"][2]])); // nodeG.append("g") // .each(function(node) { // for (let i in node["plotOrder"]) { // let year = node["plotOrder"][i]; // d3.select(this).append("g") // .append("circle") // .attr("r", d => radiusScale(d[year])) // .attr("fill", yearScale(year)); // } // }) if (show==="Comparison"){ nodeG.append('circle') .attr("r", radius)//(d) => radiusScale(d[d["plotOrder"][0]]) .attr("fill", "none"); nodeG.append("g") .each(function(node, i) { let symbol = d3.select(this).append("g"); let pPlotOrder = node['popnPlotOrder']; let gPlotOrder = node['gdpPlotOrder']; symbol.append("clipPath") .attr("id", "left-clip_" + i) .append("rect") .attr("width", radius) .attr("height", radius * 2) .attr("x", -radius) .attr("y", -radius); for (let i = 0; i < pPlotOrder.length; i+=1) { let prop = pPlotOrder[i]; symbol .append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", d => popnScale(d[prop])) .attr("clip-path", "url(#left-clip_" + i + ")") .style("fill", (d) => pColor[prop]); } symbol.append("clipPath") .attr("id", "right-clip_" + i) .append("rect") .attr("width", radius) .attr("height", radius * 2) .attr("x", 0) .attr("y", -radius); for (let i = 0; i < gPlotOrder.length; i+=1) { let prop = gPlotOrder[i]; symbol .append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", d => gdpScale(d[prop])) .attr("clip-path", "url(#right-clip_" + i + ")") .style("fill", gColor[prop]); } }) } else { let nodeProp; let nodeScale; let nodeColor; if (show==="GDP") { nodeProp = 'gdpPlotOrder'; nodeScale = gdpScale; nodeColor = gColor; } else { nodeProp = 'popnPlotOrder'; nodeScale = popnScale; nodeColor = pColor; } nodeG.append("g") .each(function(node, i) { let symbol = d3.select(this).append("g"); // let pPlotOrder = node['popnPlotOrder']; if (showType === "Both") { let plotOrder = node[nodeProp]; for (let i = 0; i < plotOrder.length; i+=1) { let prop = plotOrder[i]; symbol .append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", d => nodeScale(d[prop])) .attr("clip-path", "url(#right-clip_" + i + ")") .style("fill", nodeColor[prop]); } } else { if (show === "GDP") { let prop = showType === 2019 ? "gdp_urban_2019" : "gdp_urban_2050_a"; symbol .append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", d => nodeScale(d[prop])) .attr("clip-path", "url(#right-clip_" + i + ")") .attr("stroke", "white") .attr("stroke-width", "0.5px") .style("fill", nodeColor[prop]); } else { let prop = showType === 2019 ? "urban_2019" : "urban_2050_a"; symbol .append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", d => nodeScale(d[prop])) .attr("clip-path", "url(#right-clip_" + i + ")") .attr("stroke", "white") .attr("stroke-width", "0.5px") .style("fill", nodeColor[prop]); } } }) } simulation.on("tick", () => { nodeG.attr("transform", d => `translate(${d.x}, ${d.y})`)}); invalidation.then(() => simulation.stop()); // worldMap.append("g") // .attr("id", "names") // .selectAll("text") // .data(topCities) // .join("text") // .attr("transform", d => `translate(${mapProjection([d["Longitude"], d["Latitude"]])})`) // .attr("font-size", "0.4em") // .attr("font-family", "Akkurat LL") // .attr("fill", "white") // .attr("stroke", "#063249") // .attr("stroke-width", "0.1px") // .attr("paint-order", "stroke") // .text(d => d["Urban Agglomeration"]); return worldMap.node(); }30:Tbde,function forceClusterCollision() { let nodes let radii let strength = 1 let iterations = 1 let clusterPadding = 0 //addition function radius(d) { return d.r } function x(d) { return d.x + d.vx } function y(d) { return d.y + d.vy } function constant(x) { return function() { return x } } function jiggle() { return 1e-6 } //change - PLEASE no Math.random() in there ಥ﹏ಥ // function jiggle() { return (Math.random() - 0.5) * 1e-6 } function force() { let i let n = nodes.length let tree let node let xi let yi let ri let ri2 for (let k = 0; k < iterations; ++k) { tree = d3.quadtree(nodes, x, y).visitAfter(prepare) for (i = 0; i < n; ++i) { node = nodes[i] ri = radii[node.index] ri2 = ri * ri xi = node.x + node.vx yi = node.y + node.vy tree.visit(apply) }//for i }//for k function apply(quad, x0, y0, x1, y1) { let data = quad.data let rj = quad.r let r = ri + rj + clusterPadding //change if (data) { if (data.index > node.index) { let x = xi - data.x - data.vx let y = yi - data.y - data.vy let l = x * x + y * y r = ri + rj + (node.cluster !== quad.data.cluster ? clusterPadding : 0) //addition if (l < r * r) { if (x === 0) x = jiggle(), l += x * x if (y === 0) y = jiggle(), l += y * y l = (r - (l = Math.sqrt(l))) / l * strength node.vx += (x *= l) * (r = (rj *= rj) / (ri2 + rj)) node.vy += (y *= l) * r data.vx -= x * (r = 1 - r) data.vy -= y * r }//if }//if return }//if return x0 > xi + r || x1 < xi - r || y0 > yi + r || y1 < yi - r }//apply }//force function prepare(quad) { if (quad.data) return quad.r = radii[quad.data.index]; for (let i = quad.r = 0; i < 4; ++i) { if (quad[i] && quad[i].r > quad.r) { quad.r = quad[i].r }//if }//for i } function initialize() { if (!nodes) return; let i, n = nodes.length, node radii = new Array(n) for (i = 0; i < n; ++i) node = nodes[i], radii[node.index] = +radius(node, i, nodes) } force.initialize = function (_) { nodes = _ initialize() return force } force.iterations = function (_) { return arguments.length ? (iterations = +_, force) : iterations } //I wish strength could be a function of the node as well... force.strength = function (_) { return arguments.length ? (strength = +_, force) : strength } force.radius = function (_) { return arguments.length ? (radius = typeof _ === "function" ? _ : constant(+_), force) : radius } //addition - the actual pixels of padding force.clusterPadding = function (_) { return arguments.length ? (clusterPadding = +_, force) : clusterPadding } return force }//function forceCollision31:T5d0,test2 = Plot.plot({ inset: 8, grid: true, width: width*1.25, height: 1000, marginLeft: 50, // space to the left of the chart marginBottom: 50, // space below the chart color: { legend: true, }, facet: { data: baseData, x: "continent" }, x: { // label: "GDP per capita (USD) →", tickFormat: "~s", type: "log", ticks: 3 }, y: { // label: "↑ Population (people)", type: "log", tickFormat: "~s", // textColor: "white", ticks: 5 }, marks: [ //dots // Plot.dot(baseData, {x: "gdp_capita_2019", y: "urban_2019", text: "iso3", stroke: "continent", strokeWidth: 1, // //fill:"white", r: 10}), // }), // Plot.dot(data_gdpc, {x: "gdp_capita_2050", y: "urban_2050_a", text: "iso3", stroke: "continent"}), //links Plot.link(baseData, { x1: "gdp_capita_2019", y1: "urban_2019", x2: "gdp_capita_2050", y2: "urban_2050_a", stroke: "continent", markerEnd: "arrow", opacity: 0.4, strokeWidth: 2, }), //text Plot.text(baseData.slice(0, 150), {x: "gdp_capita_2019", y: "urban_2019", text: "city", fill: "continent", stroke: "white", opacity: 0.8, fontSize: 12}), // Plot.text(baseData, {x: "gdp_capita_2050", y: "urban_2050_a", text: "city", // fill: "continent", // // stroke: "white", // opacity: 0.8, // fontSize: 11}), ] })32:T57a,test3 = Plot.plot({ inset: 8, grid: true, width: 750, height: 750, marginLeft: 50, // space to the left of the chart marginBottom: 50, // space below the chart color: { legend: true, }, // facet: { // data: baseData, // x: "continent" // }, x: { // label: "GDP per capita (USD) →", tickFormat: "~s", type: "log", ticks: 3 }, y: { // label: "↑ Population (people)", type: "log", tickFormat: "~s", // textColor: "white", ticks: 5 }, marks: [ //dots Plot.dot(baseData, {x: "gdp_capita_2019", y: "urban_2019", text: "iso3", stroke: "continent"}), // Plot.dot(data_gdpc, {x: "gdp_capita_2050", y: "urban_2050_a", text: "iso3", stroke: "continent"}), //text Plot.text(baseData, {x: "gdp_capita_2019", y: "urban_2019", text: "city", font: "IBM Plex Sans", fill: "continent", stroke: "white", opacity: 1, fontSize: 12}), // Plot.text(baseData, {x: "gdp_capita_2050", y: "urban_2050_a", text: "city", // fill: "continent", // // stroke: "white", // opacity: 0.8, // fontSize: 11}), //links Plot.link(baseData, { x1: "gdp_capita_2019", y1: "urban_2019", x2: "gdp_capita_2050", y2: "urban_2050_a", stroke: "continent", markerEnd: "arrow", strokeWidth: 1.5, opacity: 0.5 }), ] })33:T53f,test = Plot.plot({ inset: 8, grid: true, width: width*1.25, height: 750, marginLeft: 50, // space to the left of the chart marginBottom: 50, // space below the chart color: { legend: true, }, facet: { data: baseData, x: "continent" }, x: { // label: "GDP per capita (USD) →", tickFormat: "~s", type: "log", ticks: 3 }, y: { // label: "↑ Population (people)", type: "log", tickFormat: "~s", // textColor: "white", ticks: 5 }, marks: [ //dots // Plot.dot(data_gdpc, {x: "gdp_capita_2019", y: "urban_2019", text: "iso3", stroke: "continent"}), // Plot.dot(data_gdpc, {x: "gdp_capita_2050", y: "urban_2050_a", text: "iso3", stroke: "continent"}), //text Plot.text(baseData, {x: "gdp_capita_2019", y: "urban_2019", text: "city", fill: "continent", // stroke: "white", opacity: 0.8, fontSize: 11}), Plot.text(baseData, {x: "gdp_capita_2050", y: "urban_2050_a", text: "city", fill: "continent", // stroke: "white", opacity: 0.8, fontSize: 11}), //links Plot.link(baseData, { x1: "gdp_capita_2019", y1: "urban_2019", x2: "gdp_capita_2050", y2: "urban_2050_a", stroke: "continent", markerEnd: "arrow", opacity: 0.3 }), ] })34:T4b2,colorschemes = ({ "Dark": { "minor": "#99ACCA", "admin": "#F5A42A", "primary": "#10A77D", "sizes": {"minor": 0.25, "admin": 1, "primary": 2}}, "DarkBlue": { "small_airport": "#99ACCA", "admin": "#F5A42A", "primary": "#10A77D", "sizes": {"minor": 0.25, "admin": 1, "primary": 2}}, "DarkBlue2": { "minor": "#99ACCA", "admin": "#F5A42A", "primary": "#10A77D", "sizes": {"minor": 0.25, "admin": 1, "primary": 2}}, "Light": { "minor": "#99ACCA", "admin": "#F5A42A", "primary": "#10A77D", "sizes": {"minor": 0.25, "admin": 1, "primary": 2}}, "Map1": { "minor": "#99ACCA", "admin": "#F5A42A", "primary": "#10A77D", "sizes": {"minor": 0.25, "admin": 1, "primary": 2}}, "Map2": { "minor": "#99ACCA", "admin": "#F5A42A", "primary": "#10A77D", "sizes": {"minor": 0.25, "admin": 1, "primary": 2}}, })35:[{"id":"83f77624668e8f726c5e85576c332265ea6233976a9af3578de561b0359c6f8d41c2059b102d1029bb34e68f2748008371d9fb74c7e43ef0a197a90a93975b30","href":"https://static.observableusercontent.com/files/83f77624668e8f726c5e85576c332265ea6233976a9af3578de561b0359c6f8d41c2059b102d1029bb34e68f2748008371d9fb74c7e43ef0a197a90a93975b30","name":"un_cities_over_300k@3.csv","type":"text/csv","lastModified":1663150263785.902,"size":1217887},{"id":"79b2a2b6e97f0961a6e3e1dbdf3d0154d479b359e446252d1aad96dac5522b4f0391feda83b842e42051cae6a445bee6eb1f00a6b196bbe65594756c751df684","href":"https://static.observableusercontent.com/files/79b2a2b6e97f0961a6e3e1dbdf3d0154d479b359e446252d1aad96dac5522b4f0391feda83b842e42051cae6a445bee6eb1f00a6b196bbe65594756c751df684","name":"urban-data-growth-gdpc-full@1.csv","type":"text/csv","lastModified":1663150263785.902,"size":306539},{"id":"288678f9580652e941663eea8e7bad4c483bab7b5882e80fb976860cd878bd0581eaeeca5628bcf8ac0428305d244a9e36faf00ecec11e087157976be2ac0261","href":"https://static.observableusercontent.com/files/288678f9580652e941663eea8e7bad4c483bab7b5882e80fb976860cd878bd0581eaeeca5628bcf8ac0428305d244a9e36faf00ecec11e087157976be2ac0261","name":"urban-data-growth-gdpc-full@2.csv","type":"text/csv","lastModified":1683674557849.463,"size":445633},{"id":"367b266935f9c8acbe6ef1c164e9d70aa6dbff2c169984f9fd60e202d856b31cc254397547339c6ed937c13a0b0181fb4323b08519781120c5cdd06f7c5ad0cd","href":"https://static.observableusercontent.com/files/367b266935f9c8acbe6ef1c164e9d70aa6dbff2c169984f9fd60e202d856b31cc254397547339c6ed937c13a0b0181fb4323b08519781120c5cdd06f7c5ad0cd","name":"data.csv","type":"text/csv","lastModified":1684158137492.087,"size":560578},{"id":"dd9e6b0525f660bdaa1c3113359c3aa490bf0bf9b4b8efea762d8cc3abf7cd3da5168ee935d2c2e4a9b658dd8cec3c054669a1367d5663acc00e5c905e9140f6","href":"https://static.observableusercontent.com/files/dd9e6b0525f660bdaa1c3113359c3aa490bf0bf9b4b8efea762d8cc3abf7cd3da5168ee935d2c2e4a9b658dd8cec3c054669a1367d5663acc00e5c905e9140f6","name":"urban-data-growth-gdpc-full.csv","type":"text/csv","lastModified":1681719060575.46,"size":445633}] 2d:{"title":"World-Cities-GDP-Popn-Toggle","cells":[{"id":0,"value":"# World-Cities-GDP-Popn-Toggle\n\nPages:\n- 12: all world cities by growth in populations\n\nNotes:\n- Population per city per year\n\n## Instructions\n- You can choose which years to visualize! _I don't recommend more than five years though._\n- You can change the amount of repulsion of the circles\n- You can change the minimum and maximum radii\n\nTo download SVG or PNG:\n- Click on three dot button on LHS\n- Select `Download SVG`\n\n### Data source\n- UN World Urban Population (2018): https://population.un.org/wup/","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"## Show all cities","pinned":false,"hidden":false,"mode":"md"},{"id":160,"value":"viewof text = Inputs.toggle({label: \"Show city names?\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"viewof radiusRange = rangeSlider({\n min: 0.01,\n max: radius,\n // Note that values must be specified as array of length 2.\n value: [1.5, radius],\n // Custom slider CSS, replaces all styles.\n // theme: themes[theme],\n // Overrides the range color. Support for range colors is up to the theme.\n title: 'Circle radius',\n description: 'Control minimum and maximum radius',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"viewof radius = slider({\n min: 1,\n max: 10,\n step: 0.01,\n value: 10,\n format: \",\",\n description:\n \"Radius\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"viewof repulsionFactor = slider({\n min: 0.1,\n max: 2,\n step: 0.01,\n value: 0.5,\n format: \",\",\n description:\n \"Cartogram repulsion factor\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1005,"value":"d3.extent(computedPopns.map(row=>row['gdpGap']))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"d3.extent(computedPopns.map(row=>row['popnGap']))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1052,"value":"computedPopns","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"viewof showType = Inputs.radio([2019, 2050, \"Both\"], {label: \"Show what year?\", value: 2019})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"viewof show = Inputs.radio([\"Comparison\", \"GDP\", \"Population\"], {label: \"Show which values?\", value: \"GDP\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"// Fill colors\nSwatches(d3.scaleOrdinal().domain(['urban_2019', 'urban_2050_c', 'gdp_2019', 'gdp_2050_c']).range([\"#A2D6F9\", \"#2D76F0\", \"#ffd373\", \"#fd8021\"]), {\n columns: \"100px\", \n textSize: \"20px\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"ldn = computedPopns.filter(row => row.city == 'London')[0];","pinned":true,"hidden":false,"mode":"ojs"},{"id":1157,"value":"ldn['urban_2050_a'] > ldn['urban_2019']","pinned":true,"hidden":false,"mode":"ojs"},{"id":1159,"value":"computedPopns","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":1099,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"# Plot Order","pinned":false,"hidden":false,"mode":"md"},{"id":588,"value":"popn = ['urban_2019', 'urban_2050_c']","pinned":true,"hidden":false,"mode":"ojs"},{"id":590,"value":"gdp = ['gdp_urban_2019', 'gdp_urban_2050_c']","pinned":true,"hidden":false,"mode":"ojs"},{"id":856,"value":"selectedPopns[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":879,"value":"d3\n .select(test)\n .select('[aria-description=\"↑ Population (people)\"]')\n .selectAll(\"text\")\n .each(function (d) {\n // d is the tick's value (in this case, a number)\n d3.select(this)\n .attr('font-family', 'Helvetica Neue')\n .attr(\"fill\", 'black')\n .attr(\"font-size\", 10);\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"d3\n .select(test)\n .select('[aria-description=\"GDP per capita (USD) →\"]')\n .enter()\n .selectAll(\"text\")\n .each(function (d) {\n // d is the tick's value (in this case, a number)\n d3.select(this)\n .attr('font-family', 'Helvetica Neue')\n .attr(\"fill\", 'black')\n .attr(\"font-size\", 10);\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":907,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":951,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":936,"value":"baseData[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":858,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":854,"value":"# Bike Plots","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"# Settings","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"## Color scheme settings\n\nYou can set a custom color scheme for the cities based on the colors of the map.","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"pColor = ({'urban_2019': \"#A2D6F9\", 'urban_2050_c': \"#2D76F0\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":662,"value":"gColor = ({'gdp_urban_2019': \"#f6aa1c\", 'gdp_urban_2050_c': \"#bc3908\"})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"## Scales","pinned":false,"hidden":false,"mode":"md"},{"id":380,"value":"// yearColors = [\"#3d348b\",\"#7678ed\",\"#f7b801\",\"#f18701\",\"#f35b04\"]\nyearColors = ['#a2d6f9', '#ff8800', '#ffb700', '#ffdd00', '#ffea00']","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"popnScale = d3.scaleLinear().domain(popnDomain).range(radiusRange);","pinned":true,"hidden":false,"mode":"ojs"},{"id":641,"value":"gdpScale = d3.scaleLinear().domain(gdpDomain).range(radiusRange);","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"## Domain finding","pinned":false,"hidden":false,"mode":"md"},{"id":245,"value":"years = {\n let keys = Array.from(Object.keys(data[0]));\n let years = [];\n \n for (let k in keys) {\n if (parseInt(keys[k])) {\n years.push(parseInt(keys[k]));\n }\n }\n\n return years;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"popnDomain = {\n let extents = []\n\n for (let i in selectedPopns) {\n let row = selectedPopns[i];\n for (let j in popn) {\n extents.push(row[popn[j]])\n }\n }\n return d3.extent(extents);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"gdpDomain = {\n let extents = []\n\n for (let i in selectedPopns) {\n let row = selectedPopns[i];\n for (let j in gdp) {\n extents.push(row[gdp[j]])\n }\n }\n return d3.extent(extents);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":973,"value":"## Computations","pinned":false,"hidden":false,"mode":"md"},{"id":984,"value":"selectedPopns[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":980,"value":"computedPopns = {\n let popns = []\n for (let i in selectedPopns){\n let row = selectedPopns[i];\n let gdpGap = row['gdp_urban_2050_c'] - row['gdp_urban_2019'];\n let popnGap = row['urban_2050_c'] - row['urban_2019'];\n row['gdpGap'] = gdpGap;\n row['popnGap'] = popnGap;\n popns.push(row);\n }\n return popns;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"# Imports","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":1161,"value":"cleanData = FileAttachment(\"data.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":592,"value":"baseData = FileAttachment(\"urban-data-growth-gdpc-full@2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"data = FileAttachment(\"un_cities_over_300k@3.csv\").csv({typed: true});","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"selectedPopns = {\n let newData = []\n let getAll = ['urban_2019', 'urban_2050_c', 'gdp_urban_2050_c', 'gdp_urban_2019']\n for (let i=0; i<=cleanData.length; i+=1) {\n let newRow = {};\n let oldRow = cleanData[i];\n \n try {\n newRow[\"city\"] = oldRow[\"city\"];\n newRow[\"Latitude\"] = parseFloat(oldRow[\"lat\"]);\n newRow[\"Longitude\"] = parseFloat(oldRow[\"lng\"]);\n for (let j in getAll){\n newRow[getAll[j]] = parseFloat(oldRow[getAll[j]]);\n }\n newData.push(newRow);\n } catch {\n }\n }\n return newData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"sortedPopns = {\n let newPopns = []\n for (let i in selectedPopns) {\n let row = selectedPopns[i];\n\n if (row[popn[0]] > row[popn[1]]) {\n row['popnPlotOrder'] = popn;\n } else {\n row['popnPlotOrder'] = [popn[1], popn[0]];\n }\n\n if (row[gdp[0]] > row[gdp[1]]) {\n row['gdpPlotOrder'] = gdp;\n } else {\n row['gdpPlotOrder'] = [gdp[1], gdp[0]];\n }\n\n newPopns.push(row);\n }\n return newPopns;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"topCities = sortedPopns.sort(function compareFn(a, b) { return b[2035] - a[2035] }).slice(0, 50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"## Code bits","pinned":false,"hidden":false,"mode":"md"},{"id":418,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"import {mapProjection, activeColorScheme, worldMap} from \"b3a0a78984d6df2e\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"viewof range = Inputs.range([0, 100], {label: \"Amount\", step: 1})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}