Skip to content

Instantly share code, notes, and snippets.

/.block

Created November 8, 2017 02:37
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 anonymous/a05e15339f7792f175d2bcebccf6bbed to your computer and use it in GitHub Desktop.
Save anonymous/a05e15339f7792f175d2bcebccf6bbed to your computer and use it in GitHub Desktop.
Download ZIP
Hourly Data Line Chart
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margins = { top: 10, left: 20, right: 0, bottom: 0, between: 50 };
var width = 300, height = 100;
var svg = d3.select('body')
.append('svg')
.attr('width', width+margins.left)
.attr('height', height+100+margins.top);
var xScale = d3.time.scale().range([0,width]);
var yScale = d3.scale.linear().range([height,0]);
var xAxis = d3.svg.axis().scale(xScale).orient('bottom');
var yAxis = d3.svg.axis().scale(yScale).orient('left');
var graphLine = d3.svg.line()
.x(function(d) {return xScale(d.date); })
.y(function(d) {return yScale(d.y_value); });
var parseTime = d3.time.format("%H:%M").parse;
var url = "my_data.csv";
d3.csv(url, function (error, rawData) {
var data = rawData.map(function (d) {
return { y_value: +d.value, date: parseTime(d.time)}
});
xScale.domain(d3.extent(data, function(d) {return d.date}));
yScale.domain([514,530]).nice().ticks(3);
svg.append('path')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
.datum(data)
.attr('class', 'line')
.attr('d', graphLine);
var yAxisNodes = svg.append('g')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
.call(yAxis);
styleAxisNodes(yAxisNodes,1);
styleLines(svg);
});
function styleLines(svg) {
svg.selectAll('path.line')
.attr({
fill: 'none',
'stroke-width': 1.5,
stroke: '#77b4c9',
'clip-path': 'url(#clip)'
});
}
function styleAxisNodes(axisNodes, strokeWidth) {
axisNodes.selectAll('.domain')
.attr({
fill: 'none',
'stroke-width': strokeWidth,
stroke: 'black'
});
axisNodes.selectAll('.tick line')
.attr({
fill: 'none',
'stroke-width': 1,
stroke: 'black'
});
axisNodes.selectAll('text')
.attr('fill','black')
.attr('font-family','Play');
}
</script>
</body>
Raw
my_data.csv
time value
09:00 527.19
09:05 526.61
09:10 524.7
09:15 524.45
09:20 524.02
09:25 24.4
09:30 525.06
09:35 523.85
09:40 523.02
09:45 523.12
09:50 522.81
09:55 522.26
10:00 521.44
10:05 521.26
10:10 522.1
10:15 522.06
10:20 522.68
10:25 522.41
10:30 521.84
10:35 522.25
10:40 522.41
10:45 522.31
10:50 522.08
10:55 521.46
11:00 520.81
11:05 520.53
11:10 519.94
11:15 519.81
11:20 519.83
11:25 519.60
11:30 519.39
11:35 519.75
11:40 519.51
11:45 519.60
11:50 519.53
11:55 520.06
12:00 520.3
12:05 520.05
12:10 519.73
12:15 519.35
12:20 518.98
12:25 518.05
12:30 517.63
12:35 516.42
12:40 516.0
12:45 515.45
12:50 516.57
12:55 517
13:00 517.13
13:05 516.62
13:10 516.66
13:15 516.70
13:20 516.73
13:25 517.48
13:30 517.55
13:35 517.12
13:40 518.40
13:45 517.84
13:50 517.43
13:55 517.43
14:00 517.43
14:05 517.95
14:10 518.12
14:15 518.18
14:20 518.64
14:25 518.08
14:30 518.60
14:35 519.16
14:40 519.2
14:45 519.27
14:50 518.88
14:55 519.08
15:00 518.94
15:05 518.69
15:10 518.58
15:15 518.45
15:20 517.7
15:25 517.72
15:30 518.21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment