Public
Edited
May 30
Fork of Untitled
Insert cell
Insert cell
Insert cell
api_nyGdpPcapCd_ds2_en_csv_v2_369430 = FileAttachment("API_NY.GDP.PCAP.CD_DS2_en_csv_v2_369430.csv")
Insert cell
import {vl} from "@vega/vega-lite-api"
Insert cell
data = await FileAttachment("API_NY.GDP.PCAP.CD_DS2_en_csv_v2_369430.csv").csv({typed: true})
Insert cell
Insert cell
viewof lineChart = vl
.markLine({point: true, interpolate: "monotone"})
.data(allData)
.encode(
vl.x()
.fieldQ("Date")
.title("Year")
.axis({ format: "d", tickCount: 6 }),

vl.y().fieldQ("GDP")
.title("GDP per capita (current US$)"),
vl.color().fieldN("country").title("Country"),
vl.tooltip([
{field: "country", title: "Country"},
{field: "Date", title: "Year"},
{field: "GDP", title: "GDP per capita", format: ","}
])
)
.width(800)
.height(400)
.padding({bottom: 90})
.title("GDP per Capita Over Time: USA, GBR, CHN, LAC")
.render();

Insert cell
allData = [
...USA.map(d => ({...d, country: "USA"})),
...GBR.map(d => ({...d, country: "GBR"})),
...CHN.map(d => ({...d, country: "CHN"})),
...LAC.map(d => ({...d, country: "LAC"}))
]
Insert cell
Insert cell
Insert cell
//Clean up the raw data and obtain only the necessary data from the necessary input lines
desired = {
//raw input string
const raw = await FileAttachment("API_NY.GDP.PCAP.CD_DS2_en_csv_v2_369430.csv").text();
//format the raw string to obtain desired lines and data (name, code, date)
const formatted = raw.replace(/[\r"]/g, '') //remove quotations and parentheses
.replace(/GDP per capita \(current US\$\),/g, '') //remove GDP per capita (current US$) (uneccessary)
.replace(/NY.GDP.PCAP.CD,/g, '') //remove //remove NY.GDP.PCAP.CD (uneccessary)
.replace(/Indicator Name,Indicator Code,/g, '') //remove Indicator Name,Indicator Code from first line
.split('\n').slice(4).join('\n'); //delete header (first four lines)
//receive only the desired country statistics (USA,LAC,CHN,GBR) and the header line
const result = formatted.split('\n').filter(line => line.includes('USA') || line.includes('LAC') || line.includes('CHN') || line.includes('GBR') || line.includes('Country Name')).join('\n') ;
return result;
}
Insert cell
//get the line for GBR, call array create function
GBR = {
const lines = desired.trim().split('\n').filter(line => line.trim());
const gbrLine = lines.find(line => line.includes(',GBR,'));
return gbrLine ? createGDPArray(gbrLine, desired) : [];
}
Insert cell
//get the line for CHN, call array create function
CHN = {
const lines = desired.trim().split('\n').filter(line => line.trim());
const chnLine = lines.find(line => line.includes(',CHN,'));
return chnLine ? createGDPArray(chnLine, desired) : [];
}
Insert cell
//get the line for LAC, call array create function
LAC = {
const lines = desired.trim().split('\n').filter(line => line.trim());
const lacLine = lines.find(line => line.includes(',LAC,'));
return lacLine ? createGDPArray(lacLine, desired) : [];
}

Insert cell
//get the line for USA, call array create function
USA = {
const lines = desired.trim().split('\n').filter(line => line.trim());
const usaLine = lines.find(line => line.includes(',USA,'));
return usaLine ? createGDPArray(usaLine, desired) : [];
}
Insert cell
//create four arrays: USA, LAC, CHN, GBR
//for each array, format data into objects each containing the year and GDP
//the arrays this generates will be read by the graphing function
createGDPArray = function(dataLine, dataString) {
//extract years from string desired (header line: Country Name,Country Code,1960...)
const lines = dataString.trim().split('\n').filter(line => line.trim());
const headers = lines[0].split(',');
const years = headers.slice(2);
//parse data line by ,
const row = dataLine.split(',');
const countryName = row[0]; //name of country
const countryCode = row[1]; //code of country
const gdpValues = row.slice(2); //all gdp values

//form the array
const result = [];
//for the total number of years
for (let i = 0; i < years.length; i++) {
const year = years[i];
const gdpValue = gdpValues[i];
//skip if year is invalid or empty
const parsedYear = parseInt(year);
if (isNaN(parsedYear) || !year || year.trim() === '') {
continue;
}
//get the GDP value
let parsedGDP = null;
if (gdpValue && gdpValue.trim() !== '') {
const numValue = parseFloat(gdpValue);
if (!isNaN(numValue)) {
parsedGDP = numValue;
}
}
//push the date and gdp values as objects in the array
result.push({
"Date": parsedYear,
"GDP": parsedGDP
});
}
//return array
return result;
}
Insert cell

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.
Learn more