The gist can be viewed here
Github Repository link
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.
- Better performance are noted for Left handed players with higher median
avg
andHR
- Both handed players are found to have lower
weight
andheight
.
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 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.
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
andavg
side bye side rather than on top of each other. - Include the sample size used in each category of
handednes
.
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
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.
Color coding is updated with a unique color for each series avg
,HR
,height
, weight
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
toindex_1.html
to view that version.