Skip to content

Instantly share code, notes, and snippets.

@davbre

davbre/index.html

Created May 29, 2015 12:51
Show Gist options
  • Save davbre/30b47be41d065a34feaf to your computer and use it in GitHub Desktop.
Save davbre/30b47be41d065a34feaf to your computer and use it in GitHub Desktop.
Download ZIP
d3 - line chart // source http://jsbin.com/zazosa
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<title>d3 - line chart</title>
</head>
<body>
<script id="jsbin-javascript">
var h = 350;
var w = 400;
var padding=5;
monthlySales = [
{"month":10, "sales": 100},
{"month":20, "sales": 130},
{"month":30, "sales": 250},
{"month":40, "sales": 300},
{"month":50, "sales": 20},
{"month":60, "sales": 20},
{"month":70, "sales": 20},
{"month":80, "sales": 130}
];
var lineFunc = d3.svg.line()
.x(function(d) { return d.month*3; })
.y(function(d) { return h-d.sales;})
.interpolate("linear");
var svg1 =
d3.select("body").append("svg").attr({
width: w, height: h
});
var viz = svg1.append("path")
.attr({
d: lineFunc(monthlySales),
"stroke": "purple",
"stroke-width": 2,
"fill": "none"
});
// add labels
var labels = svg1.selectAll("text")
.data(monthlySales)
.enter()
.append("text")
.text(function(d){ return d.sales; })
.attr({
x: function(d) { return d.month*3-padding;},
y: function(d) { return h-d.sales;},
"font-size": "12px",
"font-family": "sans-serif",
"fill": "#666666",
"text-anchor": "start",
"dy": ".35em", /* line size ? */
"font-weight": function(d,i) {
if (i===0 || i===(monthlySales.length-1)) {
return "bold";
} else {
return "italic";
}
}
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">var h = 350;
var w = 400;
var padding=5;
monthlySales = [
{"month":10, "sales": 100},
{"month":20, "sales": 130},
{"month":30, "sales": 250},
{"month":40, "sales": 300},
{"month":50, "sales": 20},
{"month":60, "sales": 20},
{"month":70, "sales": 20},
{"month":80, "sales": 130}
];
var lineFunc = d3.svg.line()
.x(function(d) { return d.month*3; })
.y(function(d) { return h-d.sales;})
.interpolate("linear");
var svg1 =
d3.select("body").append("svg").attr({
width: w, height: h
});
var viz = svg1.append("path")
.attr({
d: lineFunc(monthlySales),
"stroke": "purple",
"stroke-width": 2,
"fill": "none"
});
// add labels
var labels = svg1.selectAll("text")
.data(monthlySales)
.enter()
.append("text")
.text(function(d){ return d.sales; })
.attr({
x: function(d) { return d.month*3-padding;},
y: function(d) { return h-d.sales;},
"font-size": "12px",
"font-family": "sans-serif",
"fill": "#666666",
"text-anchor": "start",
"dy": ".35em", /* line size ? */
"font-weight": function(d,i) {
if (i===0 || i===(monthlySales.length-1)) {
return "bold";
} else {
return "italic";
}
}
});</script></body>
</html>
Raw
jsbin.zazosa.js
var h = 350;
var w = 400;
var padding=5;
monthlySales = [
{"month":10, "sales": 100},
{"month":20, "sales": 130},
{"month":30, "sales": 250},
{"month":40, "sales": 300},
{"month":50, "sales": 20},
{"month":60, "sales": 20},
{"month":70, "sales": 20},
{"month":80, "sales": 130}
];
var lineFunc = d3.svg.line()
.x(function(d) { return d.month*3; })
.y(function(d) { return h-d.sales;})
.interpolate("linear");
var svg1 =
d3.select("body").append("svg").attr({
width: w, height: h
});
var viz = svg1.append("path")
.attr({
d: lineFunc(monthlySales),
"stroke": "purple",
"stroke-width": 2,
"fill": "none"
});
// add labels
var labels = svg1.selectAll("text")
.data(monthlySales)
.enter()
.append("text")
.text(function(d){ return d.sales; })
.attr({
x: function(d) { return d.month*3-padding;},
y: function(d) { return h-d.sales;},
"font-size": "12px",
"font-family": "sans-serif",
"fill": "#666666",
"text-anchor": "start",
"dy": ".35em", /* line size ? */
"font-weight": function(d,i) {
if (i===0 || i===(monthlySales.length-1)) {
return "bold";
} else {
return "italic";
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment