Published
Edited
Jul 29, 2021
1 fork
1 star
//Dataset: our world in data (https://raw.githubusercontent.com/TrainingByPackt/Interactive-Data-Visualization-with-Python/master/datasets/share-of-individuals-using-the-internet.csv)
//please make choropleth map that express the percentage of population using the internet
//Bibek: I wanted to know whether this dataset is available to make choropleth map, but I don't have enough time to do that.. so please let me know if it is impossible to make them using this dataset!
countryCodes = FileAttachment("countries_codes_and_coordinates@3.csv").csv()
{
internetShareSimpler.forEach(function(d){
for (let i = 0; i < countryCodes.length; i++)
{
d.year = parseFloat(d.year);
if (countryCodes[i] ["Alpha-3 code"] == d.code){
d.id = countryCodes[i]["Numeric code"]; //extracts the correct numeric code from the countryCodes object array
break; //breaks the loop as it is not needed to go through the entire countryCodes
}
}
})
}
internetShareSimpler
world = FileAttachment("world-110m.json").json()
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},
}
}
}
)
vegalite(
{
"width": 900,
"height": 500,
"data": {
"values": internetShare2016, //Primary data source
// "values": updatedInternetShare2016,
},
"transform": [
{
"lookup": "id",
"from": {
"data": {
"values": world, //Secondary data source
"format": {
"type": "topojson",
"feature": "countries"
}
},
"key": "id"
},
"as": "geo" //looks up for the matching "id" values and the corresponding geo data values are stored on "geo" field
}
],
"projection": {"type": "naturalEarth1"},
"mark": {"type": "geoshape","stroke": "white", "tooltip": {"content": "data",}},
"encoding": {
"shape": {"field": "geo", "type": "geojson"}, //determines the shape from the field of the geojson data we obtained from lookup transform
"color": {"field": "internet", "type": "quantitative", "scale": {range: plasmaColor},},
}
})
internetShareSimpler.sort((a,b) => a.year-b.year)
min_year = internetShareSimpler.slice(0,1)[0].year
max_year= internetShareSimpler.slice(internetShareSimpler.length-1, internetShareSimpler.length)[0].year
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": internetShareSimpler, //Here, interShareSimpler 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
"fields": ["internet", "year"]
}
}],
"params": [{
"name": "slider",
"select": {"type": "point", "fields": ["year"]},
"bind": {
"year": {"input": "range", "min": 1960 , "max": 2017, "step": 1}
},
}],
// "transform": [
// {"filter": {"selection": "slider", "field": "year"},}
// ],
"projection": {
"type": "naturalEarth1"
},
"mark": {"type": "geoshape","stroke": "white", "tooltip": {"content": "data"}},
"encoding": {
"color": {
"condition": { "param": "slider", "field": "internet", "type": "quantitative", "scale": {range: plasmaColor},},
}
}
}
)
vegalite(
{
"width": 900,
"height": 500,
"data": {
"values": internetShareSimpler
},
"params": [{
"name": "slider",
"select": {"type": "point", "fields": ["year"]},
"bind": {
"year": {"input": "range", "min": 1960 , "max": 2017, "step": 1}
},
}],
// "transform": [
// {"filter": "datum.year == datum.slider",}
// ],
"transform": [
{"lookup": "id",
"from": {
"data": {
"values": world,
"format": {
"type": "topojson",
"feature": "countries"
}
},
"key": "id"
},
"as": "geo"
}
],
"projection": {"type": "naturalEarth1"},
"mark": {"type": "geoshape","stroke": "white", "tooltip": {"content": "data"}},
"encoding": {
"shape": {"field": "geo", "type": "geojson"},
"color": {
"condition": { "param": "slider", "field": "internet", "type": "quantitative", "scale": {range: plasmaColor},},
}
}
}
)
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 similar to the first one we had written above, but this time "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 = internetShareSimpler.filter(d=> (d.year == year))
//sliderworld = updatedInternetShare.filter(d=> (d.year == year)) //Or can use this one, no problem on using any as in above code, geodata is the primary data source
//Dataset: https://raw.githubusercontent.com/plotly/datasets/master/1962_2006_walmart_store_openings.csv
//please draw scatter plot on USA map!
walmart = FileAttachment("1962_2006_walmart_store_openings.csv").csv()
vegalite(
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.1.json",
"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"}
}
}
]
})
//Dataset: Walmart_stores_by_state.csv (I stored it in Google Drive: Data Visualization Tutorial>Interns folder)
//https://drive.google.com/file/d/1E2wUHyFEIJV-pMnjJ61xvxeuucbCATMI/view?usp=sharing
//Please draw an bubble plot on USA map
walmartByState = FileAttachment("Walmart_stores_by_state.csv").csv()
location = FileAttachment("states.csv").csv()
{
walmartByState.forEach(function(d){
for (let i = 0; i < location.length; i++)
{
if (location[i].state == d.STRSTATE){
d.latitude = location[i].latitude;
d.longitude = location[i].longitude;
break;
}
}
})
}
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": "circle",
"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)"},
}
}
]
})
vegalite = require("vega-embed@6")
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.
