Continuous Delivery Maturity Model - Gap Analysis Visualization Tool, using d3
JavaScript Other
Latest commit cc4b81c Nov 9, 2016 @garystafford Updating README
Failed to load latest commit information.
css Minor refactoring Feb 5, 2015
app.js Refactored data to use constants Feb 9, 2015

Continuous Delivery Maturity Model - Gap Analysis Visualization Tool

Gap analysis visualization tool for the 'Continuous Delivery Maturity Model'. Based on model from the book, 'Continuous Delivery: Reliable Software Releases through Build, Test, and Deployment Automation', by Jez Humble and David Farley, available on Amazon. Allows the comparison of the six categories of the CD Maturity Model across multiple applications platforms.

CD Gap Analysis


Browser-based tool, using d3 JavaScript library. Visualizations rendered using JavaScript and SVG.


Currently, data is stored in the data_radar.js file as an array of JavaScript object literals. It would be very easy to move the datasource to a static JSON file, or better yet a database, like MongoDB.

    "Build Management and Continuous Integration",
    "Environments and Deployment",
    "Release Management and Compliance",
    "Data Management",
    "Configuration Management"

applications = [
    "Core Banking Application",
    "Internet Banking Application",
    "Human Resources Application",
    "ATM Management Application"

maturityData: [
    [{ //Core Banking Application
        "app"  : applications[0],
        "axis" : CATEGORIES[0],
        "value": -1
    }, {
        "app"  : applications[0],
        "axis" : CATEGORIES[1],
        "value": -1
    }, {
        "app"  : applications[0],
        "axis" : CATEGORIES[2],
        "value": 1
    }, {
        "app"  : applications[0],
        "axis" : CATEGORIES[3],
        "value": -1
    }, {
        "app"  : applications[0],
        "axis" : CATEGORIES[4],
        "value": 0
    }, {
        "app"  : applications[0],
        "axis" : CATEGORIES[5],
        "value": 2

RequireJS Optimization

Module-based project uses RequireJS. After making any javascript or css changes, optimize the project using RequireJS Optimizer. Optimizer combines related scripts together into build layers and minifies them via UglifyJS (the default). Requires Node.js.

npm install -g requirejs
 cd cd-maturity-model
 cp -f js/require/require.min.js dist/
 node build/r.js -o build/build.js
 node build/r.js -o cssIn=css/radar.css out=dist/main-built.css

Optimizing Project

Hosting Project

To host the project, after optimizing, you only need the following items:

  • index.html file
  • favicon.ico file
  • dist directory

Hosting Project on Apache with Docker

Run commands above first, then:

docker build -t apache2 .
docker run -dit --name cd-maturity-model -p 8082:80 apache2

Point your browser to http://localhost:8082/

Helpful Links