Public
Edited
Apr 1, 2024
file = FileAttachment("ObesityDataSet_raw_and_data_sinthetic@10.csv").csv()
ObesityDataSet_raw_and_data_sinthetic@10.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
async function csv(url) {
return Plotly.d3.csv.parse((await (await fetch(url)).text()));
}
function unpack(rows, key) {
return rows.map(function(row) {
return row[key];
});
}
{
var trace1 = {
x: unpack(file, 'Categories'),
y: unpack(file, 'Mean FCVC'),
type: 'bar',
text: ['4.17 below the mean', '4.17 below the mean', '0.17 below the mean', '0.17 below the mean', '0.83 above the mean', '7.83 above the mean'],
marker: {
color: 'rgb(142,124,195)'
}
};
var data = [trace1];
var layout = {
title: 'Number of Graphs Made this Week',
font:{
family: 'Raleway, sans-serif'
},
showlegend: false,
xaxis: {
tickangle: 0
},
yaxis: {
zeroline: true,
gridwidth:1
},
bargap: 1.5
};
Plotly.newPlot('myDiv', data, layout);
}
ObesityDataSet_raw_and_data_sinthetic@10.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
ObesityDataSet_raw_and_data_sinthetic@10.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
ObesityDataSet_raw_and_data_sinthetic@10.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
file1 = FileAttachment("ObesityDataSet_raw_and_data_sinthetic@10.csv").csv()
{
var trace1 = {
x: unpack(file2, 'Categories'),
y: unpack(file2, 'Count Freq Consump Alcohol'),
name: 'Mean FCVC',
type: 'bar'
};
var trace2 = {
x: unpack(file2, 'Categories'),
y: unpack(file2, 'Count of frequent high cal intake'),
name: 'Freq high cal',
type: 'bar'
};
var data = [trace1, trace2];
var layout = {barmode: 'stack'};
Plotly.newPlot('myDiv1', data, layout);
}
file2 = FileAttachment("ObesityDataSet_raw_and_data_sinthetic@10.csv").csv()
{
var xValue = unpack(file2,'Categories');
var yValue = unpack(file2, 'Count of frequent high cal intake');
var yValue2 = unpack(file2, 'Count Freq Consump Alcohol');
var yValue3 = unpack(file2, 'Count Smoking');
var yValue4 = unpack(file2, 'Count Eating b/w Meals');
var trace1 = {
x: xValue,
y: yValue,
type: 'bar',
text: yValue.map(String),
textposition: 'auto',
hoverinfo: 'none',
opacity: 50,
marker: {
color: 'rgb(255, 214, 255)',
line: {
color: 'rgb(255, 214, 255)',
width: 2
}
}
};
var trace2 = {
x: xValue,
y: yValue2,
type: 'bar',
text: yValue2.map(String),
textposition: 'auto',
hoverinfo: 'none',
marker: {
color: 'rgb(231, 198, 255)',
line: {
color: 'rgb(231, 198, 255)',
width: 2
}
}
};
var trace3 = {
x: xValue,
y: yValue3,
type: 'bar',
text: yValue3.map(String),
textposition: 'auto',
hoverinfo: 'hi',
marker: {
color: 'rgb(200, 182, 255)',
line: {
color: 'rgb(200, 182, 255)',
width: 2
}
}
};
var trace4 = {
x: xValue,
y: yValue4,
type: 'bar',
text: yValue4.map(String),
textposition: 'auto',
hoverinfo: 'hi',
marker: {
color: 'rgb(184, 192, 255)',
line: {
color: 'rgb(184, 192, 255)',
width: 2
}
}
};
var data = [trace4,trace1,trace2,trace3];
var layout = {
title: 'Dietary Habits',
font:{
family: 'Raleway, sans-serif'
},
showlegend: false,
xaxis: {
tickangle: 0
},
yaxis: {
zeroline: false,
gridwidth: 2
},
bargap :0.05
};
Plotly.newPlot('myDiv2', data, layout);
}
ObesityDataSet_raw_and_data_sinthetic@10.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
ffile = FileAttachment("ObesityDataSet_raw_and_data_sinthetic@10.csv").csv()
{
var trace1 = {
x: unpack(ffile, 'Categories'),
y: unpack(ffile,'Public'),
name: 'Public Transportation',
type: 'bar'
};
var trace2 = {
x: unpack(ffile, 'Categories'),
y: unpack(ffile,'Automobile & Bike'),
name: 'Automobile & Motorbike',
type: 'bar'
};
var trace3 = {
x: unpack(ffile, 'Categories'),
y: unpack(ffile,'Bike'),
name: 'Bike',
type: 'bar'
};
var trace4 = {
x: unpack(ffile, 'Categories'),
y: unpack(ffile,'Walking'),
name: 'Walking',
type: 'bar'
};
var data = [trace1, trace2, trace4, trace3];
var layout = {barmode: 'stack'};
Plotly.newPlot('myDiv4', data, layout);
}
file4 = FileAttachment("ObesityDataSet_raw_and_data_sinthetic@10.csv").csv()
{
var trace1 = {
x: unpack(file4, 'Categories'),
y: unpack(file4, 'Frequency of No Physical Activity Per Day'),
name: 'No Physical Activity Per Day',
type: 'scatter',
mode: 'markers'
};
var trace2 = {
x: unpack(file4, 'Categories'),
y: unpack(file4, 'Frequency of 1 Physical Activity Per Day'),
name: '1 Physical Activity Per Day',
type: 'scatter',
mode: 'markers'
};
var trace3 = {
x: unpack(file4, 'Categories'),
y: unpack(file4, 'Frequency of 2 Physical Activities Per Day'),
name: '2 Physical Activities Per Day',
type: 'scatter',
mode: 'markers'
};
var trace4 = {
x: unpack(file4, 'Categories'),
y: unpack(file4, 'Frequency of 3 Physical Activities Per Day'),
name: '3 Physical Activities Per Day',
type: 'scatter',
mode: 'markers'
};
var data = [trace1, trace2, trace3, trace4];
var layout = {
scattermode: 'group',
title: 'Grouped by Country',
xaxis: {title: 'Categories'},
yaxis: {title: 'Frequency of Physical Activity'},
scattergap: 0.0001
};
Plotly.newPlot('myDiv5', data, layout);
}
{
var trace1 = {
x: unpack(file4, 'Categories'),
y: unpack(file4, 'Sometimes Eating b/w Meals'),
name: 'Sometimes Eating b/w Meals',
type: 'scatter',
mode: 'markers'
};
var trace2 = {
x: unpack(file4, 'Categories'),
y: unpack(file4, 'Frequently Eating b/w Meals'),
name: 'Frequently Eating b/w Meals',
type: 'scatter',
mode: 'markers'
};
var trace3 = {
x: unpack(file4, 'Categories'),
y: unpack(file4, 'Always Eating b/w Meals'),
name: 'Always Eating b/w Meals',
type: 'scatter',
mode: 'markers'
};
var trace4 = {
x: unpack(file4, 'Categories'),
y: unpack(file4, 'No Eating b/w Meals'),
name: 'No Eating b/w Meals',
type: 'scatter',
mode: 'markers'
};
var data = [trace1, trace2, trace3, trace4];
var layout = {
scattermode: 'group',
title: 'Grouped by Country',
xaxis: {title: 'Categories'},
yaxis: {title: 'Frequency of Physical Activity'},
scattergap: 0.0001
};
Plotly.newPlot('myDiv6', data, layout);
}
{
var xData = [
['Normal_Weight', 'Overweight_Level_I', 'Overweight_Level_II', 'Obesity_Type_I', 'Obesity_Type_II','Obesity_Type_III'],
['Normal_Weight', 'Overweight_Level_I', 'Overweight_Level_II', 'Obesity_Type_I', 'Obesity_Type_II', 'Obesity_Type_III'],
['Normal_Weight', 'Overweight_Level_I', 'Overweight_Level_II', 'Obesity_Type_I', 'Obesity_Type_II', 'Obesity_Type_III'],
['Normal_Weight', 'Overweight_Level_I', 'Overweight_Level_II', 'Obesity_Type_I', 'Obesity_Type_II', 'Obesity_Type_III'],
['Normal_Weight', 'Overweight_Level_I', 'Overweight_Level_II', 'Obesity_Type_I', 'Obesity_Type_II', 'Obesity_Type_III'],
['Normal_Weight', 'Overweight_Level_I', 'Overweight_Level_II', 'Obesity_Type_I', 'Obesity_Type_II', 'Obesity_Type_III']
];
var yData = [
[155,209,272,344,296,324],
[208,268,216,340,290,323],
[180,240,162,186,226,323],
[80,40,61,81,28,87],
[32,9,6,2,1,0],
[80,40,61,81,28,87]
];
var colors = ['rgba(67,67,67,1)', 'rgba(115,115,115,1)', 'rgba(49,130,189, 1)',
'rgba(189,189,189,1)','rgba(189,189,189,1)','rgba(189,189,189,1)'
];
var lineSize = [2, 2, 2, 2, 2, 2];
var labels = ['People with Family History of Diabetes','Frequent Intake of High Calories', 'Frequent Consumption of Alcohol', 'People Frequently Eating b/w Meals','No. of People Walking Per Day','People with No Physical Activity Per Day'];
var data = [];
for ( var i = 0 ; i < xData.length ; i++ ) {
var result = {
x: xData[i],
y: yData[i],
type: 'scatter',
mode: 'lines',
line: {
color: colors[i],
width: lineSize[i]
}
};
var result2 = {
x: [xData[i][0], xData[i][5]],
y: [yData[i][0], yData[i][5]],
type: 'scatter',
mode: 'markers',
marker: {
color: colors[i],
size: 9
}
};
data.push(result, result2);
}
var layout = {
showlegend: false,
height: 800,
width: 800,
xaxis: {
showline: true,
showgrid: false,
showticklabels: false,
linecolor: 'rgb(204,204,204)',
linewidth: 2,
autotick: false,
ticks: 'outside',
tickcolor: 'rgb(204,204,204)',
tickwidth: 2,
ticklen: 5,
tickfont: {
family: 'Arial',
size: 9,
color: 'rgb(82, 82, 82)'
}
},
yaxis: {
showgrid: false,
zeroline: false,
showline: false,
showticklabels: false
},
autosize: true,
margin: {
autoexpand: true,
l: 100,
r: 20,
t: 100
},
annotations: [
{
xref: 'paper',
yref: 'paper',
x: 0.0,
y: 1.05,
xanchor: 'left',
yanchor: 'bottom',
text: 'Main Source for News',
font:{
family: 'Arial',
size: 11,
color: 'rgb(37,37,37)'
},
showarrow: false
},
{
xref: 'paper',
yref: 'paper',
x: 0.5,
y: -0.1,
xanchor: 'center',
yanchor: 'top',
text: 'Source: Pew Research Center & Storytelling with data',
showarrow: false,
font: {
family: 'Arial',
size: 9,
color: 'rgb(150,150,150)'
}
}
]
};
for( var i = 0 ; i < xData.length ; i++ ) {
var result = {
xref: 'paper',
x: 0.05,
y: yData[i][0],
xanchor: 'right',
yanchor: 'middle',
text: labels[i] + ' ' + yData[i][0] ,
showarrow: false,
font: {
family: 'Arial',
size: 8,
color: 'black'
}
};
var result2 = {
xref: 'paper',
x: 0.95,
y: yData[i][5],
xanchor: 'left',
yanchor: 'middle',
text: yData[i][5] ,
font: {
family: 'Arial',
size: 8,
color: 'black'
},
showarrow: false
};
layout.annotations.push(result, result2);
}
Plotly.newPlot('myDiv7', data, layout);
}
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.
