Introduction to Observable and PlotlyJSUseful Javascript Array functions.Useful D3 Functions for Data handlingPlotly Color UsageGeoVisualizationGapminder data in PlotlySample US Wind Data VizPlotlyJS GeoVisualizationHCL color modelHSV and HSL Color ModelsColor Blind SimulatorColorBlindLibD3: IntroducingWebGL Volume RenderingColor from Wavelength, Correlated Temperature and HTML color pickerColor Solids: RGB and HSL2D Vector Field Visualization1D Dataviz in PlotlyStock Market Performance of Presidents Trump, Obama, W. Bush, Clinton, H.W. Bush, Reagan During their first term.SVG cheat sheetScales and AxesFetch Covid-19 data
Plotly.Js: Getting Started with Old Faithful
Also listed in…
CAP 6737
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
}
\`\`\`
`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.