StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics
https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
4.0 KiB
113 lines
4.0 KiB
4 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en-us">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>D3 exploding boxplot by mcaule</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
|
||
|
|
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
|
||
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
|
||
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
|
||
|
|
<script src="bower_components/requirejs/require.js"></script>
|
||
|
|
<link href="src/d3_exploding_boxplot.css" rel="stylesheet" type="text/css"></link>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
require.config({
|
||
|
|
baseUrl: ".",
|
||
|
|
paths:{
|
||
|
|
d3:'bower_components/d3/d3.min',
|
||
|
|
"d3-tip":'bower_components/d3-tip/index',
|
||
|
|
'd3-exploding-boxplot':'src/d3_exploding_boxplot'
|
||
|
|
},
|
||
|
|
shim:{
|
||
|
|
'd3-exploding-boxplot':{
|
||
|
|
deps:['d3','d3-tip']
|
||
|
|
},
|
||
|
|
'd3-tip':{
|
||
|
|
deps:['d3']
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.gist{font-size:12px;line-height:16px;margin-bottom:0px;width:600px}
|
||
|
|
.gist-meta{display:none;}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<section class="page-header">
|
||
|
|
<h1 class="project-name">D3 exploding boxplot</h1>
|
||
|
|
<h2 class="project-tagline">A boxplot visualisation exploding into a scatter plot</h2>
|
||
|
|
<a href="https://github.com/mcaule/d3_exploding_boxplot" class="btn">View on GitHub</a>
|
||
|
|
<a href="https://github.com/mcaule/d3_exploding_boxplot/zipball/master" class="btn">Download .zip</a>
|
||
|
|
<a href="https://github.com/mcaule/d3_exploding_boxplot/tarball/master" class="btn">Download .tar.gz</a>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="main-content">
|
||
|
|
<h1>
|
||
|
|
<a id="d3_exploding_boxplot" class="anchor" href="#d3_exploding_boxplot" aria-hidden="true"><span class="octicon octicon-link"></span></a>d3 exploding boxplot</h1>
|
||
|
|
|
||
|
|
<p>A boxplot visualisation exploding into a scatter plot</p>
|
||
|
|
|
||
|
|
<h2>Demo !</h2>
|
||
|
|
<p>Just test it, click on the boxplot ! </p>
|
||
|
|
|
||
|
|
<div id="chartContainer">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>(Double click reverts to boxplot)</p>
|
||
|
|
|
||
|
|
<h2>Implementation</h2>
|
||
|
|
|
||
|
|
<script src="https://gist.github.com/mcaule/8086a0dd869edd63e2b9.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<footer class="site-footer">
|
||
|
|
<span class="site-footer-owner"><a href="https://github.com/mcaule/d3_exploding_boxplot">D3 exploding boxplot</a> is maintained by <a href="https://github.com/mcaule">mcaule</a>.</span>
|
||
|
|
|
||
|
|
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
require(['d3-exploding-boxplot','d3'],function(exploding_boxplot,d3){
|
||
|
|
|
||
|
|
//generate random data
|
||
|
|
var box1 = d3.range(100).map(d3.random.normal(Math.random()*100,5))
|
||
|
|
.map(function(d,i){return {v:d,g:'box1',t:'pt 1'+i}})
|
||
|
|
|
||
|
|
var box2 = d3.range(100).map(d3.random.normal(Math.random()*100,30))
|
||
|
|
.map(function(d,i){return {v:d,g:'box2',t:'pt 2'+i}})
|
||
|
|
|
||
|
|
var box3 = d3.range(100).map(function(){return Math.random()*100})
|
||
|
|
.map(function(d,i){return {v:d,g:'box3',t:'pt 3'+i}})
|
||
|
|
|
||
|
|
var box4 = d3.range(80).map(d3.random.normal(50,5))
|
||
|
|
.concat(d3.range(20).map(d3.random.normal(50,25)))// with outliers
|
||
|
|
.map(function(d,i){return {v:d,g:'box4 un peu long',t:'pt 4'+i}})
|
||
|
|
|
||
|
|
var data = box1.concat(box2).concat(box3).concat(box4)
|
||
|
|
|
||
|
|
// chart(data,aes)
|
||
|
|
// aesthetic :
|
||
|
|
// y : point's value on y axis
|
||
|
|
// group : how to group data on x axis
|
||
|
|
// color : color of the point / boxplot
|
||
|
|
// label : displayed text in toolbox
|
||
|
|
var chart = exploding_boxplot(data,{y:'v',group:'g',color:'g',label:'t'})
|
||
|
|
.rotateXLabels(true)
|
||
|
|
.margin({top:10,bottom:100,left:40,right:10})
|
||
|
|
|
||
|
|
//call chart on a div
|
||
|
|
chart('#chartContainer')
|
||
|
|
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|