meetup_d3_2015/02_lines.html at master · blehman/meetup_d3_2015

Repository navigation

History

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<!DOCTYPE html>

<head>

<style>

@import url(css/style.css);

#graph{

width: 900px;

margin: 0px;

padding: 0px;

float: left;

}

</style>

</head>

<body>

<h1>Load Lines</h1>

<li><a href="01_graph.html">previous</a></li>

</ul></nav>

</div>

var margin = {top: 20, right: 50, bottom: 20, left:50},

width = 800 - margin.left - margin.right,

height = 400 - margin.top - margin.bottom;

function draw_timeseries(data){

var nodes = d3.keys(data[0]).filter(function(x) { return x !== "index"; });

var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

var load_json = nodes.map(function(name) {

return {

"name": name,

"values": data.map(function(d) { return { "x": parseDate(d.index), "y": +d[name] }; })

};

});

var values = _.pluck(load_json, 'values');

values = _.flatten(values);

var xvals = _.pluck(values, 'x');

var yvals = _.pluck(values, 'y');

var x_scale = d3.time.scale()

.domain(d3.extent(xvals))

.range([0, width]);

var y_scale = d3.scale.linear()

.domain(d3.extent(yvals))

.range([height, 0]);

var svg_ts = d3.select("#graph").append("svg")

.attr("width", width*2 + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var line = d3.svg.line()

.x(function(d) { return x_scale(d.x); })

.y(function(d) { return y_scale(d.y); })

.interpolate("cardinal");

var xAxis = d3.svg.axis()

.scale(x_scale)

.orient("bottom");

var yAxis = d3.svg.axis()

.scale(y_scale)

.orient("left");

svg_ts.append("g")

.attr("class", "y axis")

.call(yAxis);

svg_ts.append("g")

.attr("class", "x axis")

.attr("transform", "translate(0," + height + ")").call(xAxis);

svg_ts.selectAll("path")

.data(load_json)

.enter()

.append("path")

.attr("class", "regular_line")

.attr("d", function(d) { return line(d.values) });

}

d3.csv("data/example_load.csv", function(data) {

draw_timeseries(data);

});

</script>

</body>

</html>

FilesExpand file tree

02_lines.html

Latest commit

History

02_lines.html

File metadata and controls