Skip to content

Commit

Permalink
added 200m growth
Browse files Browse the repository at this point in the history
  • Loading branch information
@loarie
loarie committed Jul 21, 2024
1 parent 1876bdf commit 868318c
Show file tree
Hide file tree
Showing 3 changed files with 466 additions and 0 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
273 changes: 273 additions & 0 deletions 200m/growth.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,273 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<style>

body {
font: 10px sans-serif;
fill: #AAAAAA;
}

.axis path,
.axis line {
fill: none;
stroke: #AAAAAA;
shape-rendering: crispEdges;
}


.axisline {
fill: none;
stroke: #AAAAAA;
stroke-width: .5px;
}


.line {
fill: none;
stroke: #76AB20;
stroke-width: 1.5px;
}

.area {
fill: #E4EED2;
}

.overlay {
fill: none;
pointer-events: all;
}

.focus circle {
fill: white;
stroke: #76AB20;
}

.focus text.rank {
fill: #e56b25;
font: 5px sans-serif;
}

.focus text.title {
font: 7px sans-serif;
font-weight: bold;
}

.focus text.obscount {
font: 7px sans-serif;
}

.focus .rect {
fill: white;
stroke: black;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var margin = {top: 5, right: 10, bottom: 20, left: 10},
width = 500 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;

var parseDate = d3.time.format("%d-%b-%y").parse,
bisectDate = d3.bisector(function(d) { return d.date; }).left,
formatValue = d3.format(",f"),
formatDate = d3.time.format("%b");

var x = d3.time.scale()
.range([0, width]);

var y = d3.scale.linear()
.range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.month_total); });

var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.month_total); });

var svg = d3.select("body").append("svg")
.attr("viewBox", "0 0 " + (width + margin.left + margin.right) + " " + (height + margin.top + margin.bottom))
.attr("preserveAspectRatio", "xMinYMin meet")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("growth_data.json", function(error, data) {

if (error) throw error;

data.forEach(function(d) {
d.date = new Date(d.month);
d.date.setDate(d.date.getDate() + 1);
});

data.sort(function(a, b) {
return a.date - b.date;
});
if(data.slice(-1)[0].month == "2020-09-01"){
data.pop(); //remove 'in progress' month
}

x.domain([data[0].date, data[data.length - 1].date]);
y.domain(d3.extent(data, function(d) { return d.month_total; }));

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

svg.append("text")
.attr("y", y(1000000)-10)
.attr("x", 0)
.attr("dy", ".71em")
.style("text-anchor", "start")
.text("1,000,000");
svg.append("text")
.attr("y", y(2000000)-10)
.attr("x", 0)
.attr("dy", ".71em")
.style("text-anchor", "start")
.text("2,000,000");
svg.append("text")
.attr("y", y(3000000)-10)
.attr("x", 0)
.attr("dy", ".71em")
.style("text-anchor", "start")
.text("3,000,000");
svg.append("text")
.attr("y", y(4000000)-10)
.attr("x", 0)
.attr("dy", ".71em")
.style("text-anchor", "start")
.text("4,000,000");
svg.append("text")
.attr("y", y(5000000)-10)
.attr("x", 0)
.attr("dy", ".71em")
.style("text-anchor", "start")
.text("5,000,000");
svg.append("text")
.attr("y", y(6000000)-10)
.attr("x", 0)
.attr("dy", ".71em")
.style("text-anchor", "start")
.text("6,000,000 observations per month");
svg.append("svg:line")
.attr("class", "axisline")
.style("stroke-dasharray", ("1, 1"))
.attr({ x1: 0, y1: y(1000000), x2: width, y2: y(1000000) });
svg.append("svg:line")
.attr("class", "axisline")
.style("stroke-dasharray", ("1, 1"))
.attr({ x1: 0, y1: y(2000000), x2: width, y2: y(2000000) });
svg.append("svg:line")
.attr("class", "axisline")
.style("stroke-dasharray", ("1, 1"))
.attr({ x1: 0, y1: y(3000000), x2: width, y2: y(3000000) });
svg.append("svg:line")
.attr("class", "axisline")
.style("stroke-dasharray", ("1, 1"))
.attr({ x1: 0, y1: y(4000000), x2: width, y2: y(4000000) });
svg.append("svg:line")
.attr("class", "axisline")
.style("stroke-dasharray", ("1, 1"))
.attr({ x1: 0, y1: y(5000000), x2: width, y2: y(5000000) });
svg.append("svg:line")
.attr("class", "axisline")
.style("stroke-dasharray", ("1, 1"))
.attr({ x1: 0, y1: y(6000000), x2: width, y2: y(6000000) });
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);

svg.append("path")
.data([data])
.attr("class", "area")
.attr("d", area);

maxy = d3.max(data, function(d) { return d.month_total; });
maxx = data.filter(function(d) { return d.month_total == maxy; })[0].date

var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");

focus.append("circle")
.attr("r", 4.5);

focus.append("rect")
.attr("class","rect")
.attr("x", 3)
.attr("y", 3)
.attr("width", 60)
.attr("height", 25);

focus.append("text")
.attr("class","title")
.attr("text-anchor", "left")
.attr("x",10)
.attr("y",10)
.attr("dy", ".35em");

focus.append("text")
.attr("class","obscount")
.attr("text-anchor", "left")
.attr("x",10)
.attr("y",18)
.attr("dy", ".35em");

svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);

function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.month_total) + ")");
var text_title = focus.select("text.title")
text_title.text(formatDate(d.date));

var text_obscount = focus.select("text.obscount")
text_obscount.text( formatValue(d.month_total) + " obs");
if(y(d.month_total)>125){
text_title.attr("y", (10-20) );
text_obscount.attr("y", (18-20) );
focus.select("rect.rect").attr("y", (3-20) );
}else{
text_title.attr("y", (10-0) );
text_obscount.attr("y", (18-0) );
focus.select("rect.rect").attr("y", (3-0) );
}

if(x(d.date)>width/2){
text_title.attr("x", (-50) );
text_obscount.attr("x", (-50) );
focus.select("rect.rect").attr("x", (-60) );
}else{
text_title.attr("x", (20) );
text_obscount.attr("x", (20) );
focus.select("rect.rect").attr("x", (10) );
}

}
});
});
</script>
Loading

0 comments on commit 868318c

Please sign in to comment.