Skip to content

Instantly share code, notes, and snippets.

@EE2dev

EE2dev/README.md

Last active November 6, 2015 22:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EE2dev/de4a9e0010795ace76b8 to your computer and use it in GitHub Desktop.
Save EE2dev/de4a9e0010795ace76b8 to your computer and use it in GitHub Desktop.
Download ZIP
item explorer - data source - example 4
Raw
README.md

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.

More examples

The main example is here.

Complete list of examples:

  1. Data formatting
  1. Including data
  1. Visualization options
Raw
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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment