Public
Edited
Jun 2
import { Inputs } from "@observablehq/inputs";
import {render} from "@vega/vega-lite-api-v5"
statedata= FileAttachment("State_data - data.csv").csv()
data=FileAttachment("FP_data - mergeddata@9.csv").csv()
countydata = FileAttachment("State_data - counties@5.csv").csv()
plot_v2=render({
width: 1400,height:1000,
title:"Click on states to remove schools",
params:[
// drop down for map
{ name: "cdata",
value: "January Temperature",
bind: {input: "select",name: "MAP: ",
options: ["January Temperature","July Temperature","Population per sqare mile","Income spent on Rent","State Political Power","Abortion Week limit"]}
},
// checkboxes for each school size range
{name: "SelectedSizeCodes",value: selected_size_codes},
// university type
{name: "SelectedResearchOutput",value: selected_researchoutput},
],
projection: {type: "albersUsa"},
// title: {
// text: {signal: "datum.schoolCount + ' schools match your results'"},
// anchor: "start",
// fontSize: 20},
layer:[
// 1. COLOR COUNTY DATA
{data: { values: countydata },
transform: [
{lookup: "INCITS",
from: {data: {url: "data/us-10m.json", format: {type: "topojson",feature: "counties"}},key: "id"},as: "geo"},
// for drop down
{ fold: ["January Temperature","July Temperature","Population per sqare mile","Income spent on Rent","State Political Power","Abortion Week limit"],
as: ['cField', 'cValue'] },
{ filter: 'datum.cField === cdata ' },
],
mark: {type: "geoshape"},
encoding: {
shape: {type: "geojson",field: "geo"},
color: {
strokeWidth: {value:0},
field: "cValue",
type: "quantitative",
// ["#EA3323","#EF8784","#921C9B","#869FF8","#0000F5"]
scale: {scheme: {signal: "{'January Temperature':'spectral','July Temperature':'spectral', 'Population per sqare mile':'purples','Income spent on Rent':'viridis','State Political Power':['#D23A4B','#5B2475','#337EA9'],'Abortion Week limit':'redyellowgreen'}[cdata]" },
reverse: {signal: "{'January Temperature':true,'July Temperature':true, 'Population per sqare mile':false,'Income spent on Rent':true,'State Political Power':false,'Abortion Week limit':false}[cdata]" },
domain: {signal: "{'January Temperature':[0,100],'July Temperature':[0,100], 'Population per sqare mile':[0,8000],'Income spent on Rent':[0,50],'State Political Power':[-1,1],'Abortion Week limit':[0,40]}[cdata]" }},
}
}
}, // COLOR COUNTY DATA
// 2. STATE OUTLINES (just white outlines of every state)
{data: { values: statedata },
transform: [
{lookup: "FIP",
from: {data: {url: "data/us-10m.json", format: {type: "topojson",feature: "states"}},key: "id"},
as: "geo"}
],
mark: {type: "geoshape",fill:null},
encoding: {
shape: {type: "geojson",field: "geo"},
stroke: {value: "grey"},
strokeWidth: {value:1}
}
},
// 3. STATE GREY OUT
{ data: { values: statedata },
transform: [
{lookup: "FIP",
from: {data: {url: "data/us-10m.json", format: {type: "topojson",feature: "states"}},key: "id"},
as: "geo"}],
mark: {type: "geoshape"},
// click on the state!
params: [{name: "clickstate",select: {type: "point", fields: ["FIP"] , toggle:"!event.shiftKey"},value:[]}],
encoding: {
shape: {type: "geojson",field: "geo"},
// change state appearance upon click
stroke: {condition: { param: "clickstate", value: "black", empty: false },value: "black"},
strokeWidth: {condition: { param: "clickstate", value: 2, empty: false },value: 2},
opacity: {condition: { param: "clickstate", value: 0.5,empty:false },value: 0},
fill: {condition: {param: "clickstate", value: "black",empty:false},value:"none"}
}
},// STATE GREY OUT
// 4. COLLEGES
{data: {values: data},
transform: [
{
filter: {
and:[
{ field: "SizeCode", oneOf: selected_size_codes },
{ field: "Classification", oneOf: selected_researchoutput },
{not:{ param: "clickstate", empty: false }}
]
}
},
],
mark: {
type: "circle",
size: 80,
opacity: {value: 0.5},
color:"white",
stroke:"magenta"
// stroke:"white",strokewidth:.1,
},
encoding: {
longitude: { field: "lon", type: "quantitative" },
latitude: { field: "lat", type: "quantitative" },
tooltip: [{ field: "University", type: "nominal" },
{ field: "Institution Type", type: "nominal" },
{ field: "Research Doctoral Program Type", type: "nominal" },
{ field: "FT Graduate Enrollment", type: "nominal" },
],
// color:{scheme:"category20b",field:"University",legend:null},
// stroke:"white",
opacity: { condition: { param: 'clickstate', value: 0.15,empty:false }, value: 0.75 }
// opacity: { condition: { param: 'Schoolsize', value: 0.75 }, value: 0.05 }
}
}, // COLLEGES
// 5. # of schools
// {
// data: { values: data },
// transform: [
// {
// filter: {
// and: [
// { or: [
// { and: [{field: "SizeCode", equal: 1}, {param: "ShowUnder1000"}] },
// { and: [{field: "SizeCode", equal: 2}, {param: "Show1000To4999"}] },
// { and: [{field: "SizeCode", equal: 3}, {param: "Show5000To9999"}] },
// { and: [{field: "SizeCode", equal: 4}, {param: "Show10000To19999"}] },
// { and: [{field: "SizeCode", equal: 5}, {param: "Show20000AndAbove"}] }
// ]
// },
// { or: [
// { and: [{field: "Classification", equal: "R1"}, {param: "ShowR1"}] },
// { and: [{field: "Classification", equal: "R2"}, {param: "ShowR2"}] },
// { and: [{field: "Classification", equal: "D/PU"}, {param: "ShowOther"}] }
// ]
// },
// { not: { param: "clickstate", empty: false } }
// ]
// }
// },
// {aggregate: [{ op: "count", as: "schoolCount" }]},
// { calculate: "format(datum.schoolCount, '') + ' schools match your results'", as: "schoolLabel" }
// ],
// mark: {
// type: "text",
// align: "left",
// fontSize: 24,
// fontWeight: "bold",
// // fill: "black",
// dx: 10,
// dy: 30
// },
// encoding: {
// longitude: { value: -130 },
// latitude: { value: 32 },
// text: { field: "schoolLabel", type: "nominal" }
// }
// }
] // layer
})
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.
