Skip to content

Instantly share code, notes, and snippets.

@niphadkarneha

niphadkarneha/.block

Last active April 9, 2019 00:54
Show Gist options
  • Save niphadkarneha/f111e788f7c480dc3ffc91076d9449d8 to your computer and use it in GitHub Desktop.
Save niphadkarneha/f111e788f7c480dc3ffc91076d9449d8 to your computer and use it in GitHub Desktop.
Download ZIP
HW4 Line Chart
Raw
.block
license: mit
Raw
README.md

Built with blockbuilder.org

Line Chart Explanation

  • The mark is a line and the channels are vertical and horizontal spatial positions. The vertical position is a quantitative attribute and it is mapped to the total amount all countries donated over a period of time. The horizontal position is also a quantitative attribute and it is mapped to the year all donor countries made a donation.
  • The line chart shows the total amount donated by all countries in a given year. The vertical axis shows the total amount donated by all countries and the horizontal axis shows the year the amount was donated
  • From the line chart, I observed that from 1991 to 1994, there seems to be lowest point of donation with the exception of two spikes that happened in 1995 and 1998
  • From 2003 to 2006, there is an increase in donation

References

https://bl.ocks.org/mbostock/3883245
https://github.com/d3/d3-time-format

forked from UdochukwuNweke's block: HW4 Line Chart

Raw
data.tsv
date totalAmt
1991 141173.0
1992 505172.0
1994 1055046.52
1995 92062218.48
1996 20512.6
1997 243411.0
1998 54559239.6
1999 2912343.4
2000 9870772.600000001
2001 2541808.2099999995
2002 11115981.76
2003 1699686.709
2004 11030473.690000001
2005 16945975.596
2006 52704111.191999994
2007 59264074.05599999
2008 25963203.454709
2009 95352748.01800004
2010 146849403.279847
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>A4</title>
</head>
<body>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 100},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%Y");
var x = d3.scaleTime()
.rangeRound([0, width]);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var line = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.totalAmt); });
d3.tsv("data.tsv", function(d) {
d.date = parseTime(d.date);
d.totalAmt = +d.totalAmt;
return d;
}, function(error, data) {
if (error) throw error;
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.totalAmt; }));
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.select(".domain")
.remove();
//y-axis
g.append("g")
.call(d3.axisLeft(y))
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Total commitment amt USD constant ($)");
svg.append("line")
.attr("x1", x(1996)) //<<== change your code here
.attr("y1", 0)
.attr("x2", x(1996)) //<<== and here
.attr("y2", height - margin.top - margin.bottom)
.style("stroke-width", 2)
.style("stroke", "red")
.style("fill", "none");
g.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
//x-axis
g.append("g")
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(0)")
.attr("y", height-20)
.attr("x", width/2)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Year");
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment