Skip to content

Instantly share code, notes, and snippets.

@srinivashavanur
Last active April 3, 2016 01:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save srinivashavanur/17de3e6a46bee7522772 to your computer and use it in GitHub Desktop.
Save srinivashavanur/17de3e6a46bee7522772 to your computer and use it in GitHub Desktop.
Rule of thumb (Visual Implementation 5)

Problem Statement

Use D3, Tableau, R, or Excel to demonstrate one of the following rules of thumb:

no unjustified 3D: perspective distortion

no unjustified 3D: occlusion hides information

no unjustified 2D

eyes beat memory: animation vs. side-by-side views

overview first, zoom and filter, details on demand

responsiveness is required: latency and interaction design

get it right in black and white

You should create 2 versions of your visualization (which may include more than one chart depending on the rule). One version should break the rule of thumb and the other version should correct it.


Name: Srinivas Havanur

Assignment: CS 725 - VI5 submission

Course: Information Visualization

Semester: Spring 2016


Built with blockbuilder.org

Data is obtained from the medicare website cms.gov

(https://www.cms.gov/Research-Statistics-Data-and-Systems/Statistics-Trends-and-Reports/Medicare-Provider-Charge-Data/Physician-and-Other-Supplier2012.html)

From the above dataset, I calculated the average cost of Cardio Vascular Stress test of various states in United States which is provided in medicare.tsv file that is attached.

1.Breaking the rule of thumb: Here the average cost of cardio vascular stress test is represented in the heatmap as shown. As you can see from the map, the most important item i.e the state with the highest average cost of cardio vascular stress test is hard to determine just by looking at it. This is because, average cost of all the states are encoded with solid black color without making use of luminance channel. But it can be determined by hovering the mouse over each of the states to know the details which is quite time consuming.

heatmap1

2.Correcting by rule of thumb: The rule of thumb is corrected by using luminance channel to use appropriate luminance contrast to represent it for the most important attribute i.e the state with the least average cost is represented using lower luminance contrast and the state with the highest average cost is represented using higher luminance contrast which is as shown. Hence by looking at the graph, one can get to know which state has the highest average cost for cardio vascular stress test medical procedure.

heatmap2

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/>
<h1><center>Get it right in black and white</center></h1>
</body>
State Avg_cost
AK 595.6
AL 218.2018628
AR 279.7050494
AZ 210.4430042
CA 288.9489301
CO 195.5273187
CT 318.3605983
DC 363.6118682
DE 303.6697465
FL 240.8541788
GA 301.9954402
HI 253.7472268
IA 296.0029123
ID 292.1304275
IL 368.0148229
IN 378.2784382
KS 350.7362332
KY 276.4145294
LA 312.0823928
MA 326.5663291
MD 292.0061605
ME 259.623742
MI 221.530747
MN 448.7254874
MO 313.8283757
MS 333.2510005
MT 230.2018182
NC 335.2331251
ND 322.915
NE 215.301708
NH 305.0383333
NJ 338.1517574
NM 274.9541346
NV 313.3669512
NY 307.5386555
OH 297.2033183
OK 245.7546379
OR 243.8794445
PA 331.8219626
PR 111.6780463
RI 307.4808118
SC 285.9603768
SD 226.8589277
TN 261.3605194
TX 306.2716739
UT 212.7306912
VA 289.4799973
VI 334.6683238
VT 294.044
WA 276.016367
WI 760.0587295
WV 343.0405858
WY 797.5428458
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment