oldFaithful = d3.tsv("https://gist.githubusercontent.com/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa9/raw/dcb23e8f6eefdbc4ada97d6eda22b2a4f256c263/faithful.tsv", d3.autoType)
oldFaithful.columns
waiting = extract("waiting")
eruptions = extract("eruptions")
{
let trace1 = {
mode: "markers",
type: "scatter",
x: waiting,
y: eruptions,
marker: {
size: 5,
color: "blue"
}
};
let layout1 = {
title: "Old Faithful Waiting Time Vs. Eruption time",
xaxis: {
title: "Waiting Time (mins)"
},
yaxis: {
title: "Eription Time (mins)"
}
};
const config = {
staticPlot: true,
responsive: true,
displayModeBar: false
};
const data = [trace1];
const div = DOM.element('div');
Plotly.newPlot(div, data, layout1, config);
return div;
}
{
let trace1 = {
mode: "markers",
type: "scatter",
x: waiting,
y: eruptions,
marker: {
size: 5,
color: "blue"
}
};
var trace2 = {
x: waiting,
y: eruptions,
type: 'histogram2dcontour'
};
let layout1 = {
title: "Old Faithful Waiting Time",
xaxis: {
title: "Waiting Time (s)"
},
yaxis: {
title: "Eription Time (s)"
}
};
const config = {
staticPlot: true,
responsive: true,
displayModeBar: false
};
const data = [trace1,trace2];
const div = DOM.element('div');
Plotly.newPlot(div, data, layout1, config);
return div;
}
md`## To Experiment:
\`\`\`
data = d3.tsvParse(await FileAttachment("faithful.tsv").text() , d3.autoType)
// See https://observablehq.com/@observablehq/file-attachments
// For Bin control in Histogram
autobinx: false,
xbins: {
end: 2.8,
size: 0.06,
start: .5
}
\`\`\`
`
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.
