item explorer - data source - example 3

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:

Data formatting

Including data

Visualization options

changing the thousands separator and the tick format

<!DOCTYPE html>	
<meta charset="utf-8">
<head>
  <link rel="stylesheet" type="text/css" href="https://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="https://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>

Modified http://www.ankerst.de/lib/itemExplorer_10.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://www.ankerst.de/lib/itemExplorer_10.min.js