Filtering out weekend days from time series line chart in D3.js

Question

I have multi-year, daily dataset that looks like this:

date            close  
2013-09-17      178  
2013-09-16      185   
2013-09-15      20   
2013-09-14      10  
2013-09-13      190   
2013-09-12      157  
2013-09-11      150  
2013-09-10      189   
2013-09-09      183  
2013-09-08      11  
2013-09-07      20

I generated a line chart using this example, but would like filter out weekend days:

   <!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y-%m-%d").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("data.csv", function(error, data) {
  data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;
  });

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.close; }));

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Price ($)");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
});

</script>

This example from Crossfilter.js seems to achieve weekend filtering—but only for a small portion of the dataset. Ideally, I would be able to filter by day using checkboxes (e.g. weekdays or Mondays only) across the entire dataset.

I'm not sure if you can do what you want using d3.time.scale() because it's a linear scale and linear scales typically want their domain/range to be continuous. I guess it depends on if you want to zero out the specific days or you want to skip them on the axis. The former is possible, the latter I don't think so. Also, I don't see how the crossfilter example is filtering weekends. The full timeline on the bottom is showing all of the days of the week. Also, just for fun, here's a Fiddle that demonstrates your question: http://jsfiddle.net/reblace/t4FYB/ — reblace, Sep 17 '13 at 19:53
You could filter weekends out of the data first, then draw the chart. If you don't want gaps in your chart, then you could use an ordinal scale instead of time. This is what we did for financial data that has gaps for weekends. — mattwright, Oct 24 '13 at 14:36
Possible duplicate of [D3 Non-Continuous Dates Domain Gives Gaps on X-Axis](https://stackoverflow.com/questions/28129412/d3-non-continuous-dates-domain-gives-gaps-on-x-axis) — ColinE, Aug 08 '17 at 08:07

Filtering out weekend days from time series line chart in D3.js

0 Answers0