revise chart types

Author: tpreusse

Diff for: charts/Bar.js

@@ -0,0 +1,50 @@
+const VegaLite = require('./VegaLite');
+
+const defaults = {
+  data: undefined,
+  filter: undefined,
+  y: undefined,
+  aggregate: undefined,
+  value: undefined,
+  valueTitle: undefined,
+  facet: undefined,
+  facetTitle: undefined
+};
+
+module.exports = ({spec}) => {
+  const cfg = Object.assign({}, defaults, spec);
+
+  return VegaLite({
+    spec: {
+      config: {axis: {characterWidth: 0}},
+      data: {
+        url: cfg.data
+      },
+      transform: {
+        filter: cfg.filter,
+        calculate: [
+          cfg.facet && {field: 'facet', 'expr': cfg.facet},
+          cfg.y && {field: 'y', 'expr': cfg.y},
+          cfg.value && {field: 'value', 'expr': cfg.value}
+        ].filter(Boolean)
+      },
+      mark: 'bar',
+      encoding: {
+        column: cfg.facet && {title: cfg.facetTitle || cfg.facet, field: 'facet', type: 'nominal'},
+        x: {
+          title: cfg.valueTitle, aggregate: cfg.aggregate,
+          field: cfg.aggregate === 'count' ? '*' : 'value', type: 'quantitative'
+        },
+        y: {
+          title: false, field: 'y', type: 'ordinal',
+          axis: {axisWidth: 0, tickSize: 0, labelAngle: 0},
+          sort: {
+            op: cfg.aggregate,
+            field:  cfg.aggregate === 'count' ? '*' : 'value',
+            order: 'descending'
+          }
+        }
+      }
+    }
+  });
+};

Diff for: charts/DemographicBar.js

@@ -0,0 +1,61 @@
+const VegaLite = require('./VegaLite');
+
+const defaults = {
+  data: undefined,
+  filter: undefined,
+  age: undefined,
+  sex: undefined,
+  aggregate: 'sum',
+  value: undefined,
+  valueTitle: 'Population',
+  bandSize: 21,
+  facet: undefined,
+  facetTitle: undefined,
+  orient: 'vertical'
+};
+
+module.exports = ({spec}) => {
+  const cfg = Object.assign({}, defaults, spec);
+
+  return VegaLite({
+    spec: {
+      config: {axis: {characterWidth: 0}},
+      data: {
+        url: cfg.data
+      },
+      transform: {
+        filter: cfg.filter,
+        calculate: [
+          cfg.facet && {field: 'facet', 'expr': cfg.facet},
+          cfg.age && {field: 'age', 'expr': cfg.age},
+          cfg.sex && {field: 'sex', 'expr': cfg.sex},
+          cfg.value && {field: 'value', 'expr': cfg.value},
+        ].filter(Boolean)
+      },
+      mark: 'bar',
+      encoding: {
+        [cfg.orient === 'vertical' ? 'column' : 'row']:
+          cfg.facet && {title: cfg.facetTitle || cfg.facet, field: 'facet', type: 'nominal'},
+        [cfg.orient === 'vertical' ? 'row' : 'column']:
+          {title: 'Gender', field: 'sex', type: 'nominal'},
+        color: {
+          field: 'sex',
+          type: 'nominal',
+          legend: false,
+          scale: {range: ['#EA98D2', '#659CCA']}
+        },
+        x: {
+          title: 'Age', field: 'age', type: 'ordinal',
+          axis: {axisWidth: 0, tickSize: 0},
+          scale: {bandSize: cfg.bandSize}
+        },
+        y: {
+          title: cfg.valueTitle,
+          aggregate: cfg.aggregate,
+          field: cfg.aggregate === 'count' ? '*' : 'value',
+          type: 'quantitative'
+        }
+      }
+    }
+  });
+};

Diff for: charts/DistrictBar.js

@@ -2,13 +2,13 @@ const VegaLite = require('./VegaLite');
 
 const defaults = {
   data: undefined,
-  parse: undefined,
-  calculate: [],
   filter: undefined,
   district: undefined,
   aggregate: undefined,
   value: undefined,
-  valueTitle: undefined
+  valueTitle: undefined,
+  facet: undefined,
+  facetTitle: undefined
 };
 
 module.exports = ({spec}) => {
@@ -18,22 +18,26 @@ module.exports = ({spec}) => {
     spec: {
       config: {axis: {characterWidth: 0}},
       data: {
-        url: cfg.data,
-        format: {parse: cfg.parse}
+        url: cfg.data
       },
       transform: {
         filter: cfg.filter,
-        calculate: cfg.calculate
+        calculate: [
+          cfg.facet && {field: 'facet', 'expr': cfg.facet},
+          cfg.district && {field: 'district', 'expr': cfg.district},
+          cfg.value && {field: 'value', 'expr': cfg.value}
+        ].filter(Boolean)
       },
       mark: 'bar',
       encoding: {
+        column: cfg.facet && {title: cfg.facetTitle || cfg.facet, field: 'facet', type: 'nominal'},
         x: {
-          title: 'District', field: cfg.district, type: 'ordinal',
+          title: 'District', field: 'district', type: 'ordinal',
           axis: {axisWidth: 0, tickSize: 0, labelAngle: 0}
         },
         y: {
           title: cfg.valueTitle, aggregate: cfg.aggregate,
-          field: cfg.value, type: 'quantitative'
+          field: cfg.aggregate === 'count' ? '*' : 'value', type: 'quantitative'
         }
       }
     }

Diff for: index.js

@@ -5,7 +5,9 @@ const app = express();
 
 const TYPES = {
   VegaLite: require('./charts/VegaLite'),
+  Bar: require('./charts/Bar'),
   DistrictBar: require('./charts/DistrictBar'),
+  DemographicBar: require('./charts/DemographicBar'),
   ZurichMap: require('./charts/ZurichMap')
 };