Curious human. Interested in the mechanics of how things work.
Public
Edited
Jun 12, 2023
1 fork
Importers
1 star
viewof movement = Inputs.radio(["All", "International", "Domestic"], {label: "Show which type of movement", value: "All"})
chart = slopeChart(processData(order))
finalData = processData(order)
processData(order)
function slopeChart(data) {
return Plot.plot({
width: 500,
height: 1000,
x: {type: "point", axis: "top"},
y: {axis: null, inset: 10},
color: {
type: "ordinal",
domain: continents,
range: colors
},
marks: [
Plot.line(data, {x: "year", y: 'value', z: "name", strokeWidth: 1.5, stroke: "continent"}),
Plot.text(data, Plot.selectFirst({x: "year", y: 'value', z: "name", text: d => getText(d, 'value', data, label), textAnchor: "end", dx: -3, fill: "continent", fontSize: 6})),
Plot.text(data, Plot.selectLast({x: "year", y: 'value', z: "name", text: d => getText(d, 'value', data, label), textAnchor: "start", dx: 3, fill: "continent", fontSize: 6})),
]
})
}
changeProps(chart, 10)
function changeProps (chart, fontsize) {
d3
.select(chart)
.selectAll("[aria-label=text]")
.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)
.selectAll("[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-weight', 400)
.attr('font-size', 28)
.attr("font-family", "IBM Plex Sans");
})
return chart
}
function getText(d, type, data, label) {
// if (type === 'rank' || type === 'value' || type === 'pagerank'){
// return `${d.name} ${Math.abs(d.rank - data.length/2)}`;
// } else if (type === 'pagerank_order'){
// return ` ${Math.abs(d.pagerank_order-data.length/2)} ${d.name}`;
// }
if (d.year === 2019){
//return `${format(Math.round(d.volume/1000)*1000)} ${d.name} ${Math.abs(d['value'] - val)}`;
return `${d.name} ${Math.abs(d['value'] - val)}`;
} else {
//return ` ${Math.abs(d['value'] - val)} ${d.name} ${format(Math.round(d.volume/1000)*1000)}`;
return ` ${Math.abs(d['value'] - val)} ${d.name}`;
}
}
city = slopeChart(cityData)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
cityData = processDataC()
changeProps(city, 10)
locale = d3.formatLocale({
thousands: " ",
grouping: [3]
});
format = locale.format(",.0f")
format(221000)
val = 100
continents = ["EU", "AS", "SA", "AF", "NA", "OC"]
data = ({All: all, International: intl, Domestic: dom})
colors = ["#ff595e","#ff924c","#ffca3a","#8ac926","#1982c4","#6a4c93"]
order
data[movement]['tf50'].filter(row => row.rank_2050 == 'rank_0').map(row => row.id);
test = data[movement]['tf50'].filter(row => row.rank_2050 == 'rank_0')
usa = test.filter(row=> row.country == 'USA');
eu = test.filter(row=> row.continent == 'EU');
na = test.filter(row=> row.continent == 'NA');
as = test.filter(row=> row.continent == 'AS');
data[movement]['tf19'].filter(row => row.rank_2019 == 'rank_0').map(row => row.id);
function processData(order) {
let df = [];
let copy19, copy50;
let value = label[order];
let base = data[movement];
let pr19 = base['pr19'];
let pr50 = base['pr50'];
let tf19 = base['tf19'];
let tf50 = base['tf50'];
if (order.includes('Pagerank')){
copy19 = JSON.parse(JSON.stringify(pr19));
copy50 = JSON.parse(JSON.stringify(pr50));
} else {
copy19 = JSON.parse(JSON.stringify(tf19));
copy50 = JSON.parse(JSON.stringify(tf50));
}
console.log(copy19);
copy19.map((row, i) => {
let year = {name: row['id'] +', ' + row['country'], value: row[value], year: 2019, continent: row['continent'], volume: row['total_flights_2019']}
df.push(year);
});
copy50.map((row, i) => {
let year = {name: row['id'] +', ' + row['country'], value: row[value], year: 2050, continent: row['continent'], volume: row['total_flights_2050']}
df.push(year);
});
return df;
}
function processDataC() {
let df = [];
let copy19, copy50;
copy19 = JSON.parse(JSON.stringify(city19));
copy50 = JSON.parse(JSON.stringify(city50));
copy19.map((row, i) => {
let year = {name: row['id'] +', ' + row['country'], value: row['level'], year: 2019, continent: row['continent_x'], volume: row['value']}
df.push(year);
});
copy50.map((row, i) => {
let year = {name: row['id'] +', ' + row['country'], value: row['level'], year: 2050, continent: row['continent_x'], volume: row['total_flights_2050']}
df.push(year);
});
return df;
}
processDataC().slice(-1)
pr50a[0]
city19 = FileAttachment("city-reg-19@5.csv").csv({typed: true})
city50 = FileAttachment("city-reg-50@5.csv").csv({typed: true})
intl = ({ pr19: pr19i, pr50: pr50i, tf19: tf19i, tf50: tf50i })
all = ({ pr19: pr19a, pr50: pr50a, tf19: tf19a, tf50: tf50a })
dom = ({ pr19: pr19d, pr50: pr50d, tf19: tf19d, tf50: tf50d })
pr19a = FileAttachment("top-pr-19-all@4.csv").csv({typed: true})
tf19a = FileAttachment("top-tf-19-all@5.csv").csv({typed: true})
pr50a = FileAttachment("top-pr-50-all@4.csv").csv({typed: true})
tf50a = FileAttachment("top-tf-50-all@5.csv").csv({typed: true})
pr19i = FileAttachment("top-pr-19@5.csv").csv({typed: true})
pr50i = FileAttachment("top-pr-50@5.csv").csv({typed: true})
tf50i = FileAttachment("top-tf-50@5.csv").csv({typed: true})
tf19i = FileAttachment("top-tf-19@5.csv").csv({typed: true})
pr19d = FileAttachment("top-pr-19-dom@3.csv").csv({typed: true})
pr50d = FileAttachment("top-pr-50-dom@2.csv").csv({typed: true})
tf50d = FileAttachment("top-tf-50-dom@4.csv").csv({typed: true})
tf19d = FileAttachment("top-tf-19-dom@3.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.
