Published
Edited
Sep 23, 2022
1 star
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;
//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!
titanic[i].SibSp = +titanic[i].SibSp;
titanic[i].Fare = +titanic[i].Fare;
titanic[i].Parch = +titanic[i].Parch;
}
return titanic;
}
titanicCleanedD3 =
d3.csv("https://gist.githubusercontent.com/krispybird/56bbacb2dfd84c7c6083c62d62a5417a/raw/1b937a4e7404920ea6d3f729611ec06d43e7ae8e/titanic_train.csv", function(d) {
return {
age: +d.Age,
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 = {
let maxAge= 0;
for(let i = 0; i<titanicMap.length;i++){
if(titanicMap[i].Age > maxAge){
maxAge = titanic[i].Age
}
}
//write a loop here
return (maxAge)
}
{
let max = titanicMap.map(d => { return +d.Age});
return d3.mean(max)
}
firstClass = titanicMap.filter(function(d) {
return d.CClass == 1});
//Try it here
{
let firstAvg = firstClass.map(function(d){return +d.age});
return d3.mean(firstAvg);_
}
//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
//try to find the answer here for third class
//hint: you can use d3.mean to find the passengers in third class
function calculateTicket()
{
//calculate the ticket inside this function
//return name + ", $" + ticket
}
calculateTicket();
//
vl.markTick()
.data(titanicMap)
.encode(
vl.x().fieldQ('Fare')
)
.render()
vl.markBar()
.data(titanicMap)
.encode(
vl.x().fieldQ('Age').bin(true),
vl.y().count('Survived')
)
.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.
