Skip to content

Instantly share code, notes, and snippets.

@nanu146

nanu146/.block

Last active June 18, 2017 09:20
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 nanu146/9aa87e6b0100f2ee8f3fa6aec2d146c9 to your computer and use it in GitHub Desktop.
Save nanu146/9aa87e6b0100f2ee8f3fa6aec2d146c9 to your computer and use it in GitHub Desktop.
Download ZIP
Impact Analysis Area graph
Raw
.block
license: gpl-3.0
height: 700
border: no
Raw
core.js
function monthDiff(d1, d2) {
var months;
months = (d2.getFullYear() - d1.getFullYear()) * 12;
months -= d1.getMonth() + 1;
months += d2.getMonth();
return months <= 0 ? 0 : months;
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function datediff(d1, d2) {
var t2 = d2.getTime();
var t1 = d1.getTime();
return parseInt((t2-t1)/(24*3600*1000));
}
function GenRanDateData(startDate,endDate, min, max){
//console.log(startDate);
//console.log(endDate)
diff=datediff(startDate,endDate);
counter=Math.floor(diff/7);
arr=[];
sdt=new Date(startDate.getTime())
arr.push({"date": new Date(sdt.setDate(sdt.getDate())) , "close": getRandomInt(min,max)})
for(i=0;i<counter;i++){
arr.push({"date": new Date(sdt.setDate(sdt.getDate()+ 7)) , "close": getRandomInt(min,max)})
}
if(sdt-endDate>0){
arr.push({"date": new Date(endDate.getTime()) , "close": getRandomInt(min,max)})
}
return arr;
}
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", -5).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", -5).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script src="//d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="core.js"></script>
<script>
var data;
function getTextWidth(text, fontSize, fontName) {
c = document.createElement("canvas");
ctx = c.getContext("2d");
ctx.font = fontSize + ' ' + fontName;
return ctx.measureText(text).width;
}
window.onload=function()
{
var Dates;
pastDate= new Date()
pastDate.setDate(pastDate.getDate()-180);
presentDate=new Date();
data =GenRanDateData(pastDate,presentDate,1700000,3000000)
plot(data);
function plot(data)
{
var margin = {top: 50, right: 20, bottom: 80, left: 50},
width = 960 - margin.left - margin.right,
height = 630 - margin.top - margin.bottom;
var svg = d3.select("#plot").append("svg").attr("width",width + margin.left + margin.right).attr("height",height+ margin.top + margin.bottom);
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var formatValue = d3.format(".2s");
var x = d3.scaleTime()
.rangeRound([0, width]);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var area = d3.area()
.curve(d3.curveCardinal)
.x(function(d) { return x(d.date); })
.y1(function(d) { return y(d.close); });
//.y(function(d) { return y(d.close); });
// default bindings
var dat=data.filter(function(d){return true;})
dsEnddate=d3.max(dat, function(d) { return d.date; });
dsEnddate=new Date(dsEnddate.getTime());
//console.log(dsEnddate);
x.domain([d3.min(dat, function(d) { return d.date; }),dsEnddate.setDate(dsEnddate.getDate()+7*13)]);
y.domain([0, d3.max(dat, function(d) { return d.close; })]);
area.y0(y(0));
//console.log(x.domain())
g.append("path")
.data([dat])
.attr("fill", "grey")
// .attr("stroke", "dimgrey")
//.attr("stroke-width", "2px")
.attr("d", area);
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.call(d3.axisLeft(y).tickFormat(function(d) { return formatValue(d)}))
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Sales ($)");
g.append("g").append("line")/*.attr("stroke","#FF5656")*/.attr("stroke","red").attr("stroke-width","2px")
.attr("x1",x(d3.max(dat, function(d) { return d.date; })))
.attr("y1",0).attr("y2",height).attr("x2",x(d3.max(dat, function(d) { return d.date; })));
// Generating Prediction Data
mean =d3.mean(dat,function(c){ return +c.close;})
predData=GenRanDateData(new Date(d3.max(dat, function(d) { return d.date; })),new Date(dsEnddate.getTime()),mean*.95,mean*1.1); g.append("path")
.data([predData])
.attr("fill", "#2E4372")
// .attr("stroke", "#2E4372")
//.attr("stroke-width", "2px")
.attr("d", area);
planData=GenRanDateData(new Date(d3.max(dat, function(d) { return d.date; })),new Date(dsEnddate.getTime()),mean*.75,mean*.9);
g.append("path")
.data([planData])
.attr("fill", "#677CA9")
//.attr("stroke", "#677CA9")
//.attr("stroke-width", "2px")
.attr("d", area);
legendsDat=[{"value":"Past Data","color":"grey"},{"value":"Projected Data","color":"#2E4372"},{"value":"Achieved Data","color":"#677CA9"}];
var txtWidthHolder=0;
g.append("g").attr("id","legend").selectAll("rects").data(legendsDat).enter().append("g").each(function(d,i){
d3.select(this).append("rect").attr("y",height+30)
.attr("x",function(c){ return 205+ (i*(15+20)) +txtWidthHolder; })
.attr("width","20px")
.attr("height","20px")
.attr("fill",d.color);
d3.select(this).append("text")
.attr("x",function(c){return 205+ (i*(15+20)) +29 +txtWidthHolder;;})
.attr("y",function(c){ return height+45; })
.style("font-family","calibri")
.style("font-size","14px")
.style("font-weight","bold")
.text(d.value);
txtWidthHolder += getTextWidth(d.value,"16px","calibri");
});
}
}
</script>
</head>
<body>
<div style="width:960px;height:auto;margin-left:auto;margin-right:auto;">
<div id="plot">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment