Published
Edited
Feb 20, 2021
fileContents = FileAttachment("rollercosters_paired_assignment@2.csv")
d3 = require('d3')
df = d3.csvParse(await fileContents.text(), d3.autoType)
printTable(df.slice(0, 15))
{
const label = vl.markPoint({filled: true})
.data(df)
.transform(
vl.groupby('rollercoaster_type')
.aggregate(vl.average('excitement').as('Average Excitement'),
vl.average('intensity').as('Average Intensity'))
)
.mark({type: "text", fontSize: 10, dy: -10, dx: 5})
.encode(
vl.x().fieldQ('Average Excitement'),
// .axis({offset: 2}),
vl.y().fieldQ('Average Intensity'),
vl.color().fieldN('rollercoaster_type').scale({scheme: 'category20b'})
.legend('rollercoaster_type'),
vl.text({field: "rollercoaster_type", type: "nominal"})
)
const point = vl.markPoint({filled: true, opacity: 0.5, size: 60})
.data(df)
.transform(
vl.groupby('rollercoaster_type')
.aggregate(vl.average('excitement').as('Average Excitement'),
vl.average('intensity').as('Average Intensity'))
)
.encode(
vl.x().fieldQ('Average Excitement'),
// .axis({offset: 2}),
vl.y().fieldQ('Average Intensity'),
vl.color().fieldN('rollercoaster_type').scale({scheme: 'tableau20'})
.legend('rollercoaster_type')
.title('Rollercoaster Type'),
vl.text({field: "rollercoaster_type", type: "nominal"})
)
return vl.layer(point)
.title('Correlation between average Intensity and Excitement rates for different Rollercoaster types')
.width(500)
.height(500)
.render()
}
{
const base = vl.markBar({filled: true, size: 14})
.data(df)
.transform(
vl.groupby('theme')
.aggregate(vl.average('intensity').as('Average Intensity'),
vl.average('nausea').as('Average Nausea') )
)
.encode(
vl.y().fieldN('theme')
.sort("-x")
.title('Theme')
)
.width(500)
.height(500);
const avg_int = base.encode(
vl.x().fieldQ('Average Intensity'),
vl.color().fieldQ('Average Intensity')
.legend(null));
return vl.data(df)
.title({
text: "Comparison of average intensity across different theme parks",
anchor: "middle",
fontSize: 14
})
.vconcat(avg_int).render();
}
{
const base = vl.markBar({filled: true, size: 14})
.data(df)
.transform(
vl.groupby('theme')
.aggregate(vl.average('intensity').as('Average Intensity'),
vl.average('nausea').as('Average Nausea') )
)
.encode(
vl.y().fieldN('theme')
.sort("-x")
.title('Theme')
)
.width(500)
.height(500);
const avg_nau = base.encode(
vl.x().fieldQ('Average Nausea'),
vl.color().fieldQ('Average Nausea')
.legend(null));
return vl.data(df)
.title({
text: "Comparison of average nausea across different theme parks",
anchor: "middle",
fontSize: 14
})
.vconcat(avg_nau).render();
}
{
const base = vl.markBar({filled: true, size: 14})
.data(df)
.transform(
vl.groupby('theme')
.aggregate(vl.average('max_speed').as('Average Max Speed'),
vl.average('ride_time').as('Average Ride Time'))
)
.encode(
vl.y().fieldN('theme')
.sort("-x")
.title('Theme')
)
.width(500)
.height(500);
const avg_max_speed = base.encode(
vl.x().fieldQ('Average Max Speed'),
vl.color().fieldQ('Average Max Speed')
.legend(null));
return vl.data(df)
.title({
text: "Comparison of average max speed across different theme parks",
anchor: "middle",
fontSize: 14
})
.vconcat(avg_max_speed).render();
}
{
const base = vl.markBar({filled: true, size: 14})
.data(df)
.transform(
vl.groupby('theme')
.aggregate(vl.average('max_speed').as('Average Max Speed'),
vl.average('ride_time').as('Average Ride Time'))
)
.encode(
vl.y().fieldN('theme')
.sort("-x")
.title('Theme')
)
.width(500)
.height(500);
const avg_ride_time = base.encode(
vl.x().fieldQ('Average Ride Time'),
vl.color().fieldQ('Average Ride Time')
.legend(null));
return vl.data(df)
.title({
text: "Comparison of average ride time across different theme parks",
anchor: "middle",
fontSize: 14
})
.vconcat(avg_ride_time).render();
}
// {
// const base = vl.markBar({filled: true, size: 14})
// .data(df)
// .transform(
// vl.groupby('rollercoaster_type')
// .aggregate(vl.average('excitement').as('Average_Excitement'),
// vl.average('intensity').as('Average_Intensity'),
// vl.average('nausea').as('Average_Nausea') )
// )
// .encode(
// vl.y().fieldN('rollercoaster_type')
// .sort(vl.field('rollercoaster_type').order('ascending'))
// .title('Type of Roller Coaster')
// )
// .width(300)
// .height(300);
// const avg_int = base.encode(
// vl.x().fieldQ('Average_Excitement'),
// vl.color().fieldQ('Average_Excitement')
// .legend(null));
// const avg_exc = base.encode(
// vl.x().fieldQ('Average_Intensity'),
// vl.color().fieldQ('Average_Intensity')
// .legend(null));
// const avg_nau = base.encode(
// vl.x().fieldQ('Average_Nausea'),
// vl.color().fieldQ('Average_Nausea')
// .legend(null));
// return vl.data(df)
// .title({
// text: "Comparison of Average_Excitement, Average_Intensity & Average_Nausea across different rollercoaster types",
// anchor: "middle",
// fontSize: 14
// })
// .vconcat(avg_int, avg_exc, avg_nau).render();
// }
// {
// const colors = {
// domain: ['Very High', 'High', 'Medium', 'Low'],
// range: ['#c91a78','#59139e', '#22a2f2','#B8860B']
// };
// const basic1 = vl.markPoint({filled:true, size:60})
// .data(df)
// .encode(
// vl.x().fieldQ('intensity'),
// vl.y().fieldQ('nausea'),
// vl.color().fieldN('excitement_rating')
// .legend('excitement_rating').scale(colors),
// )
// .title({
// text: 'Comparing intensity vs nausea levels by excitement rating ',
// anchor: 'middle', // anchor and left-align title
// offset: 5,
// fontsize: 12
// })
// .width(350)
// .height(350)
// return vl.layer(basic1)
// .render()
// }
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.
