Adding topojson

matthewturk · Apr 15, 2019 · e600a88 · e600a88
1 parent b9df0ab
commit e600a88
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 23 deletions.
diff --git a/champaign.topojson b/champaign.topojson
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <title>Matt Turk's SPR2019-ADV Project</title>
@@ -14,51 +15,117 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/lib/js/head.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vega-lite@3"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-lite"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-embed"></script>
 
     <link rel="stylesheet/less" type="text/css" href="styles.less" />
 
 </head>
+
 <body>
 
     <h1>Hello there!</h1>
 
-    <div id="vis"></div>
+    <div style="width:100%; height:100%; display: relative;" id="vis"></div>
 
     <!-- This is from the example embedded vega-lite demo -->
     <script type="text/javascript">
         var yourVlSpec = {
             $schema: 'https://vega.github.io/schema/vega-lite/v3.0.json',
             description: 'A simple bar chart with embedded data.',
-            data: { url: './unstacked_output.json'},
-            transform: [ 
+            data: {
+                name: 'champaign_zoning', url: './champaign.topojson',
+                "format": {
+                    "type": "topojson",
+                    "feature": "Zoning"
+                }
+            },
+            "transform": [
                 {
-                    'filter': {'field': 'LOCATION', "oneOf": ["WEST LAWN", "WEST LOOP", "ALBANY PARK"]}
-            }],
-            hconcat: [
+                    'lookup': 'properties.zoning_description',
+                    'from': {
+                        'fields': ['base_type'],
+                        'data':
+                        {
+                            'values': [
+                                { 'code': 'CB1', 'base_type': 'Commercial' },
+                                { 'code': 'CB2', 'base_type': 'Commercial' },
+                                { 'code': 'CB3', 'base_type': 'Commercial' },
+                                { 'code': 'CG', 'base_type': 'Commercial' },
+                                { 'code': 'CI', 'base_type': 'Commercial' },
+                                { 'code': 'CN', 'base_type': 'Commercial' },
+                                { 'code': 'CO', 'base_type': 'Commercial' },
+                                { 'code': 'I1', 'base_type': 'Industrial' },
+                                { 'code': 'I2', 'base_type': 'Industrial' },
+                                { 'code': 'IBP', 'base_type': 'Commercial' },
+                                { 'code': 'IOP', 'base_type': 'Commercial' },
+                                { 'code': 'IT-MF', 'base_type': 'Residential' },
+                                { 'code': 'IT-MX', 'base_type': 'Residential' },
+                                { 'code': 'IT-NC', 'base_type': 'Residential' },
+                                { 'code': 'IT-SF1', 'base_type': 'Residential' },
+                                { 'code': 'IT-SF2', 'base_type': 'Residential' },
+                                { 'code': 'MF1', 'base_type': 'Residential' },
+                                { 'code': 'MF2', 'base_type': 'Residential' },
+                                { 'code': 'MF3', 'base_type': 'Residential' },
+                                { 'code': 'MFUniv', 'base_type': 'Residential' },
+                                { 'code': 'MHP', 'base_type': 'Residential' },
+                                { 'code': 'SF1', 'base_type': 'Residential' },
+                                { 'code': 'SF2', 'base_type': 'Residential' }
+                            ]
+                        },
+                        'key': 'code'
+                    }
+                }
+            ],
+            "hconcat": [
                 {
-                    mark: 'point',
-                    encoding: {
-                        x: {field: 'DATE', type: 'temporal'},
-                        y: {field: 'CIRCULATION', type: 'quantitative',
-                            aggregate: "sum"}
+                    "selection": {
+                        "zone_choice": {
+                            "fields": ["base_type"],
+                            "type": "single",
+                            "bind": { "input": "select", "options": ["Residential", "Industrial", "Commercial"] }
+                        }
+                    },
+                    "mark": "geoshape",
+                    "projection": {
+                        "type": "albersUsa"
+                    },
+                    "encoding": {
+                        "color": { "field": "base_type", "type": "nominal" }
+                    },
+                    "width": 600, "height": 400,
+                    "autosize": {
+                        "type": "fit",
+                        "contains": "padding"
                     }
                 },
                 {
-                    mark: 'bar',
-                    encoding: {
-                        x: {field: 'LOCATION', type: 'nominal'},
-                        y: {field: 'CIRCULATION', type: 'quantitative',
-                        aggregate: 'sum'}
+                    "mark": "bar",
+                    "transform": [
+                        { "filter": { "selection": "zone_choice" } }
+                    ],
+                    "encoding": {
+                        "y": {
+                            "field": "properties.zoning_code",
+                            "type": "nominal"
+                        },
+                        "x": {
+                            "field": "properties.SHAPESTArea",
+                            "aggregate": "sum",
+                            "type": "quantitative"
+                        }
                     }
                 }
-            ]
+            ],
         };
+
         var embedded = vegaEmbed('#vis', yourVlSpec);
+
     </script>
-
-<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
+
+    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js"></script>
+
 </body>
-</html>
+
+</html>