//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 using Markdown
//this is an expression
2 * 32
//this is an expression as well
//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
}
//foo = 2
//foo = 3
//this is a constructor function
//In Javascript, functions are considered objects
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 =
//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
//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
//download titanic
titanic = d3.csv('link to your gist file here')
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.
