debugging XD debugging XD - 1 year ago 76
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 = (d) {

dataset = (d) {
return (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();


svg ='body')
.attr('width', width )
.attr('height', height)

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()
.rangeRoundBands([0, width], .1);

xAxis = d3.svg.axis()

colours = d3.scale.category10();
groups = svg.selectAll('g')
.style('fill', function (d, i) {
return colours(i);
rects = groups.selectAll('rect')
.data(function (d) {
return d;
.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();

.attr('class', 'axis')
.attr("transform", "translate(0," + (height-padding) + ")")

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

Answer Source

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()

var line = d3.svg.line()
    .x(function(d) { return xScale(d[0]); })
    .y(function(d) { return yScale(d[1]); })
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download