0

For some odd reason, my dates won't properly show up on my bar chart. When checking for errors, my dates always show up as "null" in the console. My professor and I have tried re-arranging the format of the code regarding the dates, as well as the .csv spreadsheet itself.

The gradient still works fine, but ever since we've been stumped on implementing the dated timeline feature, the bar chart info is out of view, as well.

I'm using the core sample 'Dogecoin' from this website:

https://coinmetrics.io/data-downloads/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>DOGECOIN BAR CHART</title>

  <script src="https://d3js.org/d3.v4.min.js"></script>


  <style type="text/css">

  </style>
</head>

<body>

  <script type="text/javascript">
    var w = 1000;
    var h = 500;
    var margin = ({
      top: 20,
      right: 20,
      bottom: 30,
      left: 50
    });

    var svgMAIN = d3.select("body")
      .append("svg")
      .attr("height", h - margin.top - margin.bottom)
      .attr("width", w - margin.left - margin.right);

    var g = svgMAIN.append("g").attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");

    var gradient = svgMAIN.append("defs")
      .append("linearGradient")
      .attr("id", "gradient")
      .attr("x1", "0%")
      .attr("y1", "0%")
      .attr("x2", "100%")
      .attr("y2", "100%")
      .attr("spreadMethod", "pad");

    gradient.append("stop")
      .attr("offset", "0%")
      .attr("stop-color", "#3f51b5")
      .attr("stop-opacity", 1);

    gradient.append("stop")
      .attr("offset", "100%")
      .attr("stop-color", "#009688")
      .attr("stop-opacity", 0);

    svgMAIN.append("rect")
      .attr("width", w)
      .attr("height", h)
      .style("fill", "url(#gradient)");


    var price = [];

    var date = [];

    var fixTime = d3.timeParse("%e-%b-%y");

    var x = d3.scaleTime().range([0, w]);

    var y = d3.scaleLinear().range([h, 0]);






    d3.csv("doge.csv", function(error, data) {

      data.map(function(d) {



        d.date = fixTime(d.date);

        price.push(d.priceUSD);


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

        x.domain(d3.extent(data, function(d) {
          return d.date;
        }));

      });







      svgMAIN.append("g")
        .attr("transform", "translate(0," + h + ")")
        .call(d3.axisBottom(x))


      g.append("g")
        .call(d3.axisLeft(y))
        .append("text")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("Price ($)");



      var rect = svgMAIN.selectAll("rect")
        .data(price)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
          return i * (w / price.length);
        })
        .attr("y", function(d) {
          return d;
        })
        .attr("width", w / price.length)
        .attr("height", function(d) {

          return d;
        })

        .attr("fill", "midnightblue")

        .on("mouseover", mouseOverPrice)
        .on("mouseout", mouseOutPrice);





      function mouseOverPrice(d, i) {
        d3.select(this).raise()
          .attr("fill", "white");

        svgMAIN.append("text")
          .attr("id", "priceValue")
          .attr("x", "50")
          .attr("y", "150")
          .text("$" + d)
          .attr("font-family", "sans-serif")
          .attr("font-size", "150px")
          .attr("fill", "white")
          .attr("font-weight", "bold");
      };

      function mouseOutPrice(d, i) {
        d3.select(this).attr("fill", "midnightblue");
        d3.select("#priceValue").remove();
      };



    });
  </script>
</body>

</html>
pmkro
  • 2,542
  • 2
  • 17
  • 25
GIjoeHamSandwich
  • 1
  • 4
    Why are you using `"%e-%b-%y"` as the time format specifier? That is way off. Your dates are like `2013-12-18`, so your speficier needs to be `"%Y-%m-%d"`. – altocumulus Mar 09 '18 at 19:24
  • Looking at the csv, your time parse string is wrong. `var fixTime = d3.timeParse("%e-%b-%y");` should be `var fixTime = d3.timeParse("%d-%b-%y");` as the csv has zero padded days. [Documentation](https://github.com/d3/d3-time-format) – pmkro Mar 09 '18 at 19:25
  • 1
    The dates in the csv are formatted like "2014-01-07". d3.timeParse("%d-%b-%y") would be for dates formatted ("zero-padded date of month" - "abbreviated month name" - "two-digit year"). altocumulus has the correct parse params. – thmsdnnr Mar 09 '18 at 19:31

0 Answers0