Skip to content

Instantly share code, notes, and snippets.

@jtr13

jtr13/.block

Last active December 11, 2019 19:14
Show Gist options
  • Save jtr13/183ec1932952d13f651b6b8f74edf6fe to your computer and use it in GitHub Desktop.
Save jtr13/183ec1932952d13f651b6b8f74edf6fe to your computer and use it in GitHub Desktop.
Download ZIP
Line chart
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Line chart</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style type ="text/css">
.line {
fill: none;
stroke: red;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<svg width="600" height="400"></svg>
<script>
var svg = d3.select("svg")
var margin = {top: 20, right: 50, bottom: 30, left: 50}
var width = +svg.attr("width") - margin.left - margin.right
var height = +svg.attr("height") - margin.top - margin.bottom
var plotgroup = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`);
var parseTime = d3.timeParse("%d-%b-%y");
var xScale = d3.scaleTime().range([0, width]);
var yScale = d3.scaleLinear()
.domain([20, 80])
.range([height, 0]);
var line = d3.line()
.x(d => xScale(d.date))
.y(d => yScale(d.high));
var data =
[{"date":"1-Apr-18","high":60},
{"date":"2-Apr-18","high":43},
{"date":"3-Apr-18","high":43},
{"date":"4-Apr-18","high":56},
{"date":"5-Apr-18","high":45},
{"date":"6-Apr-18","high":62},
{"date":"7-Apr-18","high":49}];
data.forEach(function(d) {
d.date = parseTime(d.date);
});
xScale
.domain(d3.extent(data, d => d.date));
plotgroup.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(xScale).ticks(7));
plotgroup.append("g")
.call(d3.axisLeft(yScale))
plotgroup.append("path")
.datum(data)
.attr("class", "line")
.attr("fill", "none")
.attr("d", line);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment