Skip to content

Instantly share code, notes, and snippets.

@abhishekpolavarapu

abhishekpolavarapu/README.md

Last active February 3, 2016 01:15
Show Gist options
  • Save abhishekpolavarapu/8d91b9f00d33746e8a63 to your computer and use it in GitHub Desktop.
Save abhishekpolavarapu/8d91b9f00d33746e8a63 to your computer and use it in GitHub Desktop.
Download ZIP
Visualization Implementation (VI2)
Raw
README.md

Abhishek Polavarapu

1.This bar chart gives the information regarding the passsing yards per player and each conference is assigned a colour.

R image R image

2. 
This Scatter plot gives the information regarding Passing touchdowns vs Russing Touchdowns for different conferences.

R image

3.
This chart gives the total number of touchdowns for each conference and the size of the circle varies with the total number of touchdowns.

R image

4.
   List of things learnt from tableau
   a. The software can automatically divide the given dataset into dimensions and measures.
   b. Unlike R there is no need to write much code in the tableau which makes it easier to use.
5. 
   3 things that I learnt from D3 are
   a. D3 in javascript is like bootstrap in CSS
   b. By using D3 we can make things to scale dynamically.
   c. The elements created in using D3 can be customized using CSS.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var w = 500;
var h = 100;
var barPadding = 1;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) { return i * (w / dataset.length);})
.attr("y", function(d) {return h - (d * 4); })
.attr("width", w / dataset.length- barPadding)
.attr("height", function(d) { return d * 4; })
.attr("fill", function(d) {return "rgb(0, 0, " + (d * 10) + ")";});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2; })
.attr("y", function(d) {return h - (d * 4) + 14;})
.attr("font-family", "timesnewroman")
.attr("font-size", "14px")
.attr("fill", "white");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment