item explorer - data format - example 4 by ee2dev

An example of the required format for item explorer. This example shows how to use dimensions. Introducing different dimensions for the items typically means that each dimension is refering to something different. In this example dimensions distinguish between items (bought) and payment method. Using dimensions has two effects:

for each dimension the corresponding items are shown in a separate chart with the dimension label for the x axis
when sorting is applied each dimension is sorted separately

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

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("items_5d.csv");
    showChart(); 
    
    function showChart() {
      d3.select("body")
        .append("div")
        .attr("class", "chart")
        .call(myIEChart);
    }   
  </script>
</body>
</html>

items_5d.csv

_customers,B-jui:DI=items,B-wat:DI=items,B-bee:DI=items,B-mil:DI=items,B-win:DI=items,F-egg:DI=items,F-cer:DI=items,F-can:DI=items,F-mea:DI=items,F-fis:DI=items,F-fru:DI=items,F-veg:DI=items,F-che:DI=items,O-flo:DI=items,O-mag:DI=items,O-hyg:DI=items,O-cos:DI=items,cash:DI=payment method,credit:DI=payment method,debit:DI=payment method
200000,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0
100000,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,1,0
100000,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,1
100000,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0
100000,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,0,1,0