block by EE2dev a5e1b098533228613f28

item explorer - data source - example 3

Full Screen

An example how to use item explorer with a csv file which needs to be processed before it is passed on to item explorer. The resulting data is assumed to be in the required format.

More examples

The main example is here.

Complete list of examples:

  1. Data formatting

  2. Including data

  3. Visualization options

index.html

<!DOCTYPE html>	
<meta charset="utf-8">
<head>
  <link rel="stylesheet" type="text/css" href="//www.ankerst.de/lib/itemExplorer_10.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <script src="//www.ankerst.de/lib/itemExplorer_10.min.js"></script>
</head>

<body>
  <script>  
    var myIEChart = itemExplorerChart();
    readData("items_small.csv");
        
    function showChart(_file) {
      d3.select("body")
        .append("div")
        .attr("class", "chart")
        .datum(_file)
        .call(myIEChart);
    }    
 
    function readData(csvFile) {
      if (typeof csvFile !== 'undefined') {
        d3.csv(csvFile, convertToNumber, function(error, file) {
          showChart(file);
        });
      } 
      else {
        file = d3.csv.parse(d3.select("pre#data").text()); 
        file.forEach( function (row) {
          convertToNumber(row);
        });
        showChart(file);
      }
    } 
    function convertToNumber(d) {
      for (var perm in d) {
        if (Object.prototype.hasOwnProperty.call(d, perm)) {
          d[perm] = +d[perm];
        }
      }    
      return d;
    }  
  </script>
</body>
</html>

items_small.csv

_customers,item1,item2,item3,item4
100000,0,0,0,1
100000,0,0,1,1
100000,0,1,0,1
100000,0,1,1,1
100000,1,0,0,1
100000,1,0,1,1
100000,1,1,0,1
100000,1,1,1,1
100000,0,0,0,0
100000,0,0,1,0
100000,0,1,0,0
100000,0,1,1,0
100000,1,0,0,0
100000,1,0,1,0
100000,1,1,0,0
100000,1,1,1,0