An example how to use item explorer with data embedded in the html file which needs to be processed before it passed on to item explorer. The resulting data is assumed to be in the required format. Note that data within html must not contain empty lines, leading spaces or tabs.
This approach can be used when no web server is available.
Complete list of examples:
xxxxxxxxxx
<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>
<pre id="data">
_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
</pre>
<script>
var myIEChart = itemExplorerChart();
readData();
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