Public
Edited
May 11
Insert cell
Insert cell
Plotly = require('https://cdn.plot.ly/plotly-2.20.0.min.js')
Insert cell
data_am_numeric.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
data = data_am_numeric
Insert cell
import {checkbox} from "@jashkenas/inputs"
Insert cell
averagePerAlcohol = d3.groups(data, d => d.alcohol_frequency)
.map(([alcoholLevel, group]) => {
return {
alcoholLevel: alcoholLevel,
averages: {
ex_numeric: d3.mean(group, d => d.ex_numeric),
flos_numeric: d3.mean(group, d => d.flos_numeric),
cos_numeric: d3.mean(group, d => d.cos_numeric),
teeth_numeric: d3.mean(group, d => d.teeth_numeric),
sleep_numeric: d3.mean(group, d => d.sleep_numeric)
}
}
})
Insert cell
{
const traces = averagePerAlcohol.map(d => ({
type: 'scatterpolar',
r: [
d.averages.ex_numeric,
d.averages.flos_numeric,
d.averages.cos_numeric,
d.averages.teeth_numeric,
d.averages.sleep_numeric,
d.averages.ex_numeric // herhaal om vorm te sluiten
],
theta: [
"Exercise", "Flossing", "Cosmetic usage", "Teeth brushing", "Sleep","Exercise"
],
fill: 'none',
name: `Alcohol ${d.alcoholLevel}`
}));

const layout = {
polar: {
radialaxis: { visible: true, range: [0, 4] ,tickvals: [0,1, 2, 3, 4],
ticktext: ["0","1", "2", "3", "4"]}
},
showlegend: true
};

const div = html`<div></div>`;
Plotly.newPlot(div, traces, layout);
return div;
}
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