debugging XD debugging XD - 1 month ago 5
Javascript Question

Orientation and proper size stack bar

As I am a newbie at JavaScript programming using D3.
So far I have managed to transform this graph in the X axis, but the question is how can I adjust the stack bar on the x axis instead of it being upside down in the following code:

series = dataset.map(function (d) {
return d.name;
});

dataset = dataset.map(function (d) {
return d.data.map(function (o, i) {
// Structure it so that your numeric
// axis (the stacked amount) is y
return {
y: o.count,
x: o.month
};
});
});

stack = d3.layout.stack();

stack(dataset);

console.log(dataset);
svg = d3.select('body')
.append('svg')
.attr('width', width )
.attr('height', height)
.append('g')


yMax = d3.max(dataset, function (group) {
return d3.max(group, function (d) {
return d.y + d.y0;
});
});
yScale = d3.scale.linear()
.domain([0, yMax])
.range([0, height]);


months = dataset[0].map(function (d) {
return d.x;
});
xScale = d3.scale.ordinal()
.domain(months)
.rangeRoundBands([0, width], .1);

xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom');


colours = d3.scale.category10();
groups = svg.selectAll('g')
.data(dataset)
.enter()
.append('g')
.style('fill', function (d, i) {
return colours(i);
});
rects = groups.selectAll('rect')
.data(function (d) {
return d;
})
.enter()
.append('rect')
.attr('y', function (d,i) {
return yScale(d.y0);
})
.attr('x', function (d) {
return xScale(d.x);
})
.attr('height', function (d) {
return xScale(d.x);
})
.attr('width', function (d) {
return xScale.rangeBand();
});


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


Not to forget that I used the same data of this.

Answer

The following code shall output the lines I requested above.

var xScale = d3.scale.linear()
    .domain([d3.min(Germany, function (d) {
        return d[0]
    }),d3.max(Germany, function (d) {
        return d[0]
    })])
    .range([padding, w-padding]);
//var yScale = d3.scale.linear()
//  .domain([d3.min(newdict1, function (d) {return d[1];}),d3.max(newdict1, function(d) { return d[1];})])
//  .range([h - padding, padding]);

var yScale = d3.scale.linear()
    .domain([d3.min(latestdict, function (d) {
        return d[1]
    }), d3.max(latestdict, function (d) {
        return d[1]
    })])
    .range([h-padding, padding]);


var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("Bottom")
    .ticks(10);


var line = d3.svg.line()
    .x(function(d) { return xScale(d[0]); })
    .y(function(d) { return yScale(d[1]); })
    .interpolate("basis");
Comments