Published
Edited
Feb 20, 2021
md`# Assignment 2 - Part 2: Changran Hu & Arika Verma - Final Submission`
import {vl} from '@vega/vega-lite-api'
import {printTable} from '@uwdata/data-utilities'
d3 = require('d3')
fileContents = FileAttachment("rollercosters_paired_assignment.csv")
df = d3.csvParse(await fileContents.text(), d3.autoType)
printTable(df.slice(0, 3))
{
const max = vl.markBar({color: "#663399"}).data(df).encode(
vl.y().fieldN("theme").sort(vl.average("excitement").order('descending')).title("Park Theme"),
vl.x().average("excitement").title("Excitement"),
);
return vl.layer(max)
.title('Avg Excitement Rating by Park Theme')
.width(250)
.height(500)
.render();
};
{
const max = vl.markBar({color: "steelblue"}).data(df).encode(
vl.y().fieldN("theme").title("Park Theme").sort(vl.average('intensity').order('descending')),
vl.x().average("intensity").title("Intensity"),
);
return vl.layer(max)
.title('Avg Intensity Rating by Park Theme')
.width(250)
.height(500)
.render();
};
{
const max = vl.markBar({color: "#e69500"}).data(df).encode(
vl.y().fieldN("theme").title("Park Theme").sort(vl.average('nausea').order('descending')),
vl.x().average("nausea").title("Nausea"),
);
return vl.layer(max)
.title('Avg Nausea Rating by Park Theme')
.width(166)
.height(500)
.render();
};
{
const max = vl.markCircle({color: "green", size: 100}).data(df).encode(
vl.x().fieldQ("nausea").title("Nausea Rating"),
// .title(""),
vl.y().fieldQ("excitement").title("Excitement Rating"),
vl.color().fieldN("rollercoaster_type").title("Rollercoaster Type"),
)
const regression_line = vl.markLine({color: "black", size: 2}).data(df).encode(
vl.x().fieldQ("nausea").title("Nausea Rating"),
// .title(""),
vl.y().fieldQ("excitement").title("Excitement Rating"),
// vl.color().fieldN("rollercoaster_type").title("Rollercoaster Type"),
).transform({"regression" : "excitement", "on": "nausea"});
const text = vl.markText().encode(
vl.text({"type": "nominal", "field": "R2"})
)
// .transform({"regression" : "excitement", "on": "nausea","params": true},{"calculate": "'R²: '+format(datum.rSquared, '.2f')", "as": "R2"});
// const text = vl.markText().encode(
// vl.text({"type": "nominal", "field": "R2"})
// )
// "mark": {
// "type": "text",
// "color": "firebrick",
// "x": "width",
// "align": "right",
// "y": -5
// },
// "encoding": {
// "text": {"type": "nominal", "field": "R2"}
// }
return vl.layer(max, regression_line, text)
.title('Excitement vs. Nausea with Regression Line, According to Rollercoaster Type')
.width(500)
.height(500)
.render();
};
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
{
const colors = {
domain:['0', '1'],
range: ['#0a234a','#c0c0c0']
};
// vl.x().fieldO("week").title("Week").axis({labelAngle: 0})
const max_speed = vl.markBar()
.data(df)
.encode(
vl.x().average('max_speed').axis({grid:false}).title('Max Speed (mph)'),
vl.y().fieldN('custom_design').title(null).axis({labelAngle: 0}),
vl.color().fieldN('custom_design').scale(colors).legend({title: 'Custom Design'})
)
const avg_speed = vl.markBar()
.data(df)
.encode(
vl.x().average('avg_speed').axis({grid:false}).title('Avg Speed (mph)'),
vl.y().fieldN('custom_design').title(null).axis({fontSize:20}).axis({labelAngle: 0}),
vl.color().fieldN('custom_design').scale(colors)
)
const ride_length = vl.markBar()
.data(df)
.encode(
vl.x().average('ride_length').axis({grid:false}).title('Ride Length (ft)'),
vl.y().fieldN('custom_design').title(null).axis({labelAngle: 0}),
vl.color().fieldN('custom_design').scale(colors)
)
const ride_time = vl.markBar()
.data(df)
.encode(
vl.x().average('ride_time').axis({grid:false}).title('Ride Time (sec)'),
vl.y().fieldN('custom_design').title(null).axis({labelAngle: 0}),
vl.color().fieldN('custom_design').scale(colors)
)
return vl.vconcat(max_speed, avg_speed, ride_length, ride_time)
.title({text: 'Custom Design Impact on Max Speed, Avg Speed, Ride Length, Ride Time',
fontSize:16, offset: 20})
.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.
