Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 4, 2015 09:13
Show Gist options
  • Save anonymous/ccc8327a9a1745d79225 to your computer and use it in GitHub Desktop.
Save anonymous/ccc8327a9a1745d79225 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/tehaxo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
var h = 350;
var w = 400;
var lineFun = d3.svg.line()
.x(function(d) { return d.month*3; })
.y(function(d) { return h-d.sales; })
.interpolate("basis");
var monthlySales = [
{"month": 10, "sales": 100},
{"month": 20, "sales": 130},
{"month": 30, "sales": 250},
{"month": 40, "sales": 300},
{"month": 50, "sales": 265},
{"month": 60, "sales": 225},
{"month": 70, "sales": 180},
{"month": 80, "sales": 120},
{"month": 90, "sales": 145},
{"month": 100, "sales": 130}
];
var svg = d3.select("body").append("svg").attr({width:w, height:h});
var viz = svg.append("path")
.attr({
d: lineFun(monthlySales),
"stroke": "purple",
"stroke-width": 2,
"fill": "none"
});
var labels = svg.selectAll("text")
.data(monthlySales)
.enter()
.append("text")
.text(function(d) { return d.sales; })
.attr({
x: function(d) { return d.month*3; },
y: function(d) { return h-d.sales; },
"font-size": "12px",
"font-family": "sans-serif",
"fill": "#666666",
"text-anchor": "start",
"dy": ".35em",
"font-weight": function(d, i) {
if (i===0 || i===(monthlySales.length-1)) {
return "bold";
} else {
return "normal";
}
}
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">var h = 350;
var w = 400;
var lineFun = d3.svg.line()
.x(function(d) { return d.month*3; })
.y(function(d) { return h-d.sales; })
.interpolate("basis");
var monthlySales = [
{"month": 10, "sales": 100},
{"month": 20, "sales": 130},
{"month": 30, "sales": 250},
{"month": 40, "sales": 300},
{"month": 50, "sales": 265},
{"month": 60, "sales": 225},
{"month": 70, "sales": 180},
{"month": 80, "sales": 120},
{"month": 90, "sales": 145},
{"month": 100, "sales": 130}
];
var svg = d3.select("body").append("svg").attr({width:w, height:h});
var viz = svg.append("path")
.attr({
d: lineFun(monthlySales),
"stroke": "purple",
"stroke-width": 2,
"fill": "none"
});
var labels = svg.selectAll("text")
.data(monthlySales)
.enter()
.append("text")
.text(function(d) { return d.sales; })
.attr({
x: function(d) { return d.month*3; },
y: function(d) { return h-d.sales; },
"font-size": "12px",
"font-family": "sans-serif",
"fill": "#666666",
"text-anchor": "start",
"dy": ".35em",
"font-weight": function(d, i) {
if (i===0 || i===(monthlySales.length-1)) {
return "bold";
} else {
return "normal";
}
}
});</script></body>
</html>
Raw
jsbin.tehaxo.js
var h = 350;
var w = 400;
var lineFun = d3.svg.line()
.x(function(d) { return d.month*3; })
.y(function(d) { return h-d.sales; })
.interpolate("basis");
var monthlySales = [
{"month": 10, "sales": 100},
{"month": 20, "sales": 130},
{"month": 30, "sales": 250},
{"month": 40, "sales": 300},
{"month": 50, "sales": 265},
{"month": 60, "sales": 225},
{"month": 70, "sales": 180},
{"month": 80, "sales": 120},
{"month": 90, "sales": 145},
{"month": 100, "sales": 130}
];
var svg = d3.select("body").append("svg").attr({width:w, height:h});
var viz = svg.append("path")
.attr({
d: lineFun(monthlySales),
"stroke": "purple",
"stroke-width": 2,
"fill": "none"
});
var labels = svg.selectAll("text")
.data(monthlySales)
.enter()
.append("text")
.text(function(d) { return d.sales; })
.attr({
x: function(d) { return d.month*3; },
y: function(d) { return h-d.sales; },
"font-size": "12px",
"font-family": "sans-serif",
"fill": "#666666",
"text-anchor": "start",
"dy": ".35em",
"font-weight": function(d, i) {
if (i===0 || i===(monthlySales.length-1)) {
return "bold";
} else {
return "normal";
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment