One of the nice built-in features of D3.js is the ability to render a chart where you can highlight parts of the graph:
The feature is called “brushes” in the d3 docs.
Here I’ve tried to replicate this in the simplest possible way.
We need some CSS, for both the blue color and the highlight/selection box:
.area {
fill: steelblue;
clip-path: url(#clip);
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}