D3 barcharts in svg

[sh11]

Hi,

I have some JSON data about Co2 emission and I want to visualize them.
But my barcharts are “pressed” / “stuffed” to the right.

Also The dates (x-axis) are displayed without the “thousands” – not “1760” but “.760”.

I use d3 version 3.5

Thank you a lot,

Sven

This is my code

function drawBar(dataset) {
  var w = 900;
  var h = 500;
  var padding = 90;

  ///////////////////////////////////////////////////////////////////////

  var minDate = dataset[0].Year;
  console.log(minDate);

  var maxDate = dataset[dataset.length - 1].Year;
  console.log(maxDate);

  ////////////////////////////////////////////////////////////////////////

  var maxValue = d3.max(dataset, function(d) {
    return d["Per Capita"];
  });

  console.log(maxValue);

  //////////////// APPEND SVG ///////////////////////////////
  var svg = d3
    .select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

  /////////////// Build X-SCALE /////////////////////////////////////

  var xAxisScale = d3.time
    .scale()
    .domain([minDate, maxDate])
    .range([0, w]);


  //////////////// Build Y-SCALE //////////////////////////////////////

  var yAxisScale = d3.scale
    .linear()
    .domain([0, maxValue])
    .range([h, 0]);

  ////////////// Build X-AXIS //////////////////////////////////////

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

  ////////////// Build Y-AXIS //////////////////////////////////////
  var yAxis = d3.svg
    .axis()
    .scale(yAxisScale)
    .orient("left");

  ////////////// Making the Axes visible /////////////////////////////
  svg
    .append("g")
    .attr("class", "axis")
    .attr("transform", "translate(92," + (h - padding) + ")")
    .call(xAxis);

  svg
    .append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",-90)")
    .call(yAxis);

  ////////////// Append / Create the rects //////////////////
  svg
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .style("fill", "teal")
    .attr({
      x: function(d, i) {
        return i * (w / dataset.length);
      },
      y: function(d) {
        return yAxisScale(d["Per Capita"]);
      },
      width: w / dataset.length,
      height: function(d) {
        return h - yAxisScale(d["Per Capita"]);
      }
    });

  /////////////////////////////////////////////////////////////
}
d3.json("global_json.json", function(data) {
  var dataset = data;
  drawBar(dataset);
});

// Source:
// https://datahub.io/core/co2-fossil-global


THIS IS THE JSON:

[
  {
    "Cement": 0.0,
    "Gas Flaring": 0.0,
    "Gas Fuel": 0.0,
    "Liquid Fuel": 0.0,
    "Per Capita": null,
    "Solid Fuel": 3.0,
    "Total": 3.0,
    "Year": 1751
  },
  {
    "Cement": 0.0,
    "Gas Flaring": 0.0,
    "Gas Fuel": 0.0,
    "Liquid Fuel": 0.0,
    "Per Capita": null,
    "Solid Fuel": 3.0,
    "Total": 3.0,
    "Year": 1752
  },

(…) 

"year": 2010
]

[m_hutley]

You’re feeding the time domain integers. It expects dates, and coerces anything else to be dates.