- Hung Do; CS725:Information Visualization; Spring 2016;
- Computer Science; Old Dominion University
Two comments from tableau:
- It is helpful to follow a tutorial about tableau. I found one from Lynda.com (ODU students can access at no cost).
- There is no coding involved in Tableau but there are a lot of functions to visualize data.
Three comments from D3:
- In D3, we can declare format variables at the beginning to help coding easily.
- We can use SVG to draw many beautiful shapes.
- ".attr" in D3 helps alot when decorating a graph.
- Q: What insight does it provide?
- A: We can see and compare passing yards of each player in different conference (group by color)
- Q: What insight does it provide?
- A: We can discover some interesting information such as player with higher passing-attempt likely has higher passing-yards.
- Q: What insight does it provide?
- A: There is a relation between rate and passing-yards. Players above the trend line are considering better as they have high rate and high passing-yards.
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js">
</script>
<style type="text/css">
div.bar {
display: inline-block;
width: 30px;
height: 127px; /* Gets overriden by D3-assigned height below */
margin-right: 3px;
background-color: red;
}
svg .pumpkin {
fill: yellow;
stroke: orange;
stroke-width: 5;
}
</style>
</head>
<body>
<script type="text/javascript">
var margin = {top: 20, right: 20, bottom: 30, left: 40},
w = 960 - margin.left - margin.right,
h = 500 - margin.top - margin.bottom;
var barPadding = 2; // <-- New!
var ratio = 10;
var titlePadding = 30;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height",h + titlePadding * 2);
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);}) //Bar width of 20 plus 1 for padding
.attr("y", function(d) {return (h - d * ratio ) ;})
.attr("width", w / dataset.length - barPadding)
.attr("height", function (d) {return d * ratio ;})
.attr("fill", function(d) {
return "rgb(0, " + 200 + ", " + (d * 10) + ")";});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {return d;})
.attr("x", function(d, i) {return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;})
.attr("y", function(d) {return h - (d * ratio) + 15;})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white")
.attr("text-anchor", "middle");
//little more practice on text in D3 and svg
svg.append("text")
.attr("y",h + titlePadding )
.attr("x",w / 2)
.text("Barchar tutorial made by Hung Do")
.attr("font-size", "26px")
.attr("fill", "blue")
.attr("text-anchor", "middle");
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js