Nsryjdtyk

I am trying to get values from a JSON File and use them as the X and Y axis on a d3 v4 bar chart. But my axis is not showing up as I like. WHat am I doing wrong?

My HTML Code:

  <div class="col" id="main-chart"  style="padding-top:75px;">

    <svg width="675" height="415"></svg>

  </div>

My D3 Code:

   var svg = d3.select("#main-chart svg"),

   margin = {top: 20, right: 20, bottom: 30, left: 75},

   width = +svg.attr("width") - margin.left - margin.right,

   height = +svg.attr("height") - margin.top - margin.bottom;



   var tooltip = d3.select("body").append("div").attr("class", "toolTip");



   var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),

       y = d3.scaleLinear().rangeRound([height, 0]);



   var colours = d3.scaleOrdinal().range(["#6F257F", "#CA0D59"]);



   var g = svg.append("g")

   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



  d3.json(data.json, function(error, data) {

   if (error) throw error;

   x.domain(data.map(function(d) { return d.date; })); 

   y.domain([0, d3.max(data, function(d) { return d.values; })]);



  g.append("g")

    .attr("class", "axis axis--x")

    .attr("transform", "translate(0," + height + ")")

    // .attr("transform", "rotate(-90deg)")

    .call(d3.axisBottom(x).ticks(5));



  g.append("g")

    .attr("class", "axis axis--y")

    .call(d3.axisLeft(y).ticks(5).tickFormat(function(d) {return parseInt(d); }).tickSizeInner([-width]))

    .append("text")

    .attr("transform", "rotate(-90)")

    .attr("y", 6)

    .attr("dy", "0.71em")

    .attr("text-anchor", "end")

    .attr("fill", "#5D6971");



  g.selectAll(".bar")

    .data(data)

    .enter().append("rect")

    .attr("x", function(d) {return x(d.date); })

    .attr("y", function(d) {return y(d.values); })

    .attr("width", x.bandwidth())

    .attr("height", function(d) { return height - y(d.values); })

    .attr("fill", function(d) { return colours(d.date); })

    .on("mousemove", function(d){

        tooltip

          .style("left", d3.event.pageX - 50 + "px")

          .style("top", d3.event.pageY - 70 + "px")

          .style("display", "inline-block")

          .html((d.date) + "<br>"  + (d.values));

    })

    .on("mouseout", function(d){ tooltip.style("display", "none");});

 }); 

My JSON CODE:

 [

   {

    "date": "2018-10-19",

    "values": 6574406

   },

{

    "date": "2018-10-20",

   "values": 6575406

},

{

    "date": "2018-10-21",

    "values": 6575696

},

{

    "date": "2018-10-22",

    "values": 6576656

},

{

    "date": "2018-10-23",

   "values": 6577222

},

 {

    "date": "2018-10-24",

   "values": 6578908

 },

{

     "date": "2018-10-25",

     "values": 6579386

 },

{

    "date": "2018-10-26",

   "values": 6580020

},

{

    "date": "2018-10-27",

    "values": 6580214

},

{

    "date": "2018-10-28",

    "values": 6580440

},

{

    "date": "2018-10-29",

    "values": 6581334

},

{

    "date": "2018-10-30",

    "values": 6583556

},

{

    "date": "2018-10-31",

    "values": 6584098

},

{

    "date": "2018-11-01",       

    "values": 6584660

}

]

My chart looks smushed and I want my Y-Axis to start with the lowest value. Which in this case is 6574406 and want to increment by 25 with 10 ticks. I have tried many variations but am not able to get the x-axis un-overlapped. I tried to skew the values but that did not work either.

My chart: