Public
Edited
Feb 2, 2023
d3 = require("d3@7")
import {vl} from '@vega/vega-lite-api'
//IMPORT YOUR GIST HERE
titanic = d3.csv("https://gist.githubusercontent.com/krispybird/56bbacb2dfd84c7c6083c62d62a5417a/raw/1b937a4e7404920ea6d3f729611ec06d43e7ae8e/titanic_train.csv")
// titanicParsed = {
// for (let i = 0; i < titanic.length; i++) {
// titanic[i].Age = +titanic[i].Age;
// titanic[i].SibSp = +titanic[i].SibSp;
// titanic[i].Survived = +titanic[i].Survived;
// titanic[i].CClass = +titanic[i].CClass;
// titanic[i].Fare = +titanic[i].Fare;
// titanic[i].Parch = +titanic[i].Parch;
// titanic[i].PassengerId = +titanic[i].PassengerId;
// //what other fields in titanic should be converted to a number? Add them below
// //Be careful of the capitalization of fields - Javascript is case sensitive!
// }
// return titanic;
// }
titanicCleanedD3 = d3.csv(
"https://gist.githubusercontent.com/krispybird/56bbacb2dfd84c7c6083c62d62a5417a/raw/1b937a4e7404920ea6d3f729611ec06d43e7ae8e/titanic_train.csv",
function (d) {
return {
age: +d.Age,
cabin: +d.CClass,
fare: +d.Fare
//what values should we convert? fill in the blanks
//think about what data fields we want to return --- not all are cloned automatically!
};
}
)
//the => Arrow function is a shorthand way of writing a function
//It is equivalent to d = function(){
// ...
// return a;
//}
//a function is called on every element in array titanic2, and creates a new array called titanicMap
//for every element in titanicMap, the age key is assigned a value corresponding to the numerical value of titanic2
titanicMap = titanic.map((d) => {
var a = d;
a.Age = +d.Age;
a.SibSp = +d.SibSp;
a.Parch = +d.Parch;
a.Fare = +d.Fare;
//remember what other fields we want to add in
return a;
})
//Let's get the max age of who was on the titanic
//try creating a variable called ageMax and find the age of the oldest person on the titanic
ageMax = {
//write a loop here
let maxAge = 0;
let name = "";
for (let i = 0; i < titanicMap.length; i++) {
if (titanicMap[i].Age > maxAge) {
maxAge = titanicMap[i].Age;
name = titanicMap[i].Name;
}
}
return maxAge + " " + name;
}
{
//Let's do this with d3.mean() now. We'll first have to use map to create an array with just the ages.
let ages = titanicMap.map(function (d) {
return +d.Age;
});
return d3.mean(ages);
}
//return your answers here
{
//Let's do this with d3.mean() now. We'll first have to use map to create an array with just the ages.
let ages = titanicMap.map(function (d) {
return +d.Age;
});
return "Median: " + d3.median(ages);
}
//return your answers here
{
//Let's do this with d3.mean() now. We'll first have to use map to create an array with just the ages.
let ages = titanicMap.map(function (d) {
return +d.Age;
});
return "Mode: " + d3.mode(ages);
}
firstClass = titanicMap.filter(function(d) {
return d.CClass == 1});
"The number of passengers in first class is: " + firstClass.length
//Try it here
{
let firstClassAges = firstClass.map(function (d) {
return +d.Age;
});
return (
"The average age in first class is: " + Math.round(d3.mean(firstClassAges))
);
}
//try to find the answer here for second class
//hint: you can use d3.mean to find the average age of passengers in second class
{
let secondClass = titanicMap.filter(function (d) {
return d.CClass == 2;
});
let secondAges = secondClass.map(function (d) {
return +d.Age;
});
return d3.mean(secondAges);
}
//try to find the answer here for third class
//hint: you can use d3.mean to find the passengers in third class
//try to find the answer here for second class
//hint: you can use d3.mean to find the average age of passengers in second class
{
let thirdClass = titanicMap.filter(function (d) {
return d.CClass == 3;
});
let thirdAges = thirdClass.map(function (d) {
return +d.Age;
});
return d3.mean(thirdAges);
}
function calculateTicket() {
//calculate the ticket inside this function
let ticket = 0;
let name = "";
for (let i = 0; i < titanicMap.length; i++) {
if (titanicMap[i].Fare > ticket) {
ticket = titanicMap[i].Fare;
name = titanicMap[i].Name;
}
}
return name + " paid: $" + ticket;
}
calculateTicket();
vl.markTick()
.data(titanicMap)
.encode(
vl.x().fieldQ('Fare')
)
.render()
//follow along here
vl
.markBar()
.data(titanicMap)
.encode(vl.x().fieldQ("Age").bin({ step: 20 }),
vl.y().count())
.render()
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.
