m1stHM

Just trying out a tutorial

by mamounothman

HTML

<!DOCTYPE html>
<html lang="EN">
    <head>
      <meta charset="utf-8">
      <title>Heat Map</title>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.1/d3.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.css" />
    </head>
    <body>
        <h1>Transactions Result Sequence</h1>
        <div id="heatMap"></div>

        <script type="text/javascript">


          var transactions = [
          {date: "2020-01-23T11:15:11Z", sequence: 1, rturn: -280.00, type: "Loss"},
          {date: "2020-01-23T11:22:19Z", sequence: 2, rturn: -43.75, type: "Loss"},
          {date: "2020-01-23T11:28:47Z", sequence: 3, rturn: -4.05, type: "Loss"},
          {date: "2020-01-23T11:33:26Z", sequence: 4, rturn: 9.47, type: "Profit"},
          {date: "2020-01-23T11:50:34Z", sequence: 5, rturn: 0.11, type: "Profit"},
          {date: "2020-01-23T11:53:40Z", sequence: 6, rturn: 16.46, type: "Profit"},
          {date: "2020-01-23T12:16:34Z", sequence: 7, rturn: 19.23, type: "Profit"},
          {date: "2020-01-23T12:24:03Z", sequence: 8, rturn: 26.65, type: "Profit"},
          {date: "2020-01-23T12:38:19Z", sequence: 9, rturn: 7.70, type: "Profit"},
          {date: "2020-01-23T13:12:50Z", sequence: 10, rturn: 9.80, type: "Profit"},
          {date: "2020-01-23T13:27:43Z", sequence: 11, rturn: -15.58, type: "Loss"},
          {date: "2020-01-23T13:35:45Z", sequence: 12, rturn: 6.18, type: "Profit"}
        ];
        
        var colorData = Object.entries(transactions).map(e => e.rturn);
					
          var facts = crossfilter(transactions);

          var dimensionByType = facts.dimension(function(d){ return d.sequence; });
       ...