Skip to content

Instantly share code, notes, and snippets.

@skimlik

skimlik/.block

Last active January 9, 2019 10:09
Show Gist options
  • Save skimlik/da7c3dd2e4affa1d6884c02e5463a194 to your computer and use it in GitHub Desktop.
Save skimlik/da7c3dd2e4affa1d6884c02e5463a194 to your computer and use it in GitHub Desktop.
Download ZIP
Line Chart Simple
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.y-axis path {
stroke: gray;
stroke-width: 1.5px;
}
.x-axis path {
stroke: gray;
stroke-width: 1.5px;
}
.tick line {
opacity: 0.2;
stroke: #9b9999;
}
.tick text {
font-size: 9pt;
}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var width = 960;
var height = 500;
var margin = {
top: 30,
right: 30,
bottom: 30,
left: 30
}
var clientWidth = width - (margin.left + margin.right);
var clientHeight = height - (margin.top + margin.bottom);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
var xScale = d3.scaleLinear();
xScale.range([0, clientWidth]);
xScale.domain([0, 100]);
var yScale = d3.scaleLinear();
yScale.range([clientHeight, 0]);
yScale.domain([0, 10]);
var plot = svg.append('g')
.attr('width', clientWidth)
.attr('height', clientHeight)
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
plot.append('g').attr('class', 'x-axis').attr('transform', 'translate(0, ' + (clientHeight) + ')');
plot.append('g').attr('class', 'y-axis');
var xAxis = d3.axisBottom(xScale).tickSizeInner(-clientHeight).tickPadding(5);
var yAxis = d3.axisLeft(yScale).tickSizeInner(-clientWidth).tickPadding(5);
svg.select('.x-axis').call(xAxis);
svg.select('.y-axis').call(yAxis);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment