2d:null 2e:["$","title",null,{"children":"Geographical data viz | bibekyess | Observable"}] 33:Ta0f,plasmaColor = ["#0d0887","#100788","#130789","#16078a","#19068c","#1b068d","#1d068e","#20068f","#220690","#240691","#260591","#280592","#2a0593","#2c0594","#2e0595","#2f0596","#310597","#330597","#350498","#370499","#38049a","#3a049a","#3c049b","#3e049c","#3f049c","#41049d","#43039e","#44039e","#46039f","#48039f","#4903a0","#4b03a1","#4c02a1","#4e02a2","#5002a2","#5102a3","#5302a3","#5502a4","#5601a4","#5801a4","#5901a5","#5b01a5","#5c01a6","#5e01a6","#6001a6","#6100a7","#6300a7","#6400a7","#6600a7","#6700a8","#6900a8","#6a00a8","#6c00a8","#6e00a8","#6f00a8","#7100a8","#7201a8","#7401a8","#7501a8","#7701a8","#7801a8","#7a02a8","#7b02a8","#7d03a8","#7e03a8","#8004a8","#8104a7","#8305a7","#8405a7","#8606a6","#8707a6","#8808a6","#8a09a5","#8b0aa5","#8d0ba5","#8e0ca4","#8f0da4","#910ea3","#920fa3","#9410a2","#9511a1","#9613a1","#9814a0","#99159f","#9a169f","#9c179e","#9d189d","#9e199d","#a01a9c","#a11b9b","#a21d9a","#a31e9a","#a51f99","#a62098","#a72197","#a82296","#aa2395","#ab2494","#ac2694","#ad2793","#ae2892","#b02991","#b12a90","#b22b8f","#b32c8e","#b42e8d","#b52f8c","#b6308b","#b7318a","#b83289","#ba3388","#bb3488","#bc3587","#bd3786","#be3885","#bf3984","#c03a83","#c13b82","#c23c81","#c33d80","#c43e7f","#c5407e","#c6417d","#c7427c","#c8437b","#c9447a","#ca457a","#cb4679","#cc4778","#cc4977","#cd4a76","#ce4b75","#cf4c74","#d04d73","#d14e72","#d24f71","#d35171","#d45270","#d5536f","#d5546e","#d6556d","#d7566c","#d8576b","#d9586a","#da5a6a","#da5b69","#db5c68","#dc5d67","#dd5e66","#de5f65","#de6164","#df6263","#e06363","#e16462","#e26561","#e26660","#e3685f","#e4695e","#e56a5d","#e56b5d","#e66c5c","#e76e5b","#e76f5a","#e87059","#e97158","#e97257","#ea7457","#eb7556","#eb7655","#ec7754","#ed7953","#ed7a52","#ee7b51","#ef7c51","#ef7e50","#f07f4f","#f0804e","#f1814d","#f1834c","#f2844b","#f3854b","#f3874a","#f48849","#f48948","#f58b47","#f58c46","#f68d45","#f68f44","#f79044","#f79143","#f79342","#f89441","#f89540","#f9973f","#f9983e","#f99a3e","#fa9b3d","#fa9c3c","#fa9e3b","#fb9f3a","#fba139","#fba238","#fca338","#fca537","#fca636","#fca835","#fca934","#fdab33","#fdac33","#fdae32","#fdaf31","#fdb130","#fdb22f","#fdb42f","#fdb52e","#feb72d","#feb82c","#feba2c","#febb2b","#febd2a","#febe2a","#fec029","#fdc229","#fdc328","#fdc527","#fdc627","#fdc827","#fdca26","#fdcb26","#fccd25","#fcce25","#fcd025","#fcd225","#fbd324","#fbd524","#fbd724","#fad824","#fada24","#f9dc24","#f9dd25","#f8df25","#f8e125","#f7e225","#f7e425","#f6e626","#f6e826","#f5e926","#f5eb27","#f4ed27","#f3ee27","#f3f027","#f2f227","#f1f426","#f1f525","#f0f724","#f0f921"]34:T6b0,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}, } } } )35:T57a,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},}, } } } )36:T4f7,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"} } } ] })37:[{"id":"a765ae9c64a57e83ac075cec20dd06afa95ff4d7148a5fdaddab259914eeac0b412ec22d531485693b50b42775dc3282651218fe40c45fe90448eff1d6eeca04","href":"https://static.observableusercontent.com/files/a765ae9c64a57e83ac075cec20dd06afa95ff4d7148a5fdaddab259914eeac0b412ec22d531485693b50b42775dc3282651218fe40c45fe90448eff1d6eeca04","name":"us-10m.json","type":"application/json","lastModified":1627264173031.356,"size":642361},{"id":"658a7ea374fade728e3613539de751223c9a96680068cedda15d93a7369fd8bb5437e2e34cf0cd14c3834a268d26c344c5729b8fec156bacc372be27f0b65102","href":"https://static.observableusercontent.com/files/658a7ea374fade728e3613539de751223c9a96680068cedda15d93a7369fd8bb5437e2e34cf0cd14c3834a268d26c344c5729b8fec156bacc372be27f0b65102","name":"unemployment.tsv","type":"text/tab-separated-values","lastModified":1627264246312.043,"size":34739},{"id":"822e4f6387be830cbedf7fc0d51614eb52639abf775c64c82b266df347a6843433071c311dcc6e7a29a9a99e9b4c0c92bdef8b56a53bd03365c1445e66ce713a","href":"https://static.observableusercontent.com/files/822e4f6387be830cbedf7fc0d51614eb52639abf775c64c82b266df347a6843433071c311dcc6e7a29a9a99e9b4c0c92bdef8b56a53bd03365c1445e66ce713a","name":"population_engineers_hurricanes.csv","type":"text/csv","lastModified":1627265530369.851,"size":1852},{"id":"15f677071832869a8f4c223666596a67f992ca3593ba38ab51acc27fb760bbd0a5308da5258deac062477df63a7585351c53e65ddf7f554552c492bfff8e3d31","href":"https://static.observableusercontent.com/files/15f677071832869a8f4c223666596a67f992ca3593ba38ab51acc27fb760bbd0a5308da5258deac062477df63a7585351c53e65ddf7f554552c492bfff8e3d31","name":"1962_2006_walmart_store_openings.csv","type":"text/csv","lastModified":1627267826813.429,"size":317460},{"id":"9a0f9a6d369b9fe07b523c678cd377e5d31ed45b24ddc700858ee02382e574c4407ea3f8e507d88ded0d21debaa7248c416c779c0c9f30f8ce7eb7af91e9e848","href":"https://static.observableusercontent.com/files/9a0f9a6d369b9fe07b523c678cd377e5d31ed45b24ddc700858ee02382e574c4407ea3f8e507d88ded0d21debaa7248c416c779c0c9f30f8ce7eb7af91e9e848","name":"Walmart_stores_by_state.csv","type":"text/csv","lastModified":1627268081443.626,"size":386},{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1627268625846.946,"size":756420},{"id":"7d679a988a29931bf444c416e66a34a5b5c40a34a79f85ff91f50f566d93e16f3d74079f978a3301ec8dd67defd0791546ed9edf21aefce5c50fd3cd8ef41766","href":"https://static.observableusercontent.com/files/7d679a988a29931bf444c416e66a34a5b5c40a34a79f85ff91f50f566d93e16f3d74079f978a3301ec8dd67defd0791546ed9edf21aefce5c50fd3cd8ef41766","name":"us-state-capitals.json","type":"application/json","lastModified":1627269714090.474,"size":3869},{"id":"aa406cf168f1866dabc9bc4117f00af9e5b19fcb2ea128d32d6afd9a5956863db09f1692b018103cb06f2a574b81e231a3536133d2231d715b3f2ac81134f922","href":"https://static.observableusercontent.com/files/aa406cf168f1866dabc9bc4117f00af9e5b19fcb2ea128d32d6afd9a5956863db09f1692b018103cb06f2a574b81e231a3536133d2231d715b3f2ac81134f922","name":"world-110m.json","type":"application/json","lastModified":1627264171876.312,"size":119410},{"id":"0653aab1bf4ebf9d5d7362a4ec41a50ba9f4a6aae708325fc86a685dc8ede0c9abb7eb2ee61f296cc6d84fe0ce1ec5939cbd325ebf6f7e77650b531daf8706b9","href":"https://static.observableusercontent.com/files/0653aab1bf4ebf9d5d7362a4ec41a50ba9f4a6aae708325fc86a685dc8ede0c9abb7eb2ee61f296cc6d84fe0ce1ec5939cbd325ebf6f7e77650b531daf8706b9","name":"tableconvert_json_yy9qih.json","type":"application/json","lastModified":1627276993984.304,"size":61020},{"id":"ecf39cb24c0dec716becd9d76219c204bec9caa3dc685c52405a642598a9a1de1a493fd50a3ef5277abda50c9897edf1f9250cc0cd7415c0d3c3037a3fffa0c8","href":"https://static.observableusercontent.com/files/ecf39cb24c0dec716becd9d76219c204bec9caa3dc685c52405a642598a9a1de1a493fd50a3ef5277abda50c9897edf1f9250cc0cd7415c0d3c3037a3fffa0c8","name":"countries_codes_and_coordinates@3.csv","type":"text/csv","lastModified":1627282984430.457,"size":8255},{"id":"eb9aa5e971e556efbaa94976eb0d09c8d32b47df6330a4971a945768a714db78892ff74839ea9c7b045208ac83eaa9ce656f444aa9ca91ea6bbc9c051c081c7d","href":"https://static.observableusercontent.com/files/eb9aa5e971e556efbaa94976eb0d09c8d32b47df6330a4971a945768a714db78892ff74839ea9c7b045208ac83eaa9ce656f444aa9ca91ea6bbc9c051c081c7d","name":"share-of-individuals-using-the-internet.csv","type":"text/csv","lastModified":1627216873795.681,"size":202274},{"id":"94ca6567d8d1170d58d03da38fb46d98303f3a7c26dbb4ce1e5a61c7ae250bd5156e45a3fb79d8c76d9cbdf58203d0b77b3c2e8caf079451597d530976e51f99","href":"https://static.observableusercontent.com/files/94ca6567d8d1170d58d03da38fb46d98303f3a7c26dbb4ce1e5a61c7ae250bd5156e45a3fb79d8c76d9cbdf58203d0b77b3c2e8caf079451597d530976e51f99","name":"states.csv","type":"text/csv","lastModified":1627283839864.946,"size":1838}] 31:{"id":"1cf18afdb856df98","slug":"geographical-data-viz","title":"Geographical data viz","thumbnail":"8e13b07dcb28bf329d785c7d19a81b30f7d768ef4c5d24886bd42ff17ef4a1dd","access_level":"public","create_time":"$D2021-07-25T12:40:56.804Z","update_time":"$D2021-08-24T07:53:14.126Z","view_time":null,"first_public_time":"$D2021-07-28T08:12:40.211Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"7e74ffc02dae9bd7","login":"bibekyess","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8be1e4f838c9fc3baf9e0336ddf35057689a8ff168e0f7e111ed64350b8a8ed2","tier":"starter_2024"},"version":1361,"publish_version":1361,"role":null,"authored":false,"authors":[{"type":"individual","id":"cc772d2b0659f1fc","login":"bibekyess","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8be1e4f838c9fc3baf9e0336ddf35057689a8ff168e0f7e111ed64350b8a8ed2","tier":null}],"members":[{"type":"individual","id":"cc772d2b0659f1fc","login":"bibekyess","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8be1e4f838c9fc3baf9e0336ddf35057689a8ff168e0f7e111ed64350b8a8ed2","tier":null,"role":"editor"}],"comments":[{"id":"c9dcdd57935b409a","reply_to_id":null,"content":"You're right. so it was the reason I asked you about 'vegalite=require(@observablehq/vega-lite') sentence. If we use this , then it uses vega-lite API 4 version. If we use 'import { vl } from \"@vega/vega-lite-api-v5', we can use API 5 but I think we need to change all of our codes into different style. Like this: https://observablehq.com/@vega/vega-lite-api-v5","create_time":"$D2021-07-28T02:02:06.167Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"0f5287a48073ceaa","login":"yugyeongjung","name":"Yugyeong Jung","avatar_url":"https://avatars-next.observableusercontent.com/f216d11fa50ac7c103027b5f6ec3ab7edd4fb401e3dcdfced1e3a642a7b5e21f","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Geographical data viz","cells":[{"id":0,"value":"md`# Geographical data viz`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`**Choropleth Map**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"//Dataset: our world in data (https://raw.githubusercontent.com/TrainingByPackt/Interactive-Data-Visualization-with-Python/master/datasets/share-of-individuals-using-the-internet.csv) \n//please make choropleth map that express the percentage of population using the internet\n//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!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"internetShare= FileAttachment(\"share-of-individuals-using-the-internet.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"md`The above **internetShare** dataset doesn't contain the country id (or country codes), which is needed to link our data to a geodata while drawing the choropleth in vegalite. So, we will use another dataset containing countrycodes and extracts country code from it to the internetShare dataset.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"countryCodes = FileAttachment(\"countries_codes_and_coordinates@3.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"md`>The above dataset is from:
https://gist.githubusercontent.com/metal3d/5b925077e66194551df949de64e910f6/raw/c5f20a037409d96958553e2eb6b8251265c6fd63/country-coord.csv
\n> The Numeric code of the country *'Sudan'* is modified to '729' from '736' in the above dataset to match with the topjson geo data of the world.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"md`Excluding the fields we don't need to draw the choropleth and making a simpler dataset:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"internetShareSimpler = internetShare.map(function(d,i){\n return{\n name: d.Country,\n year: d.Year,\n internet: d['Individuals using the Internet (% of population)'],\n code: d.Code\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"md`Adds the corresponding countrycodes to the internetShareSimple dataset.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"{\n internetShareSimpler.forEach(function(d){\n for (let i = 0; i < countryCodes.length; i++)\n { \n d.year = parseFloat(d.year);\n if (countryCodes[i] [\"Alpha-3 code\"] == d.code){\n d.id = countryCodes[i][\"Numeric code\"]; //extracts the correct numeric code from the countryCodes object array\n break; //breaks the loop as it is not needed to go through the entire countryCodes\n }\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"internetShareSimpler","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"md`Extracting only the data of 2016 to interShareNew`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"internetShare2016 = internetShareSimpler.filter(d=>d.year == \"2016\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"md`Geo data of world:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"world = FileAttachment(\"world-110m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"md`Geo data of US:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"us = FileAttachment(\"us-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"md`# Drawing Choropleth world map that express the percentage of population using the internet in 2016`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"md`For drawing choropleth in vegalite, we need to use lookup transform to link our data source with the geo data source. There are two ways of doing so.\n1. Make geodata source as primary data source and the data containining contents to visualize as a secondary\n1. Make data source containing contents to visualize as primary and geodata as secondary`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"vegalite(\n{\n \"width\": 900,\n \"height\": 500,\n \"data\": {\n \"values\": internetShare2016, //Primary data source\n // \"values\": updatedInternetShare2016,\n },\n \"transform\": [\n {\n \"lookup\": \"id\",\n \"from\": {\n \"data\": {\n \"values\": world, //Secondary data source\n \"format\": {\n \"type\": \"topojson\",\n \"feature\": \"countries\"\n }\n },\n \"key\": \"id\"\n },\n \"as\": \"geo\" //looks up for the matching \"id\" values and the corresponding geo data values are stored on \"geo\" field\n }\n ],\n \"projection\": {\"type\": \"naturalEarth1\"},\n \"mark\": {\"type\": \"geoshape\",\"stroke\": \"white\", \"tooltip\": {\"content\": \"data\",}},\n \"encoding\": {\n \"shape\": {\"field\": \"geo\", \"type\": \"geojson\"}, //determines the shape from the field of the geojson data we obtained from lookup transform\n \"color\": {\"field\": \"internet\", \"type\": \"quantitative\", \"scale\": {range: plasmaColor},},\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"md`---\n# Making a slider of year and visualizing the choropleth:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1068,"value":"md`> Firstly finding the minimum and maximum years in our dataset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"internetShareSimpler.sort((a,b) => a.year-b.year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"min_year = internetShareSimpler.slice(0,1)[0].year","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"max_year= internetShareSimpler.slice(internetShareSimpler.length-1, internetShareSimpler.length)[0].year","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"md`

*I tried both ways of drawing the choropleth, but still I am not able to draw the correct slider animation. Both graphs shows animation only on 2016 and 2017 and surprisingly tooltip feature also shows only entries for 2016 and 2017 datas.*

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1193,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"md`

**It seems there is no bug in these codes. But, still, why am I not getting the correct slider animation?**

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"vegalite(\n{\n \"width\": 900,\n \"height\": 500,\n \"data\": {\n \"values\": internetShareSimpler\n },\n \"params\": [{\n \"name\": \"slider\",\n \"select\": {\"type\": \"point\", \"fields\": [\"year\"]},\n \"bind\": { \n \"year\": {\"input\": \"range\", \"min\": 1960 , \"max\": 2017, \"step\": 1}\n },\n }],\n // \"transform\": [\n // {\"filter\": \"datum.year == datum.slider\",}\n // ],\n \"transform\": [\n {\"lookup\": \"id\",\n \"from\": {\n \"data\": {\n \"values\": world,\n \"format\": {\n \"type\": \"topojson\",\n \"feature\": \"countries\"\n }\n },\n \"key\": \"id\"\n },\n \"as\": \"geo\"\n }\n ],\n \"projection\": {\"type\": \"naturalEarth1\"},\n \"mark\": {\"type\": \"geoshape\",\"stroke\": \"white\", \"tooltip\": {\"content\": \"data\"}},\n \"encoding\": {\n \"shape\": {\"field\": \"geo\", \"type\": \"geojson\"},\n \"color\": {\n \"condition\": { \"param\": \"slider\", \"field\": \"internet\", \"type\": \"quantitative\", \"scale\": {range: plasmaColor},},\n }\n }\n\n}\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"md`---\n# Another way of adding the slider using :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"import {slider} from '@manzt/mcv-choropleth-map-with-barchart-using-vega-embed'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"viewof year = {\n const sliderOfYear = slider({\n message: \"Select year: \",\n min: 1980, //Starting from 1980 than 1960 as there are not much difference in values from 1960 to 1980 \n max: 2017, \n start: 1980,\n step: 1,\n int: true});\n sliderOfYear.querySelector('input').style.width = \"70%\";\n return sliderOfYear;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"vegalite(\n{\n \"width\": 900,\n \"height\": 500,\n \"data\": {\n \"values\": world,\n \"format\": {\n \"type\": \"topojson\",\n \"feature\": \"countries\"\n }\n },\n \"transform\": [{\n \"lookup\": \"id\",\n \"from\": {\n \"data\": {\n \"values\": sliderworld, //sliderworld contains the filtered value according to selected year\n },\n \"key\": \"id\",\n \"fields\": [\"internet\"]\n }\n }],\n \"projection\": {\n \"type\": \"naturalEarth1\"\n },\n //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.\n \"layer\": [{ \n \"mark\": {\"type\": \"geoshape\", \"tooltip\": true},\n \"encoding\": {\n \"color\": {value: \"grey\"},\n }\n },{\n \"mark\": {\"type\": \"geoshape\", \"tooltip\": true},\n \"encoding\": {\n \"color\": {\n \"field\": \"internet\", \"type\": \"quantitative\", \n \"scale\": {domain: [0,100], range: plasmaColor},\n }\n }\n }]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"md`Filters the data of newworld according to year selected from the slider:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"sliderworld = internetShareSimpler.filter(d=> (d.year == year))\n//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\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"md`**Scatter plot on geographic map**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"//Dataset: https://raw.githubusercontent.com/plotly/datasets/master/1962_2006_walmart_store_openings.csv \n//please draw scatter plot on USA map!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"walmart = FileAttachment(\"1962_2006_walmart_store_openings.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"md`

In vegalite, maps cannot be zoomed like simple x-y encoded scatter plots.

Link: https://stackoverflow.com/questions/53471426/how-can-i-zoom-into-a-map-using-vega-lite`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`**Bubble plot on geographic map**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"//Dataset: Walmart_stores_by_state.csv (I stored it in Google Drive: Data Visualization Tutorial>Interns folder)\n//https://drive.google.com/file/d/1E2wUHyFEIJV-pMnjJ61xvxeuucbCATMI/view?usp=sharing\n//Please draw an bubble plot on USA map","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"walmartByState = FileAttachment(\"Walmart_stores_by_state.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`**To plot this data in vegalite, we do need the location by longitude and latitude. So, firstly lets extract the data and update walmardByState dataset.**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"location = FileAttachment(\"states.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1133,"value":"md`Link for the above states data: https://developers.google.com/public-data/docs/canonical/states_csv`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"md`> Searching the corresponding state in location and updating in new fields of walmartByState`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"{\n walmartByState.forEach(function(d){\n for (let i = 0; i < location.length; i++)\n { \n if (location[i].state == d.STRSTATE){\n d.latitude = location[i].latitude;\n d.longitude = location[i].longitude;\n break;\n }\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"vegalite(\n{\n \"width\": 700,\n \"height\": 500,\n \"title\": {\"text\": \"Walmart Stores Across States In the US\", \"fontSize\": 25, \"offset\": 30},\n \"layer\": [\n {\n \"data\": {\n \"values\": us,\n \"format\": { \"type\": \"topojson\", \"feature\": \"states\" }\n },\n \"projection\": {\n \"type\": \"albersUsa\"\n },\n \"mark\": { \"type\": \"geoshape\", \"fill\": \"lightgray\", \"stroke\": \"white\" }\n },\n {\n \"data\": {\n \"values\": walmartByState\n },\n \"mark\": \"circle\",\n \"encoding\": {\n \"longitude\": { \"field\": \"longitude\", \"type\": \"quantitative\" },\n \"latitude\": { \"field\": \"latitude\", \"type\": \"quantitative\" },\n \"size\": {\"field\": \"NUM_STORES\", \"type\": \"quantitative\", scale:{ range: [10,3000]}}, //encoding by size helps to draw the bubble plot\n \"color\": {\"value\": \"rgb(158,158,225)\"},\n \"stroke\": {\"value\": \"rgb(8,48,107)\"},\n }\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"vegalite = require(\"vega-embed@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"//highlights the texts in red\nhtml`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"