City Stats mashup is a stand-alone Open Data visualisation built in Angular and D3.js intended for exploring statistical/demographic data about cities and villages. These can be grouped together via the graphical interface for aggregated results, hence deeper exploration and comparison.
The project is under development, but it is in fully working condition. An online deployment exploring cities and villages in Cyprus will be available soon. See screenshots below for what to expect in a live deployment using a dummy dataset. Follow the steps next to clone the repo and run the demo locally.
Adding and grouping nodes/cities:
The project uses the MEAN project structure/configuration available here. All development scripts are provided in this repo. To load the demo locally, simply clone citystats-mashup and follow these steps:
-
Install Node.js and npm (http://nodejs.org/).
-
Install bower and gulp:
npm install -g bowernpm install -g gulp
-
Change directory to
app-angular -
Install required npm and bower packages:
npm install -
If all successful, start the server:
npm start
This should start the application (http://localhost:8000) in a new browser window. Build option is set to production (read here for further details). You should be able to interact with app right away.
Start-up state of the application:
The following D3 custom modules are used for the dynamic chart and force-layout implementations:
MIT
Background map image from Google Maps.