Skip to content

Instantly share code, notes, and snippets.

@SpaceActuary

SpaceActuary/.block

Last active March 30, 2017 14:40
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 SpaceActuary/71c73a8f0073ddb100bca61709242951 to your computer and use it in GitHub Desktop.
Save SpaceActuary/71c73a8f0073ddb100bca61709242951 to your computer and use it in GitHub Desktop.
Download ZIP
pinto-gogol
Raw
.block
license: mit
Raw
data.csv
age fd_ldf ded_ldf
0 999999999 99999999
12 3.5 2.2
24 2.0 1.4
36 1.5 1.15
48 1.25 1.05
60 1.1 1.02
72 1.05 1.01
84 1.03 1.0
96 1.01 1.0
108 1.005 1.0
120 1.0 1.0
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:30;right:10;bottom:10;left:10; }
.ldf {
fill: none;
stroke-width: 2px;
}
.fd.ldf { stroke: crimson; }
.net.ldf { stroke: seagreen; }
.ded.ldf { stroke: steelblue; }
.ilf {
stroke-width: 0;
}
.fd.ilf { fill: crimson; }
.net.ilf { fill: seagreen; }
.ded.ilf { fill: steelblue; }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom
w = 500, h = 300;
var x = d3.scaleLinear().range([0, w]),
y = d3.scaleLinear().range([h, 0]);
var t = 2000;
var ilf = {"fd": 1.7, "ded": 1.0};
// define the line
var percentOfUltimate = function(layer, ilf){
if(layer=="net"){
return d3.line()
.x(function(d, i) { return x(d.age); })
.y(function(d, i) { return y(((1.7 / d.fd_ldf)-(1.0 / d.ded_ldf)) / ilf); });
} else if(layer=="zero"){
return d3.line()
.x(function(d, i) { return x(d.age); })
.y(function(d, i) { return y(0); });
} else {
return d3.line()
.x(function(d, i) { return x(d.age); })
.y(function(d, i) { return y(1 / d[layer + "_ldf"] * ilf); });
}
}
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(error, data) {
if (error) throw error;
// format the data
data.forEach(function(d) {
d.age = +d.age;
d.ldf = +d.ldf;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.age; }));
y.domain([0, Math.max(ilf["fd"], ilf["ded"])]);
y.domain([0, 2]);
// fd ldf
svg.append("path")
.data([data])
.attr("class", "fd ldf")
.attr("d", d3.line()
.x(function(d, i) { return x(d.age); })
.y(function(d, i) { return y(1 / d.fd_ldf * 1.0); })
)
.transition().delay(t).duration(t)
.attr("d", d3.line()
.x(function(d, i) { return x(d.age); })
.y(function(d, i) { return y(1 / d.fd_ldf * ilf.fd); })
)
.transition().delay(5 * t).duration(t)
.attr("d", d3.line()
.x(function(d, i) { return x(d.age); })
.y(function(d, i) { return y(1 / d.fd_ldf * 1.0); })
);
// ded ldf
svg.append("path")
.data([data])
.attr("class", "ded ldf")
.attr("d", d3.line()
.x(function(d, i) { return x(d.age); })
.y(function(d, i) { return y(1 / d.ded_ldf * 1.0); })
)
.transition().delay(t).duration(t)
.attr("d", d3.line()
.x(function(d, i) { return x(d.age); })
.y(function(d, i) { return y(1 / d.ded_ldf * ilf.ded); })
)
.transition().delay(5 * t).duration(t)
.attr("d", d3.line()
.x(function(d, i) { return x(d.age); })
.y(function(d, i) { return y(1 / d.ded_ldf * 1.0); })
);
// net ldf
svg.append("path")
.data([data])
.attr("class", "net ldf")
.style("opacity", 0.0)
.attr("d", d3.line()
.x(function(d, i) { return x(d.age); })
.y(function(d) {
return y(((ilf.fd / d.fd_ldf) - (ilf.ded / d.ded_ldf)));
})
)
.transition().delay(5 * t).duration(t)
.style("opacity", 1.0)
.attr("d", d3.line()
.x(function(d) { return x(d.age); })
.y(function(d) {
return y(((ilf.fd / d.fd_ldf) - (ilf.ded / d.ded_ldf)));
})
)
.transition().delay(t).duration(t)
.attr("d", d3.line()
.x(function(d) { return x(d.age); })
.y(function(d) {
return y(((ilf.fd / d.fd_ldf) - (ilf.ded / d.ded_ldf)) /
(ilf.fd - ilf.ded)); })
);
// net area
svg.append("path")
.data([data])
.attr("class", "net ilf")
.style("opacity", 0.0)
.attr("d", d3.area()
.x(function(d) { return x(d.age); })
.y0(function(d, i) { return y(1 / d.ded_ldf * ilf.ded); })
.y1(function(d, i) { return y(1 / d.fd_ldf * ilf.fd); })
)
.transition().delay(2 * t).duration(t)
.style("opacity",0.5)
.transition().delay(t).duration(t)
.attr("d", d3.area()
.x(function(d) { return x(d.age); })
.y0(h)
.y1(function(d) { return y(((ilf.fd / d.fd_ldf) -
(ilf.ded / d.ded_ldf)) /
(1.0)); })
)
.transition().delay(1 * t).duration(t)
.style("opacity",0.0)
// Add the X Axis
svg.append("g").attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(d3.axisBottom(x).tickValues(data.map(function(d){ return d.age; })));
// Add the Y Axis
svg.append("g").attr("class", "y axis")
.call(d3.axisLeft(y));
svg.append("rect")
.attr("width", 80)
.attr("height", h - y(ilf.ded))
.attr("x", 600)
.attr("y", y(ilf.ded))
.attr("class", "ded ilf")
svg.append("rect")
.attr("width", 80)
.attr("height", h - y(ilf.fd))
.attr("x", 680)
.attr("y", y(ilf.fd))
.attr("class", "fd ilf")
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment