Skip to content

Instantly share code, notes, and snippets.

@bibinmjose
Last active September 27, 2017 09:11
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save bibinmjose/465959c52fbc7f9b5ff58b60f4d19fa6 to your computer and use it in GitHub Desktop.
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.

  1. download/clone the repository from the github link
  2. 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.
  3. Open web browser and type: http://localhost:8080/index.html
  4. Change index.html to index_1.html to view that version.

Resources

handedness height weight avg HR Count
B 72.0 180.0 0.2405 13.0 104
L 73.0 185.0 0.248 23.5 316
R 73.0 185.0 0.233 14.0 737
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="http://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>
MIT License
Copyright (c) [2017] [bibin jose]
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment