Make various improvements for v0.7.0

Author: vladh

CHANGELOG.txt CHANGELOG.mdCHANGELOG.txt renamed to CHANGELOG.md

@@ -1,4 +1,15 @@
-v0.6.0
+# Changelog
+
+## v0.7.0
+
+- [improvement] Remove arrow in hero (everyone wanted to click it)
+- [improvement] Move footer into Page component so it doesn't load first
+- [improvement] Make districts clickable in first map
+- [improvement] Make stacked bar chart clickable
+- [improvement] Move stacked bar chart tooltip a bit up
+
+## v0.6.0
+
 - [improvement] Improve design.
 - [improvement] Improve hero appearance.
 - [improvement] Optimise header scene slightly.
@@ -19,7 +30,8 @@ v0.6.0
 - [feature] Add footer.
 - [bug] Age group reducers were incorrectly labelled.
 
-v0.5.0
+## v0.5.0
+
 - [feature] Add initial content for a couple of sections.
 - [improvement] Improve range chart to support employee data.
 - [improvement] Improve district profile design.
@@ -29,7 +41,8 @@ v0.5.0
 - [improvement] Improve arrangement of financial data.
 - [scrapped] Change employee data to reflect population, then change it back because nah.
 
-v0.4.0
+## v0.4.0
+
 - [feature] Add map to district selection.
 - [feature] Add district selection by clicking on map.
 - [feature] Add Gini charts for wealth and income.
@@ -47,7 +60,8 @@ v0.4.0
 - [improvement] Make axis labels look better.
 - [improvement] Add axis label to map chart.
 
-v0.3.0
+## v0.3.0
+
 - [bug] Fix range chart node collisions for very tight data.
 - [bug] Give range chart enough padding for longer axis labels to show.
 - [bug] Optimise header scene performance.
@@ -56,7 +70,8 @@ v0.3.0
 - [feature] Add district profile selection.
 - [bug] Fix label positioning.
 
-v0.2.0
+## v0.2.0
+
 - [bug] Fix chart spacing.
 - [bug] Fix header overflow.
 - [bug] Fix color range in map.
@@ -67,5 +82,6 @@ v0.2.0
 - [feature] Add full-time employee equivalents range chart.
 - [feature] Add full-time employee equivalents map chart.
 
-v0.1.0
+## v0.1.0
+
 - Initial version.

README.md

@@ -1,39 +1,17 @@
-## Starting the server
+# exp-wohnviertel
 
-Use `./bin/start-dev` to start a development server.
+This is the Basel Districts page, visible at https://baseldistricts.saffron.so.
 
-For production, use your platform of choice to start
-`NODE_ENV="production" node server.js`.
+## Usage
 
-## Config
-
-Copy `config-example.js` to `config.js`, then set the appropriate
-variables if needed.
-
-## Assets
-
-To build and watch:
+To run a development server:
 
 ```bash
-npm run gulp
+npm run start
 ```
 
-To just build:
+To build:
 
 ```bash
 npm run build
 ```
-
-To build in production mode:
-
-```bash
-npm run build-production
-```
-
-The gulpfile compiles in the following ways:
-
-* `app/views/**/*.js` -> babel -> `public/javascripts/views/`
-* `app/stylesheets/**/*.styl` -> stylus -> `public/stylesheets/compiled/`
-* `<your configuration>` -> concat -> `public/stylesheets/build/<name>.css`
-* `<your configuration>` -> concat -> `public/javascripts/build/<name>.js`
-* `<your configuration>` -> browserify -> `public/javascripts/build/<name>.js`

TODO.txt

@@ -1,8 +1,13 @@
-* [feature] Add full branding
-* [feature] Add i18n
-* [feature] Add analytics
+# TODO
+
+## Essential
+
 * [bug] Fix undefined hover over gray bubbles in Net Worth Inequality
+* [bug] Add hover states on first map and stacked bar chart
 * [improvement] Make arrow clickable
+
+## Ideas
+
 * [improvement] Add chart for workers divided by population
 * [improvement] Make note that Swiss people are excluded in foreigners table
 * [improvement] Show workers as portion of total population instead of absolute number

app/assets/includes/components/hero.pug

@@ -17,6 +17,7 @@
             a(href='https://www.saffron.so')
               div Created in Basel by Vlad-Stefan Harbuz at
               img(src='/images/saffron.svg')
-    .hero-footer
-      .hero-footer__hint
-        img(src='/images/downarrow.svg')
+    //-
+      .hero-footer
+        .hero-footer__hint
+          img(src='/images/downarrow.svg')

app/assets/includes/components/page.pug

@@ -34,3 +34,5 @@
     include page__religion
     #chart-age
     include page__age
+
+  include ../footer

app/assets/includes/default-scripts.pug

@@ -1,3 +1,7 @@
+script(src='/vendor.js')
+script(src='/app.js')
+script.
+  require('app')
 script(async src="https://www.googletagmanager.com/gtag/js?id=UA-74607125-4")
 script.
   if (window.location.hostname != 'localhost') {
@@ -6,7 +10,3 @@ script.
     gtag('js', new Date());
     gtag('config', 'UA-74607125-4');
   }
-script(src='/vendor.js')
-script(src='/app.js')
-script.
-  require('app')

app/assets/includes/layout.pug

@@ -30,7 +30,6 @@ html(lang='en')
     #page-container.page-container
       include header
       block content
-      include footer
     block prescripts
     include default-scripts
     block scripts

app/components/map-chart.js

@@ -47,12 +47,16 @@ Vue.component('map-chart', {
         }
       }
 
-      this.mapSvg
+      const districts = this.mapSvg
         .selectAll('[data-name="wohnviertel"] polygon')
         .data(this.graphData, makeKey)
         .on('mouseover', util.bindContext(this, this.showTooltip))
         .on('mouseout', util.bindContext(this, this.hideTooltip))
         .on('click', util.bindContext(this, this.handleClick))
+
+      if (this.onClick) {
+        districts.style('cursor', 'pointer')
+      }
     },
 
     initLegend() {
@@ -97,7 +101,9 @@ Vue.component('map-chart', {
     },
 
     handleClick(el, d) {
-      this.onClick(d.district)
+      if (this.onClick) {
+        this.onClick(d.district)
+      }
     },
 
     showTooltip(el, d) {

app/components/stack-chart.js

@@ -225,7 +225,7 @@ Vue.component('stack-chart', {
       let rect = el.getBoundingClientRect()
       let barMid = (this.x(d[1]) - this.x(d[0])) / 2
       let left = rect.left + window.scrollX + barMid
-      let top = rect.top + window.scrollY
+      let top = rect.top + window.scrollY - 20
       let barGroup = el.parentNode
       let parentDatum = d3.select(barGroup).datum()
       if (this.isFocused && !(d3.select(barGroup).classed('bar-group--focused'))) {
@@ -286,6 +286,7 @@ Vue.component('stack-chart', {
         .on('mouseover', bindContext(this, this.showTooltip))
         .on('mouseout', bindContext(this, this.hideTooltip))
         .on('click', bindContext(this, this.toggleFocus))
+        .style('cursor', 'pointer')
     },
 
     draw() {