Skip to content

Instantly share code, notes, and snippets.

@nlinc1905

nlinc1905/index.html

Created January 6, 2015 04:52
Show Gist options
  • Save nlinc1905/515868b3752b46aae53f to your computer and use it in GitHub Desktop.
Save nlinc1905/515868b3752b46aae53f to your computer and use it in GitHub Desktop.
Download ZIP
Apple Inc. Stock Price and Cash Flow over 10 Years
Raw
index.html
<html>
<head>
<style>
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 4px;
background: #2F4F4F;
color: #C2C2C2;
border-radius: 2px;
}
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: #2F4F4F;
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
.axis line,
.axis path {
fill: none;
stroke: #A9A9A9;
stroke-width: 2px;
shape-rendering: crispEdges;
}
.bar {
fill: #A9A9A9;
}
.bar:hover {
fill: #2F4F4F;
}
.title {
font-size: 20px;
}
.x {
font-size: 12px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
</head>
<body>
<script>
var dataset = [
{
"Year":2003,
"Quarter":"Q1",
"OperatingCashFlow":3410,
"Revenue":1475,
"Operating Income":4,
"QEndDate":"3/31/2003",
"StockClose":14.14
},
{
"Year":2003,
"Quarter":"Q2",
"OperatingCashFlow":3507,
"Revenue":1545,
"Operating Income":9,
"QEndDate":"6/30/2003",
"StockClose":19.06
},
{
"Year":2003,
"Quarter":"Q3",
"OperatingCashFlow":3396,
"Revenue":1715,
"Operating Income":31,
"QEndDate":"9/30/2003",
"StockClose":20.72
},
{
"Year":2003,
"Quarter":"Q4",
"OperatingCashFlow":3724,
"Revenue":2006,
"Operating Income":74,
"QEndDate":"12/31/2003",
"StockClose":21.37
},
{
"Year":2004,
"Quarter":"Q1",
"OperatingCashFlow":3158,
"Revenue":1909,
"Operating Income":52,
"QEndDate":"3/31/2004",
"StockClose":27.04
},
{
"Year":2004,
"Quarter":"Q2",
"OperatingCashFlow":3120,
"Revenue":2014,
"Operating Income":72,
"QEndDate":"6/30/2004",
"StockClose":32.54
},
{
"Year":2004,
"Quarter":"Q3",
"OperatingCashFlow":2969,
"Revenue":2350,
"Operating Income":128,
"QEndDate":"9/30/2004",
"StockClose":38.75
},
{
"Year":2004,
"Quarter":"Q4",
"OperatingCashFlow":2475,
"Revenue":3490,
"Operating Income":403,
"QEndDate":"12/31/2004",
"StockClose":64.4
},
{
"Year":2005,
"Quarter":"Q1",
"OperatingCashFlow":2254,
"Revenue":3243,
"Operating Income":402,
"QEndDate":"3/31/2005",
"StockClose":41.67
},
{
"Year":2005,
"Quarter":"Q2",
"OperatingCashFlow":3094,
"Revenue":3520,
"Operating Income":427,
"QEndDate":"6/30/2005",
"StockClose":36.81
},
{
"Year":2005,
"Quarter":"Q3",
"OperatingCashFlow":3491,
"Revenue":3678,
"Operating Income":418,
"QEndDate":"9/30/2005",
"StockClose":53.61
},
{
"Year":2005,
"Quarter":"Q4",
"OperatingCashFlow":4150,
"Revenue":5749,
"Operating Income":750,
"QEndDate":"12/30/2005",
"StockClose":71.89
},
{
"Year":2006,
"Quarter":"Q1",
"OperatingCashFlow":6346,
"Revenue":4359,
"Operating Income":529,
"QEndDate":"3/31/2006",
"StockClose":62.72
},
{
"Year":2006,
"Quarter":"Q2",
"OperatingCashFlow":8013,
"Revenue":4370,
"Operating Income":566,
"QEndDate":"6/30/2006",
"StockClose":57.27
},
{
"Year":2006,
"Quarter":"Q3",
"OperatingCashFlow":6392,
"Revenue":4837,
"Operating Income":608,
"QEndDate":"9/29/2006",
"StockClose":76.98
},
{
"Year":2006,
"Quarter":"Q4",
"OperatingCashFlow":7159,
"Revenue":7115,
"Operating Income":1322,
"QEndDate":"12/29/2006",
"StockClose":84.84
},
{
"Year":2007,
"Quarter":"Q1",
"OperatingCashFlow":7095,
"Revenue":5264,
"Operating Income":986,
"QEndDate":"3/30/2007",
"StockClose":92.91
},
{
"Year":2007,
"Quarter":"Q2",
"OperatingCashFlow":7118,
"Revenue":5410,
"Operating Income":1041,
"QEndDate":"6/29/2007",
"StockClose":122.04
},
{
"Year":2007,
"Quarter":"Q3",
"OperatingCashFlow":9352,
"Revenue":6217,
"Operating Income":1060,
"QEndDate":"9/28/2007",
"StockClose":153.47
},
{
"Year":2007,
"Quarter":"Q4",
"OperatingCashFlow":9162,
"Revenue":9608,
"Operating Income":2126,
"QEndDate":"12/31/2007",
"StockClose":198.08
},
{
"Year":2008,
"Quarter":"Q1",
"OperatingCashFlow":9070,
"Revenue":7512,
"Operating Income":1315,
"QEndDate":"3/31/2008",
"StockClose":143.5
},
{
"Year":2008,
"Quarter":"Q2",
"OperatingCashFlow":9373,
"Revenue":7464,
"Operating Income":1392,
"QEndDate":"6/30/2008",
"StockClose":167.44
},
{
"Year":2008,
"Quarter":"Q3",
"OperatingCashFlow":11875,
"Revenue":7895,
"Operating Income":1442,
"QEndDate":"9/30/2008",
"StockClose":113.66
},
{
"Year":2008,
"Quarter":"Q4",
"OperatingCashFlow":7236,
"Revenue":10167,
"Operating Income":2126,
"QEndDate":"12/31/2008",
"StockClose":85.35
},
{
"Year":2009,
"Quarter":"Q1",
"OperatingCashFlow":4466,
"Revenue":8183,
"Operating Income":1667,
"QEndDate":"3/31/2009",
"StockClose":105.12
},
{
"Year":2009,
"Quarter":"Q2",
"OperatingCashFlow":5605,
"Revenue":8337,
"Operating Income":1672,
"QEndDate":"6/30/2009",
"StockClose":142.43
},
{
"Year":2009,
"Quarter":"Q3",
"OperatingCashFlow":5263,
"Revenue":16238,
"Operating Income":6275,
"QEndDate":"9/30/2009",
"StockClose":185.35
},
{
"Year":2009,
"Quarter":"Q4",
"OperatingCashFlow":7609,
"Revenue":15683,
"Operating Income":4725,
"QEndDate":"12/31/2009",
"StockClose":210.73
},
{
"Year":2010,
"Quarter":"Q1",
"OperatingCashFlow":10018,
"Revenue":13499,
"Operating Income":3979,
"QEndDate":"3/31/2010",
"StockClose":235
},
{
"Year":2010,
"Quarter":"Q2",
"OperatingCashFlow":9705,
"Revenue":15700,
"Operating Income":4234,
"QEndDate":"6/30/2010",
"StockClose":251.53
},
{
"Year":2010,
"Quarter":"Q3",
"OperatingCashFlow":11261,
"Revenue":20343,
"Operating Income":5447,
"QEndDate":"9/30/2010",
"StockClose":283.75
},
{
"Year":2010,
"Quarter":"Q4",
"OperatingCashFlow":10734,
"Revenue":26741,
"Operating Income":7827,
"QEndDate":"12/31/2010",
"StockClose":322.56
},
{
"Year":2011,
"Quarter":"Q1",
"OperatingCashFlow":15978,
"Revenue":24667,
"Operating Income":7874,
"QEndDate":"3/31/2011",
"StockClose":348.51
},
{
"Year":2011,
"Quarter":"Q2",
"OperatingCashFlow":12091,
"Revenue":28571,
"Operating Income":9379,
"QEndDate":"6/30/2011",
"StockClose":335.67
},
{
"Year":2011,
"Quarter":"Q3",
"OperatingCashFlow":9815,
"Revenue":28270,
"Operating Income":8710,
"QEndDate":"9/30/2011",
"StockClose":381.32
},
{
"Year":2011,
"Quarter":"Q4",
"OperatingCashFlow":10310,
"Revenue":46333,
"Operating Income":17340,
"QEndDate":"12/30/2011",
"StockClose":405
},
{
"Year":2012,
"Quarter":"Q1",
"OperatingCashFlow":10121,
"Revenue":39186,
"Operating Income":15384,
"QEndDate":"3/30/2012",
"StockClose":599.55
},
{
"Year":2012,
"Quarter":"Q2",
"OperatingCashFlow":7945,
"Revenue":35023,
"Operating Income":11573,
"QEndDate":"6/29/2012",
"StockClose":584
},
{
"Year":2012,
"Quarter":"Q3",
"OperatingCashFlow":10746,
"Revenue":35966,
"Operating Income":10944,
"QEndDate":"9/28/2012",
"StockClose":667.1
},
{
"Year":2012,
"Quarter":"Q4",
"OperatingCashFlow":16154,
"Revenue":54512,
"Operating Income":17210,
"QEndDate":"12/31/2012",
"StockClose":532.17
},
{
"Year":2013,
"Quarter":"Q1",
"OperatingCashFlow":12053,
"Revenue":43603,
"Operating Income":12558,
"QEndDate":"3/28/2013",
"StockClose":442.66
},
{
"Year":2013,
"Quarter":"Q2",
"OperatingCashFlow":11248,
"Revenue":35323,
"Operating Income":9201,
"QEndDate":"6/28/2013",
"StockClose":396.53
}
];
/*----------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------*/
var margin = {top: 80, right: 60, bottom: 80, left: 60},
width = 1000 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
//Create format currency function to format the axes and points
var formatCurrency = d3.format("$,.0f");
//Add a quarter-year property to each object in the dataset
for (var i in dataset) {
dataset[i].QYear = dataset[i].Quarter + " " + dataset[i].Year;
}
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 + ")");
var x = d3.scale.ordinal()
.domain(dataset.map(function(d) { return d.QYear; }))
.rangeRoundBands([0, width], .04);
var y = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d.OperatingCashFlow; })])
.range([height, 0]);
var yRight = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d.StockClose; })])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickFormat(function(d) {return formatCurrency(d); })
.orient("left");
var yAxisRight = d3.svg.axis()
.scale(yRight)
.tickFormat(function(d) {return formatCurrency(d); })
.orient("right");
//Draw the x axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
//Rotate the text labels
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(90)")
.style("text-anchor", "start");
//Draw the y axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
//Draw the y axis for the right side
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ", 0)")
.call(yAxisRight);
//Create Title
svg.append("text")
.attr("class", "title")
.attr("x", width / 2 )
.attr("y", -20)
.style("text-anchor", "middle")
.text("Apple Inc. Financial Trends - Operating Cash Flow VS Stock Price");
//Create the y axis label
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "start")
.attr("y", -20)
.attr("dy", ".75em")
.attr("transform", "rotate(90)")
.text("Operating Cash Flow (millions)");
//Create the right y axis label
svg.append("text")
.attr("class", "y right label")
.attr("text-anchor", "end")
.attr("y", width - 20)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text("Stock Price");
//Create the x axis label
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width / 2)
.attr("y", height + margin.bottom )
.text("Fiscal Quarter");
//Create the tool tips for the bars
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Operating Cash Flow<br/></strong> <span style='color:#FFFFFF'>" + formatCurrency(d.OperatingCashFlow) + ",000,000" + "</span>";
});
svg.call(tip);
//Draw the bar graph
svg.selectAll(".bar")
.data(dataset)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.QYear); })
.attr("y", function(d) { return y(d.OperatingCashFlow); })
.attr("height", function(d) { return height - y(d.OperatingCashFlow); })
.attr("width", x.rangeBand())
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
//Draw the line graph
var line = d3.svg.line()
.x(function(d) { return x(d.QYear); })
.y(function(d) { return yRight(d.StockClose); })
svg.append("path")
.attr("d", line(dataset))
.attr("class", "linePath")
.attr("fill", "none")
.attr("stroke", "#FF0000")
.attr("stroke-width", 4);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment