Curious human. Interested in the mechanics of how things work.
new_plot = Plot.plot({
inset: 8,
grid: true,
width: width,
height: width/4*3,
marginLeft: 50,
marginBottom: 50,
marginTop: 50,
color: {
legend: true,
},
x: {
// label: "GDP per capita (USD) →",
tickFormat: "~s",
type: "log",
},
y: {
// label: "↑ Population (people)",
type: "log",
tickFormat: "~s",
},
marks: [
// Plot.dot(newBaseData, {x: "gdp_capita_2019", y: "urban_2019", text: "iso3",
// stroke: "continent", r: 'total_flights_2019'}),
// Plot.dot(newBaseData, {x: "gdp_capita_2050", y: "urban_2050_a", text: "iso3",
// stroke: "continent", r: 'total_flights_2050'}),
Plot.link(newBaseData, {
x1: "gdp_capita_2019",
y1: "urban_2019",
x2: "gdp_capita_2050",
y2: "urban_2050_a",
stroke: "continent",
markerEnd: "arrow",
opacity: 0.8,
strokeWidth: 1
}),
Plot.text(newBaseData, {x: "gdp_capita_2019", y: "urban_2019", text: "id",
fill: "continent",
// stroke: "white",
// strokeWidth: 0.3,
fontSize: 12}),
]
})
// data = FileAttachment("penguins.csv").csv({typed: true})
data = FileAttachment("base-relatioship-plots@1.csv").csv()
new_data = FileAttachment("flight-gdp-popn@2.csv").csv()
height = 600
function changeColor (chart, color, fontsize) {
d3
.select(chart)
.select("[aria-label=x-axis]")
.selectAll("text")
.each(function (d) {
// d is the tick's value (in this case, a number)
d3.select(this)
.attr("fill", color)
.attr("font-size", fontsize)
.attr("font-family", "IBM Plex Sans");
})
d3
.select(chart)
.select("[aria-label=y-axis]")
.selectAll("text")
.each(function (d) {
// d is the tick's value (in this case, a number)
d3.select(this)
.attr("fill", color)
.attr("font-size", fontsize)
.attr("font-family", "IBM Plex Sans");
})
d3
.select(chart)
.select("[aria-label=x-axis]")
.selectAll("line")
.each(function (d) {
// d is the tick's value (in this case, a number)
d3.select(this)
.attr("stroke", color)
})
d3
.select(chart)
.select("[aria-label=y-axis]")
.selectAll("line")
.each(function (d) {
// d is the tick's value (in this case, a number)
d3.select(this)
.attr("stroke", color)
})
d3.select(chart)
.selectAll("text")
.each(function(d) {
d3.select(this)
.attr("font-family", "IBM Plex Sans");
})
return chart
}
{ changeColor(both, 'black', 24);
changeColor(gdp, 'black', 24);
changeColor(popn, 'black', 24);
changeColor(new_plot, 'black', 16);
changeColor(pChart, 'black', 24);
}
both = Plot.plot({
inset: 8,
width: 1200,
height: height,
marginRight: 50, // space to the left of the chart
marginBottom: 70, // space below the chart
marginTop: 50,
marginLeft: 100,
color: {
legend: true,
},
x: {
label: "Gravitational force (GDP, 2019) →",
tickFormat: "~n",
type: "log",
ticks: 5, },
y: {
label: "↑ Gravitational force (Population, 2019)",
type: "log",
tickFormat: "~n",
ticks: 5,
},
marks: [
Plot.dot(baseData, {x: "force_gdp_2019", y: "force_popn_2019", stroke: "#96B478", r: 7})
]
})
import {exportSVGWithBrandComponent} from "@saneef/svg-card"
mapRoutePNG = exportSVGWithBrandComponent(pChart)
changeColor(pChart, 'black', 24).svg;
pData
pChart = Plot.plot({
inset: 8,
width: 1200,
height: height,
marginRight: 50, // space to the left of the chart
marginBottom: 70, // space below the chart
marginTop: 50,
marginLeft: 100,
color: {
legend: true,
},
x: {
label: "Gravitational force (GDP, 2019) →",
tickFormat: "~n",
type: "log",
ticks: 5, },
y: {
label: "↑ Gravitational force (Population, 2019)",
type: "log",
tickFormat: "~n",
ticks: 5,
},
marks: [
Plot.dot(pData, {x: "total_flights", y: "total_flight_pred_2019", stroke: "#96B478", r: 7})
]
})
baseData[0]
gdp = Plot.plot({
inset: 8,
width: 1200,
height: height,
marginRight: 50, // space to the left of the chart
marginBottom: 70, // space below the chart
marginTop: 50,
marginLeft: 100,
color: {
legend: true,
},
x: {
label: "Gravitational force (GDP, 2019) →",
tickFormat: "~n",
type: "log",
fontsize: 20,
ticks: 5, },
y: {
label: "↑ Annual flights between two cities (2019)",
type: "log",
tickFormat: "~n",
ticks: 5,
},
marks: [
Plot.dot(baseData, {x: "force_gdp_2019", y: "total_flights", stroke: "#FABA01", r: 7})
]
})
popn = Plot.plot({
inset: 8,
width: 1200,
height: height,
marginRight: 50, // space to the left of the chart
marginBottom: 70, // space below the chart
marginTop: 50,
marginLeft: 100,
color: {
legend: true,
},
x: {
label: "Gravitational force (GDP, 2019) →",
tickFormat: "~n",
type: "log",
ticks: 5, },
y: {
label: "↑ Annual flights between two cities (2019)",
type: "log",
tickFormat: "~n",
ticks: 5,
},
marks: [
Plot.dot(baseData, {x: "force_popn_2019", y: "total_flights", stroke: "#A2D6F9", r: 7})
]
})
keep = ['force_gdp_2019', 'force_popn_2019', 'total_flights', 'continent']
pData
baseData = {
let clean_data = [];
for (let r in data) {
let row = data[r];
let newRow = {};
for (let k in keep) {
let col = keep[k];
if (col === 'continent') {
newRow[col] = row[col];
} else {
newRow[col] = parseFloat(row[col]);
}
}
clean_data.push(newRow);
}
return clean_data
}
new_keep = ['country', 'id', 'continent', 'gdp_capita_2019', 'gdp_capita_2050', 'urban_2019', 'urban_2050_a', 'total_flights_2019', 'total_flights_2050']
numbers = ['gdp_capita_2019', 'gdp_capita_2050', 'urban_2019', 'urban_2050_a', 'total_flights_2019', 'total_flights_2050']
newBaseData = {
let clean_data = [];
for (let r in new_data) {
let row = new_data[r];
let newRow = {};
for (let k in new_keep) {
let col = new_keep[k];
if (numbers.includes(col)) {
newRow[col] = parseFloat(row[col]);
} else {
newRow[col] = row[col];
}
// if (col === 'continent') {
// newRow[col] = row[col];
// } else {
// newRow[col] = parseFloat(row[col]);
// }
}
clean_data.push(newRow);
}
return clean_data
}
pData = FileAttachment("predicted-flights@6.csv").csv({typed: true})
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.
