d3.csv('https://docs.google.com/spreadsheets/d/1165d0I7h8CeqH-eF71LsbnC7u3_XBTZuXn8x-ZXiH68/export?format=csv')
d3.json('https://raw.githubusercontent.com/maegul/melb_clim_change/master/cc_data.json')
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
})
plotly = require('https://cdn.plot.ly/plotly-latest.min.js')
{
// 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])
plotly.newPlot(plot, [trace1])
// For observable to display it, it must be returned out of this code chunk
return plot
}
{
var plot = html`<div></div>`
var avg = {
x: cc_data.months,
y: cc_data.mnthly_avgs.mnth_lowest,
name: 'Average'
}
var present = {
x: cc_data.months,
y: cc_data[2014].mnth_lowest,
name: 'Year: 2014'
}
plotly.react(plot, [avg, present])
return plot
}
{
var plot = html`<div></div>`
var avg = {
x: cc_data.months,
y: cc_data.mnthly_avgs.mnth_lowest,
name: 'Average',
mode: 'lines',
line: {color: '#c3c3c3', width: 8, shape: 'spline'}
}
var present = {
x: cc_data.months,
y: cc_data[2014].mnth_lowest,
name: 'Year: 2014',
mode: 'lines+markers',
marker: {symbol: 'circle-open', size: 12,
line: {width: 2}
},
line: {color: 'red', shape: 'spline', smoothing: 0.6}
}
var layout = {
title: "Lowest Monthly Temperatures in Melbourne",
yaxis: {title: 'Temperature (degrees)'},
xaxis: {tickfont: {size: 20}, tickangle: 45, showline:true, ticks: 'outside'}
}
plotly.react(plot, [avg, present], layout)
return plot
}
function provide_range(temp_type){
if (temp_type == 'mnth_lowest') {
// map ensures the ranges are copied and not interferred with later
return temp_ranges.mnth_lowest.map(t=>t)
}
if (temp_type == 'mnth_highest') {
return temp_ranges[temp_type].map(t=>t)
}
if (temp_type == 'mnth_mean_max'){
return temp_ranges[temp_type].map(t=>t)
}
if (temp_type == 'mnth_mean_min'){
return temp_ranges[temp_type].map(t=>t)
}
}
temp_ranges = {
var temp_ranges2 = {}
var temps = Object.keys(cc_data.mnthly_avgs)
temps.forEach(function(k){
var max_per_year = cc_data.years.map((y) => d3.max(cc_data[y][k]))
var min_per_year = cc_data.years.map((y) => d3.min(cc_data[y][k]))
temp_ranges2[k] = [d3.min(min_per_year), d3.max(max_per_year)]
})
return temp_ranges2
}
event_listener = {
plot.on('plotly_hover', function(event_information){
mutable hover_information = [event_information['points'][0]['x'], event_information['points'][0]['pointNumber']]
})
}
{
var change = (Math.random() * 10) - (Math.random() * 10)
// var current_value = change_me
mutable change_me += change
}
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.
