Skip to content

Instantly share code, notes, and snippets.

@basilesimon

basilesimon/index.html

Created May 21, 2014 17:28
Show Gist options
  • Save basilesimon/07981257cd711006a235 to your computer and use it in GitHub Desktop.
Save basilesimon/07981257cd711006a235 to your computer and use it in GitHub Desktop.
Download ZIP
Line chart with d3.js step 1
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Business quote demo</title>
<meta charset="utf-8">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="d3.js" charset="utf-8"></script>
<style>
body {
font: 12px sans-serif;
background-color: #fafafa;
padding: 0;
margin: 0;
color: #353535;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
svg {
float: left;
margin-left: 10px;
}
#info {
float: right;
width: 40%;
background-color: inherit;
height: 100vh;
}
header {
display: block;
background-color: #cd0102;
width: 100%;
height: 50px;
}
header img {
padding: 5px;
}
h1 {
margin-bottom: -20px;
}
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
#loading {
float: left;
padding-left: 10em;
padding-top: 10em;
position: absolute;
}
</style>
</head>
<body>
<script>
var myQuery = "http://query.yahooapis.com/v1/public/yql?q=select * from yahoo.finance.historicaldata where symbol in (\"AAPL\") and startDate = \"2013-01-01\" and endDate = \"2014-01-01\"&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json";
var data = $.getJSON(myQuery, draw);
var margin = 50,
width = 700,
height = 600;
var format = d3.time.format("%Y-%m-%d");
function draw(data) {
data.query.results.quote.forEach(function(d) {
d.date = format.parse(d.Date);
d.Close = +d.Close;
});
data.query.results.quote.sort(function(a,b) {
return d3.ascending(a.date, b.date);
});
var line = d3.svg.line()
.x(function(d){ return x_scale(d.date); })
.y(function(d){ return y_scale(d.Close); })
.interpolate("linear");
/* Extents */
var x_extent = d3.extent(data.query.results.quote.map(function(d) { return d.date; }));
var y_extent = d3.extent(data.query.results.quote.map(function(d) { return +d.Close; }));
/* Scales */
var y_scale = d3.scale.linear()
.domain(y_extent)
.range([height-margin,margin]);
var x_scale = d3.time.scale()
.domain(x_extent)
.range([margin, width-margin]);
/* Axis */
var x_axis = d3.svg.axis()
.scale(x_scale);
var y_axis = d3.svg.axis()
.scale(y_scale).orient('left');
/*Contain the viz in a SVG element, width/height already defined*/
var vis = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
d3.select("svg")
.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height-margin) + ")")
.call(x_axis);
d3.select("svg")
.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + margin + ", 0 )")
.call(y_axis);
var path = vis.append("path")
.datum(data.query.results.quote)
.style("fill", "none")
.attr("class", "line")
.attr("d", line);
//Adding transition to the line drawing
var totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
d3.select(".y.axis")
.append("text")
.text("lol much text")
.attr("transform", "rotate (-90, -43, 0) translate(-280)");
d3.select(".x.axis")
.append("text")
.text("such axis")
.attr("x", function(){return (width / 2) - margin;})
.attr("y", margin/1.5);
} /*ends function draw*/
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment