Assignment 3
import {render} from "@vega/vega-lite-api-v5"
data_prepost=FileAttachment("data_prepost@1.csv").csv()
plot=render({
width: 300,height:400,
data: {values: data_prepost},
mark: {type:"circle",size:50,opacity:.8},
title: {text: "Overturn of Roe v. Wade's impact on abortion rates",
anchor: "start",
font:"Georgia",
fontSize:29,
subtitle:["With many states enacting total abortion bans, abortions performed in each state has seen major fluctations while abortions","by state residents shows little change. Compare these rates to various socieo-economic factors and the states' political leanings."],
dy:-30,
// Explore how the rate of abortions within each state or by resident varies across different socioeconomic indicators and political leanings.
subtitleColor:"grey",
subtitleFont:"Georgia",
subtitleFontSize:15
},
params: [
{ name: "xdata",
value: "Mean Household Income",
bind: { input: "select",
name: "Socioeconomic Indicators: ",
options: ["Mean Household Income",
"Unemployment",
"High School Graduation Rate",
"Women Bachelor Degree Rate"]
}
},
{ name: "ydata",
value: "By Residents",
bind: { input: "select",
name: "Abortion Rate per 1000 Women: ",
options: ["By Residents",
"In State"]
}
}
],
transform: [
// for drop down
{fold: ["Mean Household Income",
"Unemployment",
"High School Graduation Rate",
"Women Bachelor Degree Rate"],
as: ['xField', 'xValue'] },
{ fold: ["By Residents",
"In State"],
as: ['yField', 'yValue'] },
{ filter: 'datum.xField === xdata ' },
{ filter: 'datum.yField === ydata ' },
// make tool tips cleaner
{calculate: "'$' + format(datum['Mean Household Income'] / 1000, '.0f') + 'k'", as: "Wages_lab_2023"},
{calculate: "format(datum['Unemployment'], '.1f') + '%'", as: "UR_lab_2023"},
{calculate: "format(datum['High School Graduation Rate'], '.1f') + '%'", as: "HS_lab_2023"},
{calculate: "format(datum['Women Bachelor Degree Rate'], '.1f') + '%'", as: "BS_lab_2023"},
// labels for faceted plots
{calculate: "datum.prepost === 'pre' ? 'Pre-Roe Overturn (2019)' : 'Post-Roe Overturn (2023)'",as: "prepost_label"}
],
//allows for the graphic to be moved/zoomed in on
selection: {
zoom: {type: "interval",bind: "scales",clear: "dblclick"},
hover: { type: "point", fields: ["State"], on: "mouseover", clear: "mouseout", nearest:true },
},
encoding: {
facet: {
field: "prepost_label",
type: "nominal",
columns: 2,
sort: ["pre","post"],
header: {
title: "",
labelColor: "black",
labelFontWeight: "bold",
labelFontSize: 20,
labelFont: "Georgia",
labelAnchor: "center"
// titleFontStyle: "italic"
}
},
x: {
type: "quantitative",
field: "xValue",
title: { signal: "{'Mean Household Income':'Mean Household Income','Unemployment':'Unemployment Rate', 'High School Graduation Rate':'High School Graduation Rate ', 'Women Bachelor Degree Rate': 'Women Bachelor Degree Rate '}[xdata]" },
scale: { domain: { signal: "{'Mean Household Income':[60000,170000],'Unemployment':[0,8], 'High School Graduation Rate':[80,100], 'Women Bachelor Degree Rate': [20,65]}[xdata]" }},
// formatting
axis: {
titleColor: "black",
titleFontWeight: "normal",
titleFontSize: 15,
titleFont: "Georgia",
titleFontStyle: "italic",
labelFontSize: 12,
labelColor: "#71797E",
tickColor: "#71797E",
grid:false
}
},
y: {
type: "quantitative",
field: "yValue",
title: { signal: "{'By Residents':'Abortions from State Residents', 'In State':'Abortions Performed within a State'}[ydata]" },
scale: { domain: { signal: "{'By Residents':[0,22],'In State':[0,26]}[ydata]" }},
// formatting
axis: {
titleColor: "black",
titleFontWeight: "normal",
titleFontSize: 15,
titleFont: "Georgia",
titleFontStyle: "italic",
labelFontSize: 12,
labelColor: "#71797E",
tickColor: "#71797E",
}
},
color:{
type: "nominal",
field: "Color_code",
scale: {range: ["#EA3323","#EF8784","#921C9B","#869FF8","#0000F5"]},
sort: ["-2","-1","0","1","2"],
legend:{title: "Political Leaning",
titleFont: "Georgia",
titleFontSize:20,
labelFont:"sans-serif",
labelFontSize:15,
labelExpr: "datum.value == -2 ? 'Solidly Republican' : datum.value == -1 ? 'Leans Republican' : datum.value == 0 ? 'Tossup' : datum.value == 1 ? 'Leans Democrat' : datum.value == 2 ? 'Solidly Democrat' : datum.value"
}
},
tooltip: [{ field: "State",
type: 'N' },
{ field: "Wages_lab_2023",
type: "nominal",
title: "Household Income"
},
{ field: "UR_lab_2023",
type:"nominal",
title:"Unemployment"
},
{ field: "HS_lab_2023",
type:"nominal",
title:"High School Graduation"
},
{ field: "BS_lab_2023",
type:"nominal",
title:"Women with Bachelor's Degree"
}
],
// change the marker color
// strokeWidth: { condition: { selection: "hover", value: 0}, value: 5},
// stroke: { condition: { selection: "hover",empty:false, value: 3}, value: 1},
// opacity: { condition: {selection: "hover", value: .7}, value: 0.3},
size: { value:40, condition: {selection:"hover",empty:false,value:100}}
}
})
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.
