Last active
June 18, 2017 09:20
-
-
Save nanu146/9aa87e6b0100f2ee8f3fa6aec2d146c9 to your computer and use it in GitHub Desktop.
Impact Analysis Area graph
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: gpl-3.0 | |
height: 700 | |
border: no |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
} | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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