Skip to content

Instantly share code, notes, and snippets.

@jrjames83
Forked from anonymous/index.html
Created November 28, 2015 00:01
Show Gist options
  • Save jrjames83/fd311cda624590c5602c to your computer and use it in GitHub Desktop.
Save jrjames83/fd311cda624590c5602c to your computer and use it in GitHub Desktop.
JS Bin [Line Charts with SVG and D3add your bin description] // source http://jsbin.com/mekeki
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Line Charts with SVG and D3add your bin description]">
<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">
// Line Chart
var h = 350;
var w = 500;
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":140},
{"month":100, "sales":133}
];
var lineFun = d3.svg.line()
.x(function(d) { return d.month*4;})
.y(function(d) { return h-d.sales;})
.interpolate("basis");
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*4-20;},
y: function(d) { return h-d.sales;},
"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">// Line Chart
var h = 350;
var w = 500;
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":140},
{"month":100, "sales":133}
];
var lineFun = d3.svg.line()
.x(function(d) { return d.month*4;})
.y(function(d) { return h-d.sales;})
.interpolate("basis");
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*4-20;},
y: function(d) { return h-d.sales;},
"font-weight": function(d,i) {
if (i === 0 || i ==(monthlySales.length - 1)) {
return "bold";
} else {
return "normal";
}
}
});
</script></body>
</html>
// Line Chart
var h = 350;
var w = 500;
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":140},
{"month":100, "sales":133}
];
var lineFun = d3.svg.line()
.x(function(d) { return d.month*4;})
.y(function(d) { return h-d.sales;})
.interpolate("basis");
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*4-20;},
y: function(d) { return h-d.sales;},
"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