Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
71 lines (57 sloc) 1.85 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>d3.punchcard</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Example</h1>
<div id="example"></div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.min.js"></script>
<script src="d3.punchcard.js"></script>
<script>
d3.csv(
'data1.csv',
// parsing function
function (d) {
return d3.entries(d);
},
// callback function
function ( data ) {
showGraph( data );
}
)
function showGraph ( data ) {
var flatAscending,
upperLimit,
examplePunchcard;
flatAscending = data.map( function(array) {
var value;
return array.slice(1).map( function ( sliced ) {
return parseFloat( sliced.value );
}).filter(function ( element ) {
return element > 0;
});
}).reduce(function(a, b) {
return a.concat(b);
}).sort(function(a, b) {
return a - b;
} );
// we find the upper limit quantile in order
// to not show upper outliers
upperLimit = d3.quantile( flatAscending, 0.95 );
examplePunchcard = new D3punchcard({
data: data,
element: '#example',
upperLimit: upperLimit
})
.draw({ width: document.getElementById('example').offsetWidth });
}
</script>
</body>
</html>
You can’t perform that action at this time.