Skip to content

Instantly share code, notes, and snippets.

@knwin

knwin/index.html

Last active October 6, 2015 08:41
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 knwin/c241add883ea60c4bb68 to your computer and use it in GitHub Desktop.
Save knwin/c241add883ea60c4bb68 to your computer and use it in GitHub Desktop.
Download ZIP
Top Ten donors
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<h>Top Ten Donor to the humanitarian emergencies in Pakistan - 2015</h>
<p> unit - million dollor </p>
<script type="text/javascript">
// Your beautiful D3 code will go here
var dataset = [95.74, 77.84, 29.22, 20.55, 19.13, 18.87, 12.71, 11.76, 9.52, 8.23];
var w = 500;
var h = 500;
var barPadding = 2;
//create SVG element
var svg=d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({// multivalue mapping technique
fill: "blue",
x: 0,
y: function(d,i){return i * h/dataset.length;},
width: function(d,i){return d * 5},
height: function(d){return h/dataset.length - barPadding;}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment