D3 Examples - d3-ez : SlashDB Bugfix

d3-ez : SlashDB Bugfix

Testing a fix for bug seen in d3-ez line chart example found at https://www.slashdb.com/2018/02/15/howto-d3js/

Bugs fixed:

Duplicate dots in every point.

The y-axis over ran over the top of the chart.

Fixes https://github.com/jamesleesaunders/d3-ez/issues/87

Thanks to Elliot Bricker for writing a d3-ez demonstration article on SlashDB.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <title>SlashDB CSV Response</title>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/jamesleesaunders/d3-ez/v3.3.3/build/d3-ez.js"></script>
  <link rel="stylesheet" type="text/css" href="https://rawgit.com/jamesleesaunders/d3.ez/v3.3.3/build/d3-ez.css" />
</head>
​
<body>
  <div id="chartholder"></div>
  <br/>
  <div>Value: <span id="message"></span></div>
​
  <script type="text/javascript">
​
    dateConvert = function(dateYMD) {
      parser = d3.timeParse('%Y-%m-%d');
      var dateUnix = new Date(dateYMD) / 1000;
      return dateUnix;
    };
​
    //  Using SlashDB to filter on Canadinan Invoices and their totals per their order (invoicing) days
    d3.csv("https://demo.slashdb.com/db/Chinook/Invoice/BillingCountry/Canada/InvoiceDate,Total,BillingCountry.csv", function(error, csv) {
​
      var colors = d3.ez.palette.categorical(3);
      var chart = d3.ez.chart.lineChart()
        .colors(colors)
        .yAxisLabel("Invoice Total");
​
      var legend = d3.ez.component.legend().title("Sum of Invoice Line Items");
      var title = d3.ez.component.title().mainText("SlashDB Meets D3").subText("Using CSV-Based Response");
​
      // Convert csv to d3-ez data format
      data = [{
        key: "Total Price",
        values: []
      }];
      d3.map(csv).values().forEach(function(d) {
        data[0].values.push({
          key: dateConvert(d.InvoiceDate),
          value: d.Total
        });
      });
​
      // Create chart object
      var myChart = d3.ez.base()
        .width(800)
        .height(400)
        .chart(chart)
        .legend(legend)
        .title(title)
        .on("customValueMouseOver", function(d, i) {
          d3.select("#message").text(d.value);
        });
​
      d3.select('#chartholder')
        .datum(data)
        .call(myChart);
    });
  </script>
</body>
​
</html>
    