Public
Edited
May 11, 2019
Comments locked
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = [
{ 'hrs':2, 'status':'complete', 'project':'c',
'tasks':["Add Sauce","Add Pepperoni","Add Cheese", "Add Mushrooms"], 'title':"Prepare the Pizza",'description':"Add all those sweet toppings."},
{ 'hrs':72, 'status':'ongoing', 'project':'a','tasks':["Turn oven on","Put pizza in oven", "Remove Pizza from oven", "All the success"],
'title':"Bake that Pie",'description':"Great British bakeoff."},
{ 'hrs':12, 'status':'todo', 'project':'a','tasks':["Get in Car","Put Key in Ignition","Put Pizza in Fancy Car Oven","Drive Errantly"],
'title':"Delivery","description":"Someone, somewhere, will bring you food. Settle down."},
{ 'hrs':22, 'status':'todo', 'project':'a','tasks':["Change hrs to some other value","Modify title","Modify Description","Add more tasks"],
'title':"Timeline Usage","description":"You can play with this timeline in several ways by editting the values in the data cell below."},
];

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
style = html`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" crossorigin="anonymous">`
Insert cell
script = html`<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" crossorigin="anonymous">`
Insert cell
fonts = html`<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
Insert cell
Insert cell

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.
Learn more