[IAT355] Tutorial 1: The Basics of Observable, Github, and D3 | SOLUTION[IAT355] Tutorial 3: Mapping Data to Features in Observable | SOLUTION[IAT355] Tutorial 4: Visual Forms Continued | Building More Charts in Observable | SOLUTION[IAT355] Tutorial 5: Multiple Views with Vega-Lite | SOLUTION[IAT 355] Tutorial 6: Interaction | SOLUTION[IAT355] Tutorial 7: Maps & Geocoding with Vega-Lite and Leaflet (v2) 🍂| SOLUTION[IAT355] Tutorial 7.1: Geodata wrangling for Vega-lite and d3[IAT 355] Tutorial 8: Integration: Interaction using Leaflet and Signals in Vega-Lite with the Vancouver Crime Map
[IAT355] Tutorial 2: Working with data in d3 and Vega | SOLUTION
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?
titanic[i].SibSp = +titanic[i].SibSp;
titanic[i].Parch = +titanic[i].Parch;
titanic[i].Fare = +titanic[i].Fare;
titanic[i].Survived = +titanic[i].Survived;
}
return titanic;
}
titanicCleanedD3 =
d3.csv("https://gist.githubusercontent.com/krispybird/56bbacb2dfd84c7c6083c62d62a5417a/raw/1b937a4e7404920ea6d3f729611ec06d43e7ae8e/titanic_train.csv", function(d) {
return {
age: +d.Age,
//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 titanic, 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 titanic
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;
})
titanicMap2 = titanic.map(d => {
return {
name: d.Name,
age: +d.Age,
sibsp: +d.SibSp,
parch: +d.Parch,
fare: +d.Fare
};
})
//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
}
}
return (maxAge)
}
{
//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)
}
{
let ages = titanicMap.map(function (d) {
return +d.Age;
});
return (
"Statistics of Passengers' Ages: \n Mean: " +
d3.mean(ages) +
" \n Median: " +
d3.median(ages) +
" \n Mode: " +
d3.mode(ages)
);
}
firstClass = titanicMap.filter(function(d) {return d.CClass == 1});
//Try it here
{
let firstClassAges = firstClass.map(function (d) {
return +d.Age;
});
return "The average age in first class is: " + d3.mean(firstClassAges);
}
//try to find the answer here
//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 secondClassAges = secondClass.map(function(d){ return +d.Age});
return d3.mean(secondClassAges);
}
//try to find the answer here
//hint: you can use d3.mean to find the passengers in third class
{
let thirdClass = titanicMap.filter(function(d){ return d.CClass == 3});
let thirdClassAges = thirdClass.map(function(d){ return +d.Age});
return d3.mean(thirdClassAges);
}
// Here's another shorthand way of writing the function above using arrow notation
// {
// let tc_avg = titanicMap.filter(d => { return d.CClass == 3}).map(d => { return +d.Age});
// return d3.mean(tc_avg);
// }
function calculateTicket()
{
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 + ", $" + ticket
}
calculateTicket();
//Amount of money spent on fares from all tickets
//toFixed(2) rounds the number to two decimal places - note that toFixed is turning this back into a string!
{
let totalSum = d3.sum(titanicMap, function(d){return +d.Fare})
return totalSum.toFixed(2)
}
vl.markTick()
.data(titanicMap)
.encode(
vl.x().fieldQ('Fare')
)
.render()
vl.markBar()
.data(titanicMap)
.encode(
vl.x().fieldQ('Age').bin(true),
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.
