Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@sz0314
sz0314 authored Oct 2, 2023
1 parent ce30592 commit 9147b99
Show file tree
Hide file tree
Showing 2 changed files with 318 additions and 0 deletions.
166 changes: 166 additions & 0 deletions Map.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="vis"/>
<script>
const spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"autosize": {"resize": true},
"data": {
"url": "https://raw.githubusercontent.com/FIT3179/Vega-Lite/main/3_choropleth_map/js/ne_110m_admin_0_countries.topojson",
"format": {"type": "topojson", "feature": "ne_110m_admin_0_countries"}
},
"vconcat": [
{
"title": "Life Expectancy World Bank",
"width": 800,
"height": 400,
"projection": {"type": "equalEarth"},
"layer": [
{
"transform": [
{
"calculate": "'Data is not available in ' + datum.properties.NAME",
"as": "note"
}
],
"mark": {"type": "geoshape", "fill": "lightgray", "stroke": "white"},
"encoding": {"tooltip": {"field": "note"}}
},
{
"data": {
"url": "https://raw.githubusercontent.com/FIT3179/Vega-Lite/main/7_others/oceans.topojson",
"format": {"type": "topojson", "feature": "oceans"}
},
"mark": {"type": "geoshape", "fill": "white"}
},
{
"data": {
"url": "https://raw.githubusercontent.com/FIT3179/Vega-Lite/main/2_symbol_map/js/WorldMapWithGraticules.topojson",
"format": {"type": "topojson", "feature": "ne_110m_graticules_30"}
},
"mark": {"type": "geoshape", "fill": null, "stroke": "lightgray"}
},
{
"transform": [
{
"lookup": "properties.NAME",
"from": {
"data": {
"url": "https://raw.githubusercontent.com/sz0314/life_expansion/main/averaged_features_by_country.csv"
},
"key": "Country Name",
"fields": ["Life_Expectancy"]
}
}
],
"mark": {"type": "geoshape", "stroke": "white"},
"params": [{"name": "countrySelection", "select": {"type": "point"}}],
"encoding": {
"color": {
"field": "Life_Expectancy",
"type": "quantitative",
"scale": {
"type": "threshold",
"domain": [50, 60, 70, 80, 90],
"range": ["#f0f9e8", "#ccebc5", "#a8ddb5", "#7bccc4", "#4eb3d3"]
}
},
"tooltip": [
{
"field": "properties.NAME",
"type": "nominal",
"title": "Country"
},
{
"field": "Life_Expectancy",
"type": "quantitative",
"format": ".0f"
}
]
}
},
{
"transform": [
{
"lookup": "properties.NAME",
"from": {
"data": {
"url": "https://raw.githubusercontent.com/FIT3179/Vega-Lite/main/3_choropleth_map/data/countryInfo.csv"
},
"key": "name",
"fields": ["latitude", "longitude"]
}
}
],
"mark": {"type": "text"},
"encoding": {
"longitude": {"field": "longitude", "type": "quantitative"},
"latitude": {"field": "latitude", "type": "quantitative"},
"text": {"field": "properties.NAME", "type": "nominal"},
"opacity": {
"condition": {
"test": "datum['properties.NAME'] == 'Sweden' || datum['properties.NAME'] == 'Japan' || datum['properties.NAME'] == 'Australia' || datum['properties.NAME'] == 'Switzerland' || datum['properties.NAME'] == 'Iceland' || datum['properties.NAME'] == 'Israel'|| datum['properties.NAME'] == 'Spain'|| datum['properties.NAME'] == 'Italy'|| datum['properties.NAME'] == 'Singapore' || (datum.latitude == 46.227638 && datum.longitude == 1.8213749)",
"value": 1
},
"value": 0
}
}
},
{
"data": {
"values": [
{
"latitude": 46.227638,
"longitude": -15.8213749,
"text": "France"
}
]
},
"mark": {"type": "text", "fontSize": 10},
"encoding": {
"longitude": {"field": "longitude", "type": "quantitative"},
"latitude": {"field": "latitude", "type": "quantitative"},
"text": {"field": "text", "type": "nominal"},
"opacity": {"value": 1}
}
}
]
},
{
"width": 700,
"transform": [
{
"lookup": "properties.NAME",
"from": {
"data": {
"url": "https://raw.githubusercontent.com/sz0314/life_expansion/main/averaged_features_by_country.csv"
},
"key": "Country",
"fields": ["Life_Expectancy"]
}
},
{"filter": {"param": "countrySelection", "empty": false}}
],
"mark": {"type": "bar"},
"encoding": {
"x": {
"field": "Life_Expectancy",
"type": "quantitative",
"title": "Life Expectancy Top 10 Countries"
},
"y": {"field": "properties.NAME", "type": "nominal", "title": null}
}
}
],
"config": {}
};
vegaEmbed("#vis", spec, {mode: "vega-lite"}).then(console.log).catch(console.warn);
</script>
</body>
</html>
152 changes: 152 additions & 0 deletions Map.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"autosize": {"resize": true},
"data": {
"url": "https://raw.githubusercontent.com/FIT3179/Vega-Lite/main/3_choropleth_map/js/ne_110m_admin_0_countries.topojson",
"format": {"type": "topojson", "feature": "ne_110m_admin_0_countries"}
},
"vconcat": [
{
"title": "Life Expectancy World Bank",
"width": 800,
"height": 400,
"projection": {"type": "equalEarth"},
"layer": [
{
"transform": [
{
"calculate": "'Data is not available in ' + datum.properties.NAME",
"as": "note"
}
],
"mark": {"type": "geoshape", "fill": "lightgray", "stroke": "white"},
"encoding": {"tooltip": {"field": "note"}}
},
{
"data": {
"url": "https://raw.githubusercontent.com/FIT3179/Vega-Lite/main/7_others/oceans.topojson",
"format": {"type": "topojson", "feature": "oceans"}
},
"mark": {"type": "geoshape", "fill": "white"}
},
{
"data": {
"url": "https://raw.githubusercontent.com/FIT3179/Vega-Lite/main/2_symbol_map/js/WorldMapWithGraticules.topojson",
"format": {"type": "topojson", "feature": "ne_110m_graticules_30"}
},
"mark": {"type": "geoshape", "fill": null, "stroke": "lightgray"}
},
{
"transform": [
{
"lookup": "properties.NAME",
"from": {
"data": {
"url": "https://raw.githubusercontent.com/sz0314/life_expansion/main/averaged_features_by_country.csv"
},
"key": "Country Name",
"fields": ["Life_Expectancy"]
}
}
],
"mark": {"type": "geoshape", "stroke": "white"},
"params": [{"name": "countrySelection", "select": {"type": "point"}}],
"encoding": {
"color": {
"field": "Life_Expectancy",
"type": "quantitative",
"scale": {
"type": "threshold",
"domain": [50, 60, 70, 80, 90],
"range": ["#f0f9e8", "#ccebc5", "#a8ddb5", "#7bccc4", "#4eb3d3"]
}
},
"tooltip": [
{
"field": "properties.NAME",
"type": "nominal",
"title": "Country"
},
{
"field": "Life_Expectancy",
"type": "quantitative",
"format": ".0f"
}
]
}
},
{
"transform": [
{
"lookup": "properties.NAME",
"from": {
"data": {
"url": "https://raw.githubusercontent.com/FIT3179/Vega-Lite/main/3_choropleth_map/data/countryInfo.csv"
},
"key": "name",
"fields": ["latitude", "longitude"]
}
}
],
"mark": {"type": "text"},
"encoding": {
"longitude": {"field": "longitude", "type": "quantitative"},
"latitude": {"field": "latitude", "type": "quantitative"},
"text": {"field": "properties.NAME", "type": "nominal"},
"opacity": {
"condition": {
"test": "datum['properties.NAME'] == 'Sweden' || datum['properties.NAME'] == 'Japan' || datum['properties.NAME'] == 'Australia' || datum['properties.NAME'] == 'Switzerland' || datum['properties.NAME'] == 'Iceland' || datum['properties.NAME'] == 'Israel'|| datum['properties.NAME'] == 'Spain'|| datum['properties.NAME'] == 'Italy'|| datum['properties.NAME'] == 'Singapore' || (datum.latitude == 46.227638 && datum.longitude == 1.8213749)",
"value": 1
},
"value": 0
}
}
},
{
"data": {
"values": [
{
"latitude": 46.227638,
"longitude": -15.8213749,
"text": "France"
}
]
},
"mark": {"type": "text", "fontSize": 10},
"encoding": {
"longitude": {"field": "longitude", "type": "quantitative"},
"latitude": {"field": "latitude", "type": "quantitative"},
"text": {"field": "text", "type": "nominal"},
"opacity": {"value": 1}
}
}
]
},
{
"width": 700,
"transform": [
{
"lookup": "properties.NAME",
"from": {
"data": {
"url": "https://raw.githubusercontent.com/sz0314/life_expansion/main/averaged_features_by_country.csv"
},
"key": "Country",
"fields": ["Life_Expectancy"]
}
},
{"filter": {"param": "countrySelection", "empty": false}}
],
"mark": {"type": "bar"},
"encoding": {
"x": {
"field": "Life_Expectancy",
"type": "quantitative",
"title": "Life Expectancy Top 10 Countries"
},
"y": {"field": "properties.NAME", "type": "nominal", "title": null}
}
}
],
"config": {}
}

0 comments on commit 9147b99

Please sign in to comment.