EE2dev/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
	<!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>
_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