Skip to content

Instantly share code, notes, and snippets.

@grahampullan

grahampullan/.block

Last active January 10, 2018 22:16
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 grahampullan/8569646fadc2fb74026e22b04539f339 to your computer and use it in GitHub Desktop.
Save grahampullan/8569646fadc2fb74026e22b04539f339 to your computer and use it in GitHub Desktop.
Download ZIP
dbslice testbox demo - crossfilter plots
Raw
.block
license: mit
Raw
README.md

Three crossfilter-linked plots.

Part of a tutorial here. Full demo is available here.

The github repository for dbslice is here.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid" id="target"> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.rawgit.com/crossfilter/crossfilter/master/crossfilter.js"></script>
<script src="https://d3js.org/d3-contour.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="http://dbslice.org/dbslice.js"></script>
<script>
d3.json( "metaData.json" , function( metaData ) {
var cfData = dbslice.cfInit( metaData );
var session = {
title : "3D box of data demo" ,
plotRows : [
{ title : "3D box database" , // plotRow of charts for filtering
plots : [
{ plotFunc : dbslice.cfD3BarChart , // bar chart
data : { cfData : cfData , property : "Simulation type" } ,
layout : { title : "Simulation" , colWidth : 4 , height : 300 } } ,
{ plotFunc : dbslice.cfD3BarChart , // bar chart
data : { cfData : cfData , property : "Model type" } ,
layout : { title : "Model" , colWidth : 4 , height : 300 } } ,
{ plotFunc : dbslice.cfD3Histogram , // histogram
data : { cfData : cfData , property : "Average f" } ,
layout : { title : "Average" , colWidth : 4 , height : 300 } }
]
} ]
};
dbslice.render( "target" , session );
});
</script>
</body>
</html>
Raw
metaData.json
{"header": {"dataProperties": ["Average f", "Std dev f"], "metaDataProperties": ["Simulation type", "Model type"]}, "data": [{"Std dev f": 0.11765400802104833, "label": "Box 0", "taskId": 0, "Simulation type": "Red", "Average f": 0.8761529828259722, "Model type": "Std"}, {"Std dev f": 0.40800993552799664, "label": "Box 1", "taskId": 1, "Simulation type": "Red", "Average f": 0.70468681152182344, "Model type": "Basic"}, {"Std dev f": 0.22694109694051889, "label": "Box 2", "taskId": 2, "Simulation type": "Yellow", "Average f": 0.97904767071695575, "Model type": "Std"}, {"Std dev f": 0.26761590782329053, "label": "Box 3", "taskId": 3, "Simulation type": "Yellow", "Average f": 0.56049915805555273, "Model type": "Best"}, {"Std dev f": 0.088842198673934239, "label": "Box 4", "taskId": 4, "Simulation type": "Green", "Average f": 0.33377269613129995, "Model type": "Basic"}, {"Std dev f": 0.20019746958796913, "label": "Box 5", "taskId": 5, "Simulation type": "Purple", "Average f": 0.85883337058397358, "Model type": "Best"}, {"Std dev f": 0.18523610804702834, "label": "Box 6", "taskId": 6, "Simulation type": "Orange", "Average f": 0.44020506729672465, "Model type": "Std"}, {"Std dev f": 0.10716343064566324, "label": "Box 7", "taskId": 7, "Simulation type": "Blue", "Average f": 0.17899063446333216, "Model type": "Best"}, {"Std dev f": 0.24508850564157883, "label": "Box 8", "taskId": 8, "Simulation type": "Purple", "Average f": 0.71719759527732041, "Model type": "Improved"}, {"Std dev f": 0.44486482699316038, "label": "Box 9", "taskId": 9, "Simulation type": "Yellow", "Average f": 0.72828206260196671, "Model type": "Best"}, {"Std dev f": 0.20222622517871044, "label": "Box 10", "taskId": 10, "Simulation type": "Blue", "Average f": 0.33079827183538063, "Model type": "Improved"}, {"Std dev f": 0.036423520406831514, "label": "Box 11", "taskId": 11, "Simulation type": "Purple", "Average f": 0.76291677813936654, "Model type": "Std"}, {"Std dev f": 0.069337651783630633, "label": "Box 12", "taskId": 12, "Simulation type": "Purple", "Average f": 0.40242426208280435, "Model type": "Improved"}, {"Std dev f": 0.099239322368957036, "label": "Box 13", "taskId": 13, "Simulation type": "Red", "Average f": 0.7394810192852862, "Model type": "Best"}, {"Std dev f": 0.23555984224928087, "label": "Box 14", "taskId": 14, "Simulation type": "Green", "Average f": 0.45156156030242828, "Model type": "Basic"}, {"Std dev f": 0.11684896764163934, "label": "Box 15", "taskId": 15, "Simulation type": "Green", "Average f": 0.24680356082376961, "Model type": "Std"}, {"Std dev f": 0.14442754959963805, "label": "Box 16", "taskId": 16, "Simulation type": "Blue", "Average f": 0.94722649167860151, "Model type": "Best"}, {"Std dev f": 0.16938002013049938, "label": "Box 17", "taskId": 17, "Simulation type": "Blue", "Average f": 0.51698005044414841, "Model type": "Improved"}, {"Std dev f": 0.34058028522849854, "label": "Box 18", "taskId": 18, "Simulation type": "Orange", "Average f": 0.93588624241804141, "Model type": "Std"}, {"Std dev f": 0.1515299197241545, "label": "Box 19", "taskId": 19, "Simulation type": "Green", "Average f": 0.50929550268841395, "Model type": "Improved"}, {"Std dev f": 0.17742004387152019, "label": "Box 20", "taskId": 20, "Simulation type": "Yellow", "Average f": 0.77600787441282837, "Model type": "Best"}, {"Std dev f": 0.24296929566338618, "label": "Box 21", "taskId": 21, "Simulation type": "Purple", "Average f": 0.76090133948959859, "Model type": "Best"}, {"Std dev f": 0.18383291327524576, "label": "Box 22", "taskId": 22, "Simulation type": "Red", "Average f": 0.34856539856074392, "Model type": "Best"}, {"Std dev f": 0.12711667997385537, "label": "Box 23", "taskId": 23, "Simulation type": "Blue", "Average f": 0.74552332683694278, "Model type": "Basic"}, {"Std dev f": 0.16085527886955933, "label": "Box 24", "taskId": 24, "Simulation type": "Orange", "Average f": 0.80683061972325021, "Model type": "Best"}, {"Std dev f": 0.11191547326565271, "label": "Box 25", "taskId": 25, "Simulation type": "Blue", "Average f": 0.78887412146202607, "Model type": "Improved"}, {"Std dev f": 0.023867588899412456, "label": "Box 26", "taskId": 26, "Simulation type": "Orange", "Average f": 0.80504680633073356, "Model type": "Improved"}, {"Std dev f": 0.20140426550633314, "label": "Box 27", "taskId": 27, "Simulation type": "Yellow", "Average f": 0.96970978486627801, "Model type": "Best"}, {"Std dev f": 0.28966972863338031, "label": "Box 28", "taskId": 28, "Simulation type": "Orange", "Average f": 0.51015732901927802, "Model type": "Std"}, {"Std dev f": 0.1194637780661269, "label": "Box 29", "taskId": 29, "Simulation type": "Purple", "Average f": 0.52451893323796339, "Model type": "Basic"}, {"Std dev f": 0.06803650988161844, "label": "Box 30", "taskId": 30, "Simulation type": "Green", "Average f": 0.66515397773748386, "Model type": "Improved"}, {"Std dev f": 0.32410043705475022, "label": "Box 31", "taskId": 31, "Simulation type": "Orange", "Average f": 0.74427494868508959, "Model type": "Std"}, {"Std dev f": 0.11268209614004858, "label": "Box 32", "taskId": 32, "Simulation type": "Yellow", "Average f": 0.18767428701944272, "Model type": "Basic"}, {"Std dev f": 0.19935736203106608, "label": "Box 33", "taskId": 33, "Simulation type": "Blue", "Average f": 0.77191430680536777, "Model type": "Improved"}, {"Std dev f": 0.1647307433622211, "label": "Box 34", "taskId": 34, "Simulation type": "Blue", "Average f": 0.60119599283812208, "Model type": "Basic"}, {"Std dev f": 0.30899272577655612, "label": "Box 35", "taskId": 35, "Simulation type": "Blue", "Average f": 0.48318432764872926, "Model type": "Improved"}, {"Std dev f": 0.33750971195108809, "label": "Box 36", "taskId": 36, "Simulation type": "Blue", "Average f": 0.53968920353984973, "Model type": "Best"}, {"Std dev f": 0.28805734067944433, "label": "Box 37", "taskId": 37, "Simulation type": "Orange", "Average f": 0.74055571263783837, "Model type": "Std"}, {"Std dev f": 0.17687686619409976, "label": "Box 38", "taskId": 38, "Simulation type": "Orange", "Average f": 0.70549580687320079, "Model type": "Improved"}, {"Std dev f": 0.119405970019831, "label": "Box 39", "taskId": 39, "Simulation type": "Blue", "Average f": 0.21364235839270979, "Model type": "Std"}, {"Std dev f": 0.14283168227548618, "label": "Box 40", "taskId": 40, "Simulation type": "Purple", "Average f": 0.46133063147657721, "Model type": "Improved"}, {"Std dev f": 0.13588661854417658, "label": "Box 41", "taskId": 41, "Simulation type": "Orange", "Average f": 0.89929057596928064, "Model type": "Basic"}, {"Std dev f": 0.23062764528903232, "label": "Box 42", "taskId": 42, "Simulation type": "Purple", "Average f": 1.1975484480589718, "Model type": "Improved"}, {"Std dev f": 0.24891730469559595, "label": "Box 43", "taskId": 43, "Simulation type": "Orange", "Average f": 0.64806755258830617, "Model type": "Basic"}, {"Std dev f": 0.29940420139739465, "label": "Box 44", "taskId": 44, "Simulation type": "Blue", "Average f": 0.53891751828699475, "Model type": "Basic"}, {"Std dev f": 0.091145956292127989, "label": "Box 45", "taskId": 45, "Simulation type": "Green", "Average f": 0.40247905100357267, "Model type": "Std"}, {"Std dev f": 0.13357699683305657, "label": "Box 46", "taskId": 46, "Simulation type": "Yellow", "Average f": 0.50207055337789541, "Model type": "Best"}, {"Std dev f": 0.341605944489702, "label": "Box 47", "taskId": 47, "Simulation type": "Purple", "Average f": 0.78663865971556124, "Model type": "Improved"}, {"Std dev f": 0.16522681356347868, "label": "Box 48", "taskId": 48, "Simulation type": "Red", "Average f": 0.81530350316147593, "Model type": "Basic"}, {"Std dev f": 0.2498436816141556, "label": "Box 49", "taskId": 49, "Simulation type": "Blue", "Average f": 0.6351474264844108, "Model type": "Std"}, {"Std dev f": 0.016975766817753511, "label": "Box 50", "taskId": 50, "Simulation type": "Red", "Average f": 0.69192717803743753, "Model type": "Basic"}, {"Std dev f": 0.25384050778905309, "label": "Box 51", "taskId": 51, "Simulation type": "Green", "Average f": 0.7717825157993391, "Model type": "Best"}, {"Std dev f": 0.056418140694107617, "label": "Box 52", "taskId": 52, "Simulation type": "Blue", "Average f": 0.77223082553010125, "Model type": "Std"}, {"Std dev f": 0.20394205113977537, "label": "Box 53", "taskId": 53, "Simulation type": "Red", "Average f": 1.0202829070386235, "Model type": "Improved"}, {"Std dev f": 0.30183812812261218, "label": "Box 54", "taskId": 54, "Simulation type": "Green", "Average f": 0.62951765023495121, "Model type": "Improved"}, {"Std dev f": 0.13813505081858257, "label": "Box 55", "taskId": 55, "Simulation type": "Blue", "Average f": 0.79825837307655334, "Model type": "Basic"}, {"Std dev f": 0.38251851561469841, "label": "Box 56", "taskId": 56, "Simulation type": "Red", "Average f": 0.67353638888325873, "Model type": "Basic"}, {"Std dev f": 0.20726205870115594, "label": "Box 57", "taskId": 57, "Simulation type": "Purple", "Average f": 0.68993701348068337, "Model type": "Basic"}, {"Std dev f": 0.22421560494473239, "label": "Box 58", "taskId": 58, "Simulation type": "Red", "Average f": 1.0635338096649818, "Model type": "Best"}, {"Std dev f": 0.38561706058036455, "label": "Box 59", "taskId": 59, "Simulation type": "Green", "Average f": 0.52844638787687481, "Model type": "Improved"}, {"Std dev f": 0.1795120100634815, "label": "Box 60", "taskId": 60, "Simulation type": "Purple", "Average f": 0.82979595762104985, "Model type": "Basic"}, {"Std dev f": 0.23192604523576982, "label": "Box 61", "taskId": 61, "Simulation type": "Yellow", "Average f": 0.48532887098292032, "Model type": "Std"}, {"Std dev f": 0.058796277054433174, "label": "Box 62", "taskId": 62, "Simulation type": "Purple", "Average f": 0.92056557317204757, "Model type": "Std"}, {"Std dev f": 0.098376397619758887, "label": "Box 63", "taskId": 63, "Simulation type": "Orange", "Average f": 1.0440540826266862, "Model type": "Improved"}, {"Std dev f": 0.1464788018135221, "label": "Box 64", "taskId": 64, "Simulation type": "Purple", "Average f": 1.0459037851432549, "Model type": "Best"}, {"Std dev f": 0.06467314827715738, "label": "Box 65", "taskId": 65, "Simulation type": "Orange", "Average f": 0.62424373566912028, "Model type": "Best"}, {"Std dev f": 0.27573035569381171, "label": "Box 66", "taskId": 66, "Simulation type": "Purple", "Average f": 0.92964397653043185, "Model type": "Basic"}, {"Std dev f": 0.18523421842730464, "label": "Box 67", "taskId": 67, "Simulation type": "Purple", "Average f": 0.5687111254517957, "Model type": "Basic"}, {"Std dev f": 0.38359749961641404, "label": "Box 68", "taskId": 68, "Simulation type": "Green", "Average f": 0.58758268688965598, "Model type": "Best"}, {"Std dev f": 0.11706086374049252, "label": "Box 69", "taskId": 69, "Simulation type": "Yellow", "Average f": 0.88402256589455641, "Model type": "Improved"}, {"Std dev f": 0.14502677969586936, "label": "Box 70", "taskId": 70, "Simulation type": "Yellow", "Average f": 0.37468882894389344, "Model type": "Basic"}, {"Std dev f": 0.02513690871596887, "label": "Box 71", "taskId": 71, "Simulation type": "Green", "Average f": 0.88356963597484373, "Model type": "Improved"}, {"Std dev f": 0.29630995970073015, "label": "Box 72", "taskId": 72, "Simulation type": "Yellow", "Average f": 0.79210517711440365, "Model type": "Std"}, {"Std dev f": 0.22451436349872972, "label": "Box 73", "taskId": 73, "Simulation type": "Blue", "Average f": 0.7495868609841021, "Model type": "Basic"}, {"Std dev f": 0.22768417392279017, "label": "Box 74", "taskId": 74, "Simulation type": "Purple", "Average f": 0.84751560202018172, "Model type": "Basic"}, {"Std dev f": 0.14271297644675635, "label": "Box 75", "taskId": 75, "Simulation type": "Orange", "Average f": 0.98368846203224658, "Model type": "Improved"}, {"Std dev f": 0.37724955619156331, "label": "Box 76", "taskId": 76, "Simulation type": "Red", "Average f": 0.65067990828287736, "Model type": "Improved"}, {"Std dev f": 0.13077208704841248, "label": "Box 77", "taskId": 77, "Simulation type": "Yellow", "Average f": 0.20706926733023434, "Model type": "Best"}, {"Std dev f": 0.12029541811005599, "label": "Box 78", "taskId": 78, "Simulation type": "Purple", "Average f": 0.70409308421015349, "Model type": "Improved"}, {"Std dev f": 0.26628142475722638, "label": "Box 79", "taskId": 79, "Simulation type": "Green", "Average f": 0.6589200021366648, "Model type": "Best"}, {"Std dev f": 0.22936677556480514, "label": "Box 80", "taskId": 80, "Simulation type": "Purple", "Average f": 0.79053302663000502, "Model type": "Best"}, {"Std dev f": 0.26882406393067593, "label": "Box 81", "taskId": 81, "Simulation type": "Purple", "Average f": 0.79092827820830647, "Model type": "Std"}, {"Std dev f": 0.12987550144299498, "label": "Box 82", "taskId": 82, "Simulation type": "Yellow", "Average f": 0.2309073771993079, "Model type": "Improved"}, {"Std dev f": 0.26573045503789022, "label": "Box 83", "taskId": 83, "Simulation type": "Red", "Average f": 0.68259220628604045, "Model type": "Std"}, {"Std dev f": 0.22988189630445563, "label": "Box 84", "taskId": 84, "Simulation type": "Purple", "Average f": 0.38589024981850584, "Model type": "Std"}, {"Std dev f": 0.16079290315496503, "label": "Box 85", "taskId": 85, "Simulation type": "Orange", "Average f": 0.33850755696988577, "Model type": "Basic"}, {"Std dev f": 0.22776494390891722, "label": "Box 86", "taskId": 86, "Simulation type": "Red", "Average f": 0.97459727796860818, "Model type": "Improved"}, {"Std dev f": 0.10925517901303353, "label": "Box 87", "taskId": 87, "Simulation type": "Orange", "Average f": 0.80773632771690973, "Model type": "Std"}, {"Std dev f": 0.029095748589640428, "label": "Box 88", "taskId": 88, "Simulation type": "Orange", "Average f": 0.79279501356031179, "Model type": "Best"}, {"Std dev f": 0.23237042115878681, "label": "Box 89", "taskId": 89, "Simulation type": "Green", "Average f": 0.56854558168656721, "Model type": "Best"}, {"Std dev f": 0.1781352787786066, "label": "Box 90", "taskId": 90, "Simulation type": "Green", "Average f": 0.58310654098994019, "Model type": "Std"}, {"Std dev f": 0.088096942819534882, "label": "Box 91", "taskId": 91, "Simulation type": "Green", "Average f": 0.46988533130584281, "Model type": "Basic"}, {"Std dev f": 0.21917361309333042, "label": "Box 92", "taskId": 92, "Simulation type": "Orange", "Average f": 0.77714798102130012, "Model type": "Improved"}, {"Std dev f": 0.12541208979530635, "label": "Box 93", "taskId": 93, "Simulation type": "Yellow", "Average f": 0.44766966237808981, "Model type": "Improved"}, {"Std dev f": 0.24210579267099713, "label": "Box 94", "taskId": 94, "Simulation type": "Green", "Average f": 0.79367610341147754, "Model type": "Std"}, {"Std dev f": 0.15381458118941652, "label": "Box 95", "taskId": 95, "Simulation type": "Purple", "Average f": 0.46326148466540495, "Model type": "Best"}, {"Std dev f": 0.28240540699557554, "label": "Box 96", "taskId": 96, "Simulation type": "Purple", "Average f": 0.9762825167596374, "Model type": "Best"}, {"Std dev f": 0.094354900374409953, "label": "Box 97", "taskId": 97, "Simulation type": "Purple", "Average f": 0.15583367348989294, "Model type": "Best"}, {"Std dev f": 0.11803412459827027, "label": "Box 98", "taskId": 98, "Simulation type": "Orange", "Average f": 0.3441607896106364, "Model type": "Improved"}, {"Std dev f": 0.058148972571203827, "label": "Box 99", "taskId": 99, "Simulation type": "Orange", "Average f": 0.79795078080515214, "Model type": "Std"}]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment