[IAT355] Tutorial 1: The Basics of Observable, Github, and D3 | SOLUTION
//Try uncommenting the lines below
//b*b
//b = Math.sqrt(64)
Now try changing this cell from Javascript to Markdown
import {ramp} from "@mbostock/color-ramp"
ramp(d3.interpolateViridis, 12)
<b><i>This is a sentence with bolding and italics in HTML</i></b>
<style type="text/css">
body {
color: black; /* we change the text color of the body text using CSS*/
}
</style>
x = 12 * 4
** This is a sentence with bolding and italics in Markdown **
This is a link to <a href = "https://www.google.ca">Google</a> in HTML
This is a link to Googlehttps://www.google.ca in Markdown
//this is an expression
2 * 32
//this is an expression as well
nameOfPerson = "Michael"
//this is a block that runs a calculation
//Observable requires {} when running a block or object literal
{
//content here
//Cells in observables require a value to be returned
//for example, if I just want to compute the running sum of a number using a loop, I need brackets
let count = 0;
for (let i = 0; i <= 10; i++){
count = count+i;
}
return count;
}
//foo = 2
//foo = 3
//this is a constructor function
//remember that functions are considered objects in Javascript
function drink(a, b, c){
this.name = a;
this.price = b;
this.flavour = c;
//Below is an anonymous function (function without a name) that is called with the object's sayOrder property. It is only accessible within the scope of the object
this.sayOrder = function(){
return "The "+ this.name + " is " + this.price + " dollars";
}
}
//DEFINE YOUR NEW DRINK OBJECT HERE
order = new drink('Americano', '3', 'bitter')
order.sayOrder()
order.soldOut = false
//Uncomment the above line, and see how the order object has a new property called soldOut
//This is another function
function listPrice(a, b){
//return `The ${a} is ${b} dollars`; //this is another way of referencing the object's local
}
listPrice('Mocha', '5')
//This is an object literal. It returns a value, but has no assignment
//Observable requires {} when defining an object literal
//The object literal contains key-value pairs: (name, price, flavour) are keys, and (Single Expresso, 3, floral and light) are values
{
var espresso = {
name: 'Single Espresso',
price: '3',
flavour: 'floral and light'
}
return espresso
}
espresso //espresso is not defined because we did not assign the object literal to a variable
//This is an object literal. We can use object literals to create comma-separated lists of name-value pairs inside curly braces
doubleEspresso = ({
name: 'Double Espresso',
price: '3',
flavour: 'fruity and balanced'
}
)
doubleEspresso.price
d3 = require('d3@7') //7 refers to the version of D3
FileAttachment("TitanicPassengers.csv").csv()
//attach a file here and give it a name to refer to
//Click on the paperclip on the right side of the buttons panel to see all files attached, then right click on the three dots and select 'copy usage code'
//Alternatively you can also use the paperclip at the bottom of the cell to directly attach the file and get the usage code
flavours = ['strawberry', 'cherry', 'grape', 'blueberry']
//get the value 'grape' here
titanic = d3.csv('https://gist.githubusercontent.com/krispybird/56bbacb2dfd84c7c6083c62d62a5417a/raw/1b937a4e7404920ea6d3f729611ec06d43e7ae8e/titanic_train.csv')
import { toc } from "@nebrius/indented-toc" // This component generates the Table of Contents
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.
