Published
Edited
Apr 19, 2018
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3.csv('https://docs.google.com/spreadsheets/d/1165d0I7h8CeqH-eF71LsbnC7u3_XBTZuXn8x-ZXiH68/export?format=csv')
Insert cell
Insert cell
d3.json('https://raw.githubusercontent.com/maegul/melb_clim_change/master/cc_data.json')
Insert cell
Insert cell
d3.json('https://raw.githubusercontent.com/maegul/melb_clim_change/master/cc_data.json')
.then(function(data){
// All code for using the data goes in here
return data
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
plotly = require('https://cdn.plot.ly/plotly-latest.min.js')
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
// Making a piece of HTML to put the plot into
var plot = html`<div></div>`
// Defining the plot ... here simply putting the appropriate data in
// In plotly, they're called traces
var trace1 = {
// data along x axis
x: fin_data.map(function(d){
return d.date
}),
// data along y axis
y: fin_data.map(function(d){
return d.close
})
}
// Adding the plot to the piece of HTML
plotly.react(plot, [trace1])
// For observable to display it, it must be returned out of this code chunk
return plot
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
viewof interactive_test =DOM.select(['mnth_lowest','mnth_highest','mnth_mean_min','mnth_mean_max'])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mutable listener2 = 0
Insert cell
viewof temp_type = DOM.select(['mnth_lowest','mnth_highest','mnth_mean_min','mnth_mean_max'])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
var change = (Math.random() * 10) - (Math.random() * 10)
// var current_value = change_me
mutable change_me += change
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
var our_slider = d3.select(year_slider)

our_slider.on('input', function(){
mutable year_slider_value= this.value
var year= this.value
var trace ={
x:cc_data.years,
y:cc_data.years.map(function (year){
return cc_data[year][temp_type][listener2]
}),
name: listener2[0]
}
var layout={
showlegend:true,
title:listener2[0]
}
plotly.react(plot, [trace])
return plot
})
}
Insert cell
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