vegalite = require("vega-embed@6")
//Internet Usage dataset
internet = FileAttachment("internet_usage.csv").csv({typed: true})
//Walmart dataset
walmart = FileAttachment("1962_2006_walmart_store_openings.csv").csv()
//Walmart Stores by State dataset
walmartByState = FileAttachment("walmart_by_state.csv").csv({typed: true})
//Geodata of World
world = FileAttachment("world-110m.json").json()
//Geodata of US
us = FileAttachment("us-10m.json").json()
vegalite(
{
"width": 900,
"height": 500,
"data": {
"values": world, //Here, world is used as a main or primary data source
"format": {
"type": "topojson",
"feature": "countries"
}
},
//Lookup transform finds the matching objects in the secondary data source for each objects in the main data source. Link: https://vega.github.io/vega-lite/docs/lookup.html
"transform": [{
"lookup": "id", //specifies key in the primary data source
"from": {
"data": { //data source for secondary data reference
"values": internetShare2016, //Here, internetShare2016 is used as a secondary data source
},
"key": "id", //key in data to lookup (This should match with "lookup" which has primary data's field. In this case, "id" field of primary is matched with the "id" field of secondary data source
"fields": ["internet"] //adds internet field from secondary data source to the main data source
}
}],
"projection": { // specifies the layout of the geographical map we want by mapping longitude and latitude pairs to x, y coordinates.
"type": "naturalEarth1" //pseudocylindrical projection designed by Tom Patterson. It is neither conformal nor equal-area, but appealing to the eye for small-scale maps of the whole world. Link: https://github.com/d3/d3-geo#
},
"mark": {"type": "geoshape","stroke": "white", "tooltip": true},
//geoshape mark represents an arbitrary shapes whose geometry is determined by specified GeoJSON shape data that is projected from geographical coordinates to pixels
"encoding": {
"color": {
"field": "internet", "type": "quantitative",
"scale": {range: plasmaColor},
}
}
}
)
min_year = d3.min(internet, d => d.year)
max_year= d3.max(internet, d => d.year)
vegalite(
{
"width": 900,
"height": 500,
"data": {
"values": world,
"format": {
"type": "topojson",
"feature": "countries"
}
},
"transform": [{
"lookup": "id",
"from": {
"data": {
"values": sliderworld, //sliderworld contains the filtered value according to selected year
},
"key": "id",
"fields": ["internet"]
}
}],
"projection": {
"type": "naturalEarth1"
},
//The code is very similar to the code we have written above, but here "layer" is used to also visualize the countries that are not colored.
"layer": [{
"mark": {"type": "geoshape", "tooltip": true},
"encoding": {
"color": {value: "grey"},
}
},{
"mark": {"type": "geoshape", "tooltip": true},
"encoding": {
"color": {
"field": "internet", "type": "quantitative",
"scale": {domain: [0,100], range: plasmaColor},
}
}
}]
})
sliderworld = internet.filter(d=> (d.year == year))
vegalite(
{
"width": 700,
"height": 500,
"title": {"text": "Walmart Stores Across the World", "fontSize": 25, "offset": 30},
"layer": [
{
"data": {
"values": us,
"format": {"type": "topojson","feature": "states"} //We are using "states" as a feature while we have used countries in case of the world data. You can simply go through the given geo data and figure out what feature you need to use
},
"projection": {
"type": "albersUsa" // A U.S.-centric composite with projections for the lower 48 states, Hawaii, and Alaska (scaled to 0.35 times the true relative area) Link: https://vega.github.io/vega-lite/docs/projection.html
},
"mark": { "type": "geoshape", "fill": "lightgray", "stroke": "white"}
},
{
"data": {
"values": walmart
},
"mark": "circle",
"encoding": {
"longitude": { "field": "LON", "type": "quantitative" }, //Longitude position of geographically projected marks.
"latitude": { "field": "LAT", "type": "quantitative" }, //Latitude position of geographically projected marks.
"size": {"value": 20},
"color": {"value": "#6f8ede"}
}
}
]
}
)
vegalite(
{
"width": 700,
"height": 500,
"title": {"text": "Walmart Stores Across States In the US", "fontSize": 25, "offset": 30},
"layer": [
{
"data": {
"values": us,
"format": { "type": "topojson", "feature": "states" }
},
"projection": {
"type": "albersUsa"
},
"mark": { "type": "geoshape", "fill": "lightgray", "stroke": "white" }
},
{
"data": {
"values": walmartByState
},
"mark": {"type": "circle", "tooltip": {"content": "data"}},
"encoding": {
"longitude": { "field": "longitude", "type": "quantitative" },
"latitude": { "field": "latitude", "type": "quantitative" },
"size": {"field": "NUM_STORES", "type": "quantitative", scale:{ range: [10,3000]}}, //encoding by size helps to draw the bubble plot
"color": {"value": "rgb(158,158,225)"},
"stroke": {"value": "rgb(8,48,107)"},
}
}
]
}
)
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.
