README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    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


basic data structure
basic data structure with added colors
basic data structure with long names
basic data structure with dimensions
basic data structure with all column features

Including data


standard reference to csv file
reference to data embedded in html file
preprocessing csv file before passing it on
preprocessing embedded data before passing it on

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="http://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="http://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

## thumbnail.png

      
          Raw
        
        
              thumbnail.png