All examples By author By category About

bibinmjose

Full window Github gist

Dual axis charts using Dimplejs

The gist can be viewed here

Github Repository link

Summary

Dataset contains median statistics of baseball players grouped by handedness. Each row contains handedness, height,weight,avg, HR and Count. Each graph explains the difference in performance as well as body metrics based on handedness of player.

Graph #1 (Performance based on handedness):

Better performance are noted for Left handed players with higher median avg and HR

Graph #2 (Body Metrics based on handedness):

Both handed players are found to have lower weight and height.

Design

Dimple.js library is used create the visualization based on example "Vertical Bubble Lollipop".

Dual axis is used to plot two parameters into one chart with categorical variables on x-axis. Dual axis allows clubbing together performance on to one graph and body metrics on to another.

Tooltip animation allows explicitly read plotted data. Animation of the second graph is delayed as it has to be read after the first one.

A smoothes spline is added to each series of data as a guide to eye.

Summary of each graph is included on top of graph.

Feedback

Feedback 1 - [index_initial.html --> index_1.html]

Doesn't convey any story. Cloud of point are obscuring the difference between them. Might have to change what to plot. Good Animation
Legend is not clear/undestandable.

Improvements made

Completely revamped the visualization to explain performance based on handedness. Legends are clearer. Grouped the data based on handedness for fewer but clearer data points (used median value in each group). Used a dual axis chart to convey both performance metric with one chart. Minimum and maximum for each axis is controlled to delineate both series.

Feedback 2 - [index_1.html --> index_2.html]

Overplotting obscures the story. Try to plot the bar graphs of HR and avg side bye side rather than on top of each other.
Include the sample size used in each category of handednes.

Improvements made

Not able to plot bars side by side using Dimplejs, hence moved to bubble plot. Size of the bubble is maped to population used to find the median.

Feedback 3 - [index_2.html --> index_3.html]

May be add body statistics to show how height and weight vary
Add a line to guide the eye for each series

Explain improvement made

Two seperate graphs 1) for performance and 2) for body statistics. A smoothed line is added for each series to guide the eye. Animation is added for aesthetic loading of data.

Feedback 4 - [index_3.html --> index.html]

Color coding - currently blue and red are double encoded. Since the charts are so similar and your legend labels all start with "Median" I think it is important to use four different colours, one for each variable - Home Runs, Batting Average, Height and Weight.

Explain improvement made

Color coding is updated with a unique color for each series avg,HR,height, weight

Setup (on Mac)

Running the webpage locally requires starting a webserver.

download/clone the repository from the github link
Using terminal cd into the folder containing the files and start the webserver as follows python -m http.server 8080 this will start a webserver on the port 8080.
Open web browser and type: http://localhost:8080/index.html
Change index.html to index_1.html to view that version.

Resources

http://dimplejs.org/examples_viewer.html?id=bubbles_vertical_lollipop
/judemoon/c48b65e8570eacd9c6ed7d6a1c5aab93
http://www.d3noob.org/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
  <style>
    body: {
      background-color: #efe8d2;
      align-items: center;
    }
    h2{
      text-align: center;
      font-family: Arial;
      font-size: 20px;
    }
    h3{
      text-align: left;
      font-family: Arial;
      font-size: 18px;
      font-weight: norml;
    }
    p{
      text-align: left;
      font-family: Arial;
      font-size: 12px;
      font-weight: lighter;
    }
    p_large{
      text-align: center;
      font-family: Arial;
      font-size: 14px;
      font-weight: normal;
    }
    .chart{
      align-content: center;
    }
    #chartContainer {
      align-content: center;
    }

</style>
    <script type="text/javascript">
      "use strict";
      function draw(data) {
      
      /*
        D3.js setup code
      */

var margin = 75,
              width = 750 - 2*margin,
              height = 500 - 2*margin;

// Header
          d3.select("body")
            .append("h2")
            .text("Udacity Project 6: Baseball Player statistics")

// Description
          d3.select("body")
            .append("p_large")
            .text("The two visualizations are created based on the statistics of 1,157 baseball players. The dependency of handedness of players in their Performance and Body metrics is explained here.")

d3.select("body")
            .append("div")
            .attr("class", "chart")
            .attr("id", "chartContainer")

d3.select("body")
            .append("h3")
            .text("Performance based on handedness")
          d3.select("body")
            .append("p")
            .text("Finding#1: Left handers have higher Batting Average and Home Runs")

// first chart and svg element
        var svg = dimple.newSvg("body", width,height);
        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(margin,margin-20,width-1.8*margin,height-1.5*margin)

// Adding Chart Axes
        var x = myChart.addCategoryAxis("x", "handedness");
        x.addOrderRule(["R","L","B"]);
        x.title = "Handedness"

var y1 = myChart.addMeasureAxis("y", "HR");
        y1.title = "Home Runs";
        y1.overrideMax = 26;
        var y2 = myChart.addMeasureAxis("y", "avg");
        y2.title = "Average Runs";
        y2.overrideMax = 0.3;
        y2.overrideMin = 0.21;

var z = myChart.addCategoryAxis("z", "Count");

myChart.addSeries("Median Home Runs",dimple.plot.line,[x,y1,z])
                .interpolation = "cardinal";

myChart.addSeries("Median Batting Average", dimple.plot.line,[x,y2,z])
                .interpolation = "cardinal";

myChart.addSeries("Median Home Runs",dimple.plot.bubble,[x,y1,z]);
        myChart.addSeries("Median Batting Average", dimple.plot.bubble,[x,y2,z]);

myChart.addLegend(3*margin,25,300,20, "right");

myChart.draw(1000);

// ------------------------------------------------------------------------------------
        // second chart and svg element
        
        d3.select("body")
            .append("h3")
            .text("Body metrics based on handedness")
        d3.select("body")
            .append("p")
            .text("Finding#2: Both handers have lower weight and height compared to others")

var svg2 = dimple.newSvg("body", width,height);
        var myChart2 = new dimple.chart(svg2, data);
        myChart2.setBounds(margin,margin-50,width-1.8*margin,height-1.5*margin)

// Adding Chart2 Axes
        var x_2 = myChart2.addCategoryAxis("x", "handedness");
        x_2.addOrderRule(["R","L","B"]);
        x_2.title = "Handedness"

var y1_2 = myChart2.addMeasureAxis("y", "height");
        y1_2.title = "Height";
        y1_2.overrideMax = 74;
        y1_2.overrideMin = 70;
        var y2_2 = myChart2.addMeasureAxis("y", "weight");
        y2_2.title = "Weight";
        y2_2.overrideMax = 200;
        y2_2.overrideMin = 170;
        // y2_2.color.fill("#e2cf3d")

var z_2 = myChart2.addCategoryAxis("z", "Count");

myChart2.addSeries("Median Height",dimple.plot.line,[x_2,y1_2,z_2])
                .interpolation = "cardinal";

myChart2.addSeries("Median Weight", dimple.plot.line,[x_2,y2_2,z_2])
                .interpolation = "cardinal";

myChart2.addSeries("Median Height",dimple.plot.bubble,[x_2,y1_2,z_2]);
        myChart2.addSeries("Median Weight", dimple.plot.bubble,[x_2,y2_2,z_2]);
        myChart2.assignColor("Median Height", "orange");
        myChart2.assignColor("Median Weight", "lightgreen");

myChart2.addLegend(3*margin,1,300,20, "right");

myChart2.draw(2000);
      }
      </script>
  </head>
<body>
  <script type="text/javascript">
  /*
    Use D3 (not dimple.js) to load the CSV file
    and pass the contents of it to the draw function
    */
  d3.csv("baseball_median.csv", function(d) {
    d['height'] = +d['height'];
    d['weight'] = +d['weight'];
    d['avg'] = +d['avg'];
    d['HR'] = +d['HR'];
    return d;
  },draw);
  </script>
</body>
</html>

Modified http://d3js.org/d3.v4.min.js to a secure url

Modified http://dimplejs.org/dist/dimple.v2.3.0.min.js to a secure url

https://d3js.org/d3.v4.min.js

https://dimplejs.org/dist/dimple.v2.3.0.min.js