/d3-scatter-plot

An example scatter plot application built with D3

Primary LanguageJavaScriptMIT LicenseMIT

Build Status Stack Share dependencies devDependency Status js-standard-style github-version

D3 Scatter Plot demo application

Demo compiled and deployed with gulp-starter: http://golgistudio.github.io/d3-scatter-plot

(view files on gh-pages branch)

D3 Scatter Plot initial screen

Table of contents

Overview

This is an example scatter plot built with D3. It is a simple application that can be used to explore data interactions and design data applications. Many D3 examples are static and hard coded, which makes it harder to explore interactions. This example demonstrates the variety of changes and interactions one would expect in a D3 application. It also separates out not only the data, but the properties that define the behavior so they can be changed via menu commands. Finally, it uses design patterns to decouple components.

A couple of guiding principles that were used

  • Used only D3.js, no other external javascript libraries
  • The navigation is intentionally very basic for quick prototyping
  • Used Es6 modules

Getting started

The build system is based on vigetlabs excellent build system - gulp-starter and works on Linux and Mac computers.

Clone the repository, install the node dependencies and run the commands below to run the development version of the site. Note node is only used for the build system. This will run gulp with the following tasks

  1. Compile with webpack all js files
  2. Publish a local version of the site to demoApp/public
  3. Combine all the JS and css files into single js and css files.
  4. Update path references to js, css and image files.
  5. Launch the site in a browser window using express (http://localhost:3000)
  6. Launch browsersync (http://localhost:3001)
git clone https://github.com/golgistudio/d3-scatter-plot.git MyApp
cd MyApp
npm install
npm run gulp

To run a production version of the site...

npm run demo

To run tests...

npm run test

To generate documentation which will be output in demoApp/quality/docs. This is currently using jsdoc by itself, because es6 doesn't seem to be fully supported yet in the gulp version.

npm run doc

To run jshint....

npm run gulp jshint

To deploy to ghpages...

in package.json, set the homepage to be your gh-pages site.
npm run deploy

Travis integration - .travise.yml

Running the application

Navigate to one the following sites: Experiment A Experiment B

Navigation

Data

  • Reset - Restore original data set
  • Add - Update data set with new points
  • Remove - Updae data set by removing points
  • Change - Update data set by changing the values of existing points

Symbol

  • Circle
  • Triangle
  • Icon
  • Square

Color

  • Blue
  • Purple

Plot Style

  • Scatter
  • Barchart

Experiment - change the experiment including titles, leged, tooltips, labels

  • Experiment A
  • Experiment B

Undo & Redo

  • Undo
  • Redo
  • Unwind (ToDo)
  • Rewind (ToDo)

Language (ToDo)

Responsiveness

  • Resizes with the window resize
  • Responds to orientation changes

Plot interactions

  • Tooltip on hover
  • Highlight points on both charts with the same x-axis value
  • Y axis zoom
  • Click legend item to toggle plot on/off

Design Patterns

  • Command pattern - all menu commands, undo & redo
  • Mediator pattern - event manager
  • Singleton - Datastore
  • Factory - ScatterPlot

Resources

D3

D3 Code Snippets

Build Tools

Design Patterns