Skip to content
Data visualizations regarding the 2014 Israel-Gaza conflict
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

D3.js Partition Graphs of the 2014 Israeli-Gaza Conflict

Image of Palestinian Casualties

Technologies used:

  • Sass - To make writing CSS not suck
  • Gulp - To automate tasks
  • Bower - To manage third-party libraries
  • D3.js - To handle Javascript graphing
  • JS-Lint - To ensure best practices in project's JS



To work on the front-end code of the application, you'll need to have the following packages installed before continuing.

  • Node.js: Use the installer provided on the NodeJS website.
  • Gulp: Run [sudo] npm install -g gulp
  • Bower *: Run [sudo] npm install -g bower
  • Ruby: Comes installed on Macs.
  • Sass : Run [sudo] gem install sass. Version 3.3 or higher is required due to sourcemap support

* Only necessary if user wants to add third-party libraries/frameworks to project


├── Resources   // Holds all front-end assets, including css, js and templates
└── Tasks       // Holds project tasks, including sass and js compiling, js-linting and spinning up a local server



└── Tasks
    ├── Gulpfile.js 
    │       // Project tasks are defined here
    │       // Loads `config` module
    └── config
        ├── index.js   // Allows for `config` directory to be used as a Node module, loading `paths.js` and `options.js`
        ├── options.js // Exposes object containing predefined options for use with Gulp plugins
        └── paths.js   // Exposes object containing file paths of Resources manipulated by Gulp tasks


  • gulp build

    • Compiles Sass into minified CSS
    • Concatenates and minifies JS
    • Runs JS-Lint on Javascript
    • Destination of build files is defined in Tasks/config/paths.js
  • gulp or gulp dev

    • Run a local server located at http://localhost:8889 with unminified files or http://localhost:8889 using production-ready files. This allows for development involving HTTP and AJAX requests.
    • Watches all Resources/scss/**/*.scss and Resources/js/**/*.js files, automatically compiling and building the resources when a change is detected.


Getting Started

It is imperative to have the default gulp (or gulp dev) task running while developing. The dev server is located at http://localhost:8889.


└── Resources
    ├── bower_components // Contains all third-party libraries
    ├── js         // Nothing special
    ├── build      // Contains `built` versions of SCSS and JS files, along with sourcemaps
    └── scss
        └── app.scss    // Only scss file that is compiled. Contains `@import`s for the rest of the scss 

Adding New JS Libraries

  1. Add lib to project using bower in the Tasks directory.
  2. The lib will appear in [root]/Resources/bower_components/....
  3. Declare the path to the lib file in [root]/Tasks/config/paths.js as an Array item in path.js.libs. The files will be concat'd in listed order.

Adding New JS Files

  • Declare the path to the new file in [root]/Tasks/config/paths.js as an Array item in path.js.src. The files will be concat'd in listed order.

Adding New SCSS Files

  • Include new stylesheets in /Resources/scss/app.scss using @import "path/to/file.scss"
You can’t perform that action at this time.