BomberMan BomberMan - 5 months ago 22
JSON Question

how can i group JSON data into the weeks according to calender?

I am doing some d3JS programming to generate graph with JSON data.

"test": [

The problem I am facing is : on
it takes all the rows from given jSON file. And my need is, sorting of days in week. In other words I have 'n' number of rows and I want to display only days of a single week, then other days will be shown on the click of 'next button'.

So help me to sort and display only 7 rows once, then it should follow the next 7 rows on NEXT button.
Thanks in advance. I can provide d3js code if needed.
I have a clue that it can be done with help of momentJS or undescoreJS

My index.html file follows like this

<!DOCTYPE html>
<title>Bar Graph</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="/node_modules/underscore/underscore-min.js"></script>
<script type="text/javascript" src="/node_modules/moment/moment.js"></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<style type="text/css">

svg {
width: 550px;
height: 500px;
border: solid 1px #ccc;
font: 10px sans-serif;
shape-rendering: crispEdges;

<script type="text/javascript">

// var week = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

var w = 550,
h = 500,
p = [20, 30, 30, 20],
x = d3.scale.ordinal().rangeRoundBands([0, w - p[1] - p[3]]),
y = d3.scale.linear().range([0, h - p[0] - p[2]]),
z = d3.scale.ordinal().range(["lightpink", "lightblue"]),

parse = d3.time.format("%m/%d/%Y").parse,
format = d3.time.format("%a");

var svg ="body").append("svg:svg")
.attr("width", w)
.attr("height", h)
.attr("transform", "translate(" + p[3] + "," + (h - p[2]) + ")");
var t

d3.json("test.json", function(test) {
// Transpose the data into layers by cause.
var causes = d3.layout.stack()(["allocated", "unallocated"].map(function(cause) {

return {
// var temp = _.each(test, function(record){
date = parse(;
array = [date]
// console.log(array)

var week = d3.time.format("%U");

var nest = d3.nest()
.key(function(d) {
return week(new Date(array));


return {x: date, y: +d[cause]};

// Compute the x-domain (by date) and y-domain (by top).
x.domain(causes[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(causes[causes.length - 1], function(d) { return d.y0 + d.y; })]);

// Add a group for each cause.
var cause = svg.selectAll("g.cause")
.attr("class", "cause")
.style("fill", function(d, i) { return z(i); })
.style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); });

// Add a rect for each date.
var rect = cause.selectAll("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return -y(d.y0) - y(d.y); })
.attr("height", function(d) { return y(d.y); })
.attr("width", x.rangeBand());

// Add a label per date.
var label = svg.selectAll("text")
.attr("x", function(d) { return x(d) + x.rangeBand() / 2; })
.attr("y", 6)
.attr("text-anchor", "middle")
.attr("dy", ".71em")

// Add y-axis rules.
var rule = svg.selectAll("g.rule")
.attr("class", "rule")
.attr("transform", function(d) { return "translate(0," + -y(d) + ")"; });

.attr("x2", w - p[1] - p[3])
.style("stroke", function(d) { return d ? "#fff" : "#000"; })
.style("stroke-opacity", function(d) { return d ? .7 : null; });

.attr("x", w - p[1] - p[3] + 6)
.attr("dy", ".35em")
<!-- <td>Previous</td> -->

however X - axis is not my desired output


You can use d3.nest() to group your data into week numbers

First, we need to define a time parser that would give you the week number of a date object

var week = d3.time.format("%U");

Then create a nest object

var nest = d3.nest()
    .key(function (d) {
         return week(new Date(;

The nest object will be an array that contains your data grouped into week numbers

A live demo with your data can be found at You can take a look at the nest object in the console