[IAT355] #1: The Basics of Observable, Github, and D3 | TUTORIAL[IAT355] Tutorial 3: Mapping Data to Features in Observable | TUTORIAL[IAT355] Tutorial 4: Visual Forms Continued | Building More Charts in Observable | TUTORIAL[IAT355] Tutorial 5: Multiple Views with Vega-Lite | TUTORIAL[IAT 355] Tutorial 6: Interaction | TUTORIAL[IAT355] Tutorial 7: Maps & Geocoding with Vega-Lite and Leaflet (v2) 🍂| TUTORIAL[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 | TUTORIAL
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!
}
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 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;
//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 = {
//write a loop here
//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.
}
//return your answers here
firstClass = titanicMap.filter(function(d) {
return d.CClass == 1});
"The number of passengers in first class is: " + firstClass.length
//Try it here
{
}
//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 + "paid: $" + ticket
}
calculateTicket();
//
vl.markTick()
.data(titanicMap)
.encode(
vl.x().fieldQ('Fare')
)
.render()
//follow along here
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.
