Exploring Time Scaling and Range Adjustment in D3 Barcharts

Question

Exploring Time Scaling and Range Adjustment in D3 Barcharts

My dataset looks something like this:

dateRange = [
 { date: 2017-03-23, value: 10 },
 { date: 2017-03-25, value: 15 },
 { date: 2017-04-01, value: 13 },
 { date: 2017-04-02, value: 19 }
];

The results can be viewed here: https://embed.plnkr.co/iOBAuCZmoMePL5P3Jwr4/

I am interested in creating a barchart with an x-axis that spans the entire date range (from March 23rd to April 2nd in this case). This means that every single day between these two dates should be displayed on the x-axis and set to a value of 0.

I would like to accomplish this without altering the original data source. I am aware that d3.js can handle this task using d3.time.scale. However, since rangeBand is not available when using d3.time.scale, I am struggling to determine the correct width for the barchart.

Thank you in advance for your assistance.

javascript d3.js bar-chart

Answer 1

Answer №1

To work with an ordinal scale, create an array that includes all dates from the start date to the end date:

var dateArray = d3.time.days(d3.min(dataset, function(d) {
    return d.date
}), d3.time.day.offset(d3.max(dataset, function(d) {
    return d.date
}), +1));

Use this array for defining your domain.

Note that since the last value in d3.time.days is exclusive, an offset is necessary to add an extra day to the end date.

Below is your updated code:

var margin = {
     top: 20,
     right: 0,
     bottom: 21,
     left: 30
   },
   height = 300,
   width = 400,
   w = width - margin.left - margin.right,
   h = height - margin.top - margin.bottom;
 var parseDate = d3.time.format("%Y-%m-%d").parse;

 dataset = [{
   date: '2017-03-23',
   value: 10
 }, {
   date: '2017-03-25',
   value: 15
 }, {
   date: '2017-04-01',
   value: 13
 }, {
   date: '2017-04-02',
   value: 19
 }];
 dataset.forEach(function(d) {
   d.date = parseDate(d.date);
 });

 var svg = d3.select('body')
   .append('svg')
   .attr("width", '100%')
   .attr("height", '100%')
   .attr("viewBox", "0 0 " + width + " " + height)
   .attr("preserveAspectRatio", "xMinYMin meet")
   .append("g")
   .attr("transform",
     "translate(" + margin.left + "," + margin.top + ")");

 var dateArray = d3.time.days(d3.min(dataset, function(d) {
   return d.date
 }), d3.time.day.offset(d3.max(dataset, function(d) {
   return d.date
 }), +1));

 var x = d3.scale.ordinal().rangeRoundBands([0, w], .2, .02);
 var xAxis = d3.svg.axis()
   .scale(x)
   .orient("bottom")
   .tickSize(0)
   .tickPadding(5)
   .tickFormat(d3.time.format("%d/%b"));
 x.domain(dateArray);

 svg.append("g")
   .attr("class", "axis easting")
   .attr("transform", "translate(0," + h + ")")
   .call(xAxis)
   .selectAll("text")
   .style("text-anchor", "middle");

 var y = d3.scale.linear().range([h, 0]);
 var yAxis = d3.svg.axis()
   .scale(y)
   .orient("left")
   .ticks(6);
 y.domain([0, d3.max(dataset, function(d) {
   return d.value;
 })]);

 svg.append("g")
   .attr("class", "axis northing")
   .call(yAxis)
   .selectAll("line")
   .attr("x2", w)

 svg.selectAll('rect')
   .data(dataset)
   .enter()
   .append('rect')
   .attr('width', function(d, i) {
     return x.rangeBand();
   })
   .attr('height', function(d, i) {
     return h - y(d.value);
   })
   .attr('x', function(d, i) {
     return x(d.date);
   })
   .attr('y', function(d, i) {
     return y(d.value);
   })
   .attr('fill', 'blue');

.chart {
  width: 450px;
  height: 300px;
  margin: 20px;
}

.axis {
  font-size: 10px;
  line-height: 16px;
}

.northing line {
  stroke: #F2F2F2;
}

line {
  fill: none;
  stroke: #727272;
}

path {
  fill: none;
  stroke: #727272;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

To work with an ordinal scale, create an array that includes all dates from the start date to the end date:

var dateArray = d3.time.days(d3.min(dataset, function(d) {
    return d.date
}), d3.time.day.offset(d3.max(dataset, function(d) {
    return d.date
}), +1));

Use this array for defining your domain.

Note that since the last value in d3.time.days is exclusive, an offset is necessary to add an extra day to the end date.

Below is your updated code:

var margin = {
     top: 20,
     right: 0,
     bottom: 21,
     left: 30
   },
   height = 300,
   width = 400,
   w = width - margin.left - margin.right,
   h = height - margin.top - margin.bottom;
 var parseDate = d3.time.format("%Y-%m-%d").parse;

 dataset = [{
   date: '2017-03-23',
   value: 10
 }, {
   date: '2017-03-25',
   value: 15
 }, {
   date: '2017-04-01',
   value: 13
 }, {
   date: '2017-04-02',
   value: 19
 }];
 dataset.forEach(function(d) {
   d.date = parseDate(d.date);
 });

 var svg = d3.select('body')
   .append('svg')
   .attr("width", '100%')
   .attr("height", '100%')
   .attr("viewBox", "0 0 " + width + " " + height)
   .attr("preserveAspectRatio", "xMinYMin meet")
   .append("g")
   .attr("transform",
     "translate(" + margin.left + "," + margin.top + ")");

 var dateArray = d3.time.days(d3.min(dataset, function(d) {
   return d.date
 }), d3.time.day.offset(d3.max(dataset, function(d) {
   return d.date
 }), +1));

 var x = d3.scale.ordinal().rangeRoundBands([0, w], .2, .02);
 var xAxis = d3.svg.axis()
   .scale(x)
   .orient("bottom")
   .tickSize(0)
   .tickPadding(5)
   .tickFormat(d3.time.format("%d/%b"));
 x.domain(dateArray);

 svg.append("g")
   .attr("class", "axis easting")
   .attr("transform", "translate(0," + h + ")")
   .call(xAxis)
   .selectAll("text")
   .style("text-anchor", "middle");

 var y = d3.scale.linear().range([h, 0]);
 var yAxis = d3.svg.axis()
   .scale(y)
   .orient("left")
   .ticks(6);
 y.domain([0, d3.max(dataset, function(d) {
   return d.value;
 })]);

 svg.append("g")
   .attr("class", "axis northing")
   .call(yAxis)
   .selectAll("line")
   .attr("x2", w)

 svg.selectAll('rect')
   .data(dataset)
   .enter()
   .append('rect')
   .attr('width', function(d, i) {
     return x.rangeBand();
   })
   .attr('height', function(d, i) {
     return h - y(d.value);
   })
   .attr('x', function(d, i) {
     return x(d.date);
   })
   .attr('y', function(d, i) {
     return y(d.value);
   })
   .attr('fill', 'blue');

.chart {
  width: 450px;
  height: 300px;
  margin: 20px;
}

.axis {
  font-size: 10px;
  line-height: 16px;
}

.northing line {
  stroke: #F2F2F2;
}

line {
  fill: none;
  stroke: #727272;
}

path {
  fill: none;
  stroke: #727272;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Exploring Time Scaling and Range Adjustment in D3 Barcharts

Answer №1

Similar questions

Sending JSON data from the primary window to the secondary window in Electron - A step-by-step guide

The directive code takes precedence over the controller code and is executed first

Guide on traversing and modifying properties within a intricate JSON structure using Node.js

Getting POST data in Next.js is a common task that requires understanding of how the

Dealing with a surprise JSON error in Express.js using Javascript

Enhancing data rendering by incorporating extra verifications through the logical AND operator to prevent crashes upon page refresh

Creating a dynamic shift in background color

Please indicate the decimal separator for the Number() function

Encountering the error message "Module 'request' not found" despite the fact that I've already included the request module

Creating a bespoke validation in AngularJS to verify if the selected date falls within a specific range of weekdays

Retrieve JSON data and use a button to sort and display markers on a Google Map

Leveraging the power of $lookup and $mergeObjects in aggregation

Matching patterns with regular expressions in Javascript

Please refrain from refreshing the page multiple times in order to receive updated data from the database

CSS Testimonial Slider - Customer Feedback Display

Tips for incorporating jQuery to load Rails form partials and submit them as a single form:

What is the best way to initiate a function from within another function while working with ReactJS?

Utilize angular to call a function when navigating

"Emphasize menu items with an underline as you navigate through the

What are some tips for utilizing the "bottom-row" slot within the "b-table" component in bootstrap-vue?