Curious human. Interested in the mechanics of how things work.
yScaleP.domain()
yScaleP = {
let slopeP = show === 'GDP' ? gdpDomain : popnDomain;
return d3.scaleLinear().range([0, boxSize*2]).domain(slopeP);
// if (scaleButton === 'log') {
// return d3.scaleSymlog().range([0, boxSize*2]).domain(slopeP);
// } else {
// return d3.scaleLinear().range([0, boxSize*2]).domain(slopeP);
// }
}
lineP = d3.line()
.x(d => xScaleP(d.year))
.y(d => yScaleP(d.val));
popn = ['urban_2019', 'urban_2050_a']
gdp = ['gdp_urban_2019', 'gdp_urban_2050_a']
selectedPopns[0]
d3
.select(test)
.select('[aria-description="GDP per capita (USD) →"]')
.enter()
.selectAll("text")
.each(function (d) {
// d is the tick's value (in this case, a number)
d3.select(this)
.attr('font-family', 'Helvetica Neue')
.attr("fill", 'black')
.attr("font-size", 10);
})
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}),
]
})
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
}),
]
})
baseData[0]
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
}),
]
})
pColor = ({'urban_2019': "#A2D6F9", 'urban_2050_a': "#2D76F0"})
gColor = ({'gdp_urban_2019': "#f6aa1c", 'gdp_urban_2050_a': "#bc3908"})
popnScale = d3.scaleLinear().domain(popnDomain).range(radiusRange);
gdpScale = d3.scaleLinear().domain(gdpDomain).range(radiusRange);
selectedPopns[0]
computedPopns = {
let popns = []
for (let i in selectedPopns){
let row = selectedPopns[i];
let gdpGap = row['gdp_urban_2050_a'] - row['gdp_urban_2019'];
let popnGap = row['urban_2050_a'] - row['urban_2019'];
row['gdpGap'] = gdpGap;
row['popnGap'] = popnGap;
popns.push(row);
}
return popns;
}
baseData = FileAttachment("urban-data-growth-gdpc-full@1.csv").csv()
import {slider} from "@jashkenas/inputs"
import {Swatches} from "@d3/color-legend"
import {mapProjection, activeColorScheme, worldMap} from "b3a0a78984d6df2e"
import {rangeSlider} from '@mootari/range-slider'
viewof range = Inputs.range([0, 100], {label: "Amount", step: 1})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
