Built with blockbuilder.org
Last active
April 13, 2020 07:12
-
-
Save ninjakx/483fd69328694c6b6125bb43b9f7f8a7 to your computer and use it in GitHub Desktop.
range_bar_chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Test-Dashboard</title> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.9/dc.min.css"> | |
<!-- <link rel="stylesheet" href="d3.slider.css"> --> | |
<!-- Dashboard Dependecies --> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css"> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/keen/dashboards@gh-pages/assets/css/keen-dashboards.css"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
<!-- <script type='text/javascript' src='https://rawgit.com/crossfilter/reductio/master/reductio.min.js'></script> --> | |
<style> | |
html, body { | |
height: 100%; | |
width: 100%; | |
} | |
.svg-container { | |
width: 100%; | |
} | |
.irs--big.irs-with-grid { | |
height: 70px; | |
width: 500px; | |
margin-left: 5%; | |
} | |
#focus .axis.x .tick text { | |
text-anchor: end; | |
transform: rotate(-60deg) translate(-10px,-12px); | |
} | |
#range.dc-chart .axis { | |
display: none; | |
} | |
#range svg { | |
display: block; /* default inline causes padding? */ | |
} | |
</style> | |
</head> | |
<body class="keen-dashboard"> | |
<!-- Navbar --> | |
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> | |
<div class="container-fluid"> | |
<div class="navbar-header"> | |
<span> | |
<a class="navbar-brand" title="Click to view data source" target="_blank" href="https://github.com/square/crossfilter/wiki/API-Reference"> | |
Dc.js Simple Dashboard | |
</a> | |
</span> | |
</div> | |
</div> | |
</div> | |
<span> | |
<a href="javascript:focus.filterAll(); dc.redrawAll();" class="reset">reset</a> | |
</span> | |
<div id="range"></div> | |
<div id="focus"></div> | |
<div id="first-letters"></div> | |
<script data-require="underscore.js@1.5.2" data-semver="1.5.2" src="//cdn.jsdelivr.net/underscorejs/1.5.2/underscore-min.js"></script> | |
<!-- <script data-require="coffee-script@1.4.0" data-semver="1.4.0" src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.4.0/coffee-script.min.js"></script> --> | |
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.js"></script> --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script> | |
<!-- <script src="d3.slider.js"></script> --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.2.1/dc.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/reductio/1.0.0/reductio.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> | |
<script lang="babel" type="text/babel" src="index.js"></script> | |
<!--Plugin CSS file with desired skin--> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/> | |
<!--jQuery--> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
<!--Plugin JavaScript file--> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script> | |
<script src="https://d3js.org/d3-color.v1.min.js"></script> | |
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script> | |
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const log = console.log; | |
var focus = new dc.barChart('#focus'); | |
var range = new dc.barChart('#range'); | |
var dim = {}, // Stores all crossfilter dimensions | |
groups = {}, // Stores all crossfilter groups | |
cf; | |
function ordinal_to_linear_group(group, sort) { | |
var _ord2int, _int2ord; | |
return { | |
all: function() { | |
var ret = group.all(); | |
if(sort) // NEW | |
ret = ret.slice().sort(sort); | |
_ord2int = {}; | |
_int2ord = []; | |
ret.forEach(function(d, i) { | |
_ord2int[d.key] = i; | |
_int2ord[i] = d.key; | |
}); | |
return ret; | |
}, | |
ord2int: function(o) { | |
if(!_ord2int) | |
this.all(); | |
return _ord2int[o]; | |
}, | |
int2ord: function(i) { | |
if(!_int2ord) | |
this.all(); | |
return _int2ord[i]; | |
} | |
}; | |
} | |
d3.csv("info.csv").then(function(data) { | |
// console.log("data:",data); | |
data.forEach(d => { | |
// var parts = d.Created.split('/'); | |
d.date = new Date(d.Created)[0]; | |
}); | |
draw_charts(data); | |
}); | |
function draw_charts(data) | |
{ | |
cf = crossfilter(data); // Main crossfilter objects | |
let barTypeDimension = cf.dimension(function(d) { return d.cid}); | |
let barTypeGroup = barTypeDimension.group(); | |
var reducer_time_est_max = reductio().max(function(d) { | |
return parseFloat(d.probability) | |
}); | |
var pred_prob_max = reducer_time_est_max(barTypeGroup).top(Infinity); | |
console.log('==>', pred_prob_max); | |
var group = ordinal_to_linear_group(barTypeGroup, (a,b) => d3.descending(a.value.max, b.value.max)); | |
var linear_domain = [-0.5, 100 - 0.5]; | |
focus | |
.width(1000).height(330) | |
.margins({left: 60, top: 0, right: 10, bottom: 145}) | |
.x(d3.scaleLinear().domain(linear_domain)) | |
.xUnits(dc.units.integers) | |
// .x(d3.scaleOrdinal()) | |
// .xUnits(dc.units.ordinal) | |
.valueAccessor(function(p) { | |
return parseFloat(p.value.max) || 0; | |
}) | |
.ordering(function (d) { | |
console.log("workssss"); | |
return -d.value.max || 0; | |
}) | |
.keyAccessor(kv => group.ord2int(kv.key)) | |
.centerBar(true) | |
.yAxisLabel('counts') | |
.elasticY(true) | |
.brushOn(false) | |
.dimension(barTypeDimension) | |
.mouseZoomable(true) | |
.zoomScale([4,8]) | |
.group(reducer_time_est_max(barTypeGroup)) | |
.title(kv => kv.key) | |
.transitionDuration(0); | |
focus.xAxis() | |
.tickFormat(function(d) { return group.int2ord(d); }); | |
// unfortunately we have to recreate click-selection, since a focus chart | |
// ordinarily filters to the visible area (and we don't want a brush either) | |
var focusFilter = []; | |
focus.filterHandler(function() {}); // disable built-in filtering | |
focus.fadeDeselectedArea = function (brushSelection) { | |
var _chart = this; | |
var bars = _chart.chartBodyG().selectAll('rect.bar'); | |
if (focusFilter.length) { | |
bars.classed(dc.constants.SELECTED_CLASS, function (d) { | |
return focusFilter.includes(d.data.key); | |
}); | |
bars.classed(dc.constants.DESELECTED_CLASS, function (d) { | |
return !focusFilter.includes(d.data.key); | |
}); | |
} else { | |
bars.classed(dc.constants.SELECTED_CLASS, false); | |
bars.classed(dc.constants.DESELECTED_CLASS, false); | |
} | |
}; | |
focus.on('pretransition', function(chart) { | |
chart.selectAll('rect.bar').on('click.ordinal-select', function(d) { | |
var i = focusFilter.indexOf(d.data.key); | |
if(i >= 0) | |
focusFilter.splice(i, 1); | |
else | |
focusFilter.push(d.data.key); | |
if(focusFilter.length) | |
chart.dimension().filterFunction(function(k) { | |
return focusFilter.includes(k); | |
}); | |
else chart.dimension().filter(null); | |
chart.redrawGroup(); | |
}); | |
}); | |
focus.on('preRedraw', function(chart) { | |
var domain = chart.x().domain(), | |
min = Math.ceil(domain[0]), max = Math.floor(domain[1]); | |
chart.xAxis().tickValues(d3.range(min, max+1)); | |
}); | |
range.filterHandler(function() {}); // disable built-in filtering | |
range | |
.margins({left: 74, top: 0, right: 20, bottom: 2}) | |
.width(1000).height(20) | |
.x(d3.scaleLinear().domain(linear_domain)) | |
.xUnits(dc.units.integers) | |
.keyAccessor(kv => group.ord2int(kv.key)) | |
.elasticY(true) | |
.brushOn(true) | |
.dimension(barTypeDimension) | |
.group(barTypeGroup) | |
.valueAccessor(function(p) { | |
return parseFloat(p.value.max) || 0; | |
}) | |
.transitionDuration(0); | |
focus | |
.rangeChart(range) | |
dc.renderAll(); | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
cid | pid | date | types | probability | |
---|---|---|---|---|---|
ID17426 | 8894 | 2018-01-09 06:00:00 | 1 | 0.7 | |
ID17487 | 3602 | 2018-05-19 06:00:00 | 1 | 0.6 | |
ID17501 | 4763 | 2018-09-22 06:00:00 | 1 | 0.59 | |
ID17488 | 3794 | 2018-05-26 06:00:00 | 1 | 0.57 | |
ID17514 | 0506 | 2018-03-26 22:06:00 | 1 | 0.57 | |
ID16288 | 4953 | 2018-02-26 22:26:00 | 1 | 0.56 | |
ID18536 | 3606 | 2018-10-11 05:00:00 | 1 | 0.56 | |
ID18660 | 7520 | 2018-09-15 06:00:00 | 1 | 0.52 | |
ID18487 | 8894 | 2018-11-08 06:00:00 | 1 | 0.52 | |
ID17295 | 7942 | 2018-03-26 22:06:00 | 1 | 0.5 | |
ID16895 | 8866 | 2018-02-26 22:25:00 | 0 | 0.49 | |
ID19026 | 8081 | 2019-02-16 05:01:00 | 0 | 0.49 | |
ID16479 | 7414 | 2018-02-26 22:23:00 | 0 | 0.48 | |
ID17607 | 7202 | 2018-09-22 06:00:00 | 0 | 0.48 | |
ID19123 | 0612 | 2018-11-17 05:01:00 | 0 | 0.48 | |
ID17752 | 9658 | 2018-12-05 06:00:00 | 0 | 0.47 | |
ID16694 | 6140 | 2018-02-26 22:26:00 | 0 | 0.47 | |
ID19280 | 6715 | 2019-09-02 05:01:00 | 0 | 0.47 | |
ID16906 | 6001 | 2018-03-26 22:06:00 | 0 | 0.47 | |
ID17799 | 2893 | 2018-10-13 06:00:00 | 0 | 0.46 | |
ID18804 | 1922 | 2019-02-16 05:01:00 | 0 | 0.45 | |
ID17420 | 5105 | 2018-07-07 06:00:00 | 0 | 0.45 | |
ID16399 | 6651 | 2018-02-26 22:25:00 | 0 | 0.44 | |
ID18563 | 2532 | 2018-09-22 06:00:00 | 0 | 0.44 | |
ID17507 | 7533 | 2018-03-26 22:06:00 | 0 | 0.44 | |
ID16567 | 1229 | 2018-02-26 22:29:00 | 0 | 0.44 | |
ID16137 | 0146 | 2018-02-26 22:25:00 | 0 | 0.43 | |
ID16009 | 5867 | 2018-03-26 22:06:00 | 0 | 0.43 | |
ID18414 | 5074 | 2018-09-15 06:00:00 | 0 | 0.42 | |
ID15516 | 4232 | 2018-02-28 13:45:00 | 0 | 0.42 | |
ID15587 | 8669 | 2018-02-28 13:46:00 | 0 | 0.42 | |
ID16085 | 9501 | 2018-02-26 22:25:00 | 0 | 0.41 | |
ID16726 | 8891 | 2018-03-26 22:06:00 | 0 | 0.41 | |
ID16927 | 8380 | 2018-02-26 22:26:00 | 0 | 0.41 | |
ID16398 | 5178 | 2018-02-26 22:25:00 | 0 | 0.4 | |
ID16965 | 0709 | 2018-02-26 22:26:00 | 0 | 0.4 | |
ID17483 | 6176 | 2018-07-04 06:01:00 | 0 | 0.4 | |
ID18318 | 9447 | 2018-10-13 06:00:00 | 0 | 0.39 | |
ID18503 | 2764 | 2018-01-09 06:00:00 | 0 | 0.39 | |
ID16911 | 6062 | 2018-02-26 22:26:00 | 0 | 0.38 | |
ID16789 | 6329 | 2018-03-26 22:06:00 | 0 | 0.38 | |
ID18569 | 6939 | 2018-10-11 05:00:00 | 0 | 0.38 | |
ID17224 | 1056 | 2018-03-26 22:06:00 | 0 | 0.37 | |
ID17477 | 6200 | 2018-09-06 06:01:00 | 0 | 0.37 | |
ID17433 | 2617 | 2018-10-11 05:00:00 | 0 | 0.37 | |
ID16664 | 2572 | 2018-02-26 22:26:00 | 0 | 0.36 | |
ID17491 | 3562 | 2018-06-23 06:00:00 | 0 | 0.36 | |
ID16565 | 1644 | 2018-03-26 22:06:00 | 0 | 0.36 | |
ID16994 | 6989 | 2018-03-26 22:06:00 | 0 | 0.36 | |
ID17233 | 6067 | 2018-03-26 22:06:00 | 0 | 0.35 | |
ID17949 | 2556 | 2018-05-19 06:00:00 | 0 | 0.34 | |
ID16695 | 6257 | 2018-02-26 22:28:00 | 0 | 0.34 | |
ID17424 | 9501 | 2018-11-08 06:00:00 | 0 | 0.34 | |
ID18064 | 1056 | 2018-05-26 06:00:00 | 0 | 0.34 | |
ID16940 | 0174 | 2018-02-26 22:26:00 | 0 | 0.33 | |
ID18985 | 0832 | 2018-10-11 05:00:00 | 0 | 0.32 | |
ID17874 | 4439 | 2018-05-05 06:00:00 | 0 | 0.32 | |
ID18436 | 8794 | 2018-07-21 06:00:00 | 0 | 0.32 | |
ID16956 | 1644 | 2018-02-26 22:26:00 | 0 | 0.31 | |
ID19142 | 3562 | 2019-02-26 06:00:00 | 0 | 0.31 | |
ID19495 | 3895 | 2019-09-02 05:01:00 | 0 | 0.31 | |
ID18738 | 1922 | 2018-10-13 06:00:00 | 0 | 0.31 | |
ID18249 | 8072 | 2018-11-08 06:00:00 | 0 | 0.31 | |
ID18450 | 8891 | 2018-10-11 05:00:00 | 0 | 0.31 | |
ID18490 | 9763 | 2018-07-28 06:00:00 | 0 | 0.31 | |
ID17378 | 3243 | 2018-03-26 22:06:00 | 0 | 0.3 | |
ID17464 | 2260 | 2018-03-26 22:06:00 | 0 | 0.3 | |
ID17322 | 6257 | 2018-03-26 22:06:00 | 0 | 0.3 | |
ID19281 | 7098 | 2019-02-26 06:00:00 | 0 | 0.3 | |
ID17030 | 7029 | 2018-03-26 22:06:00 | 0 | 0.3 | |
ID17962 | 7601 | 2018-06-16 06:00:00 | 0 | 0.3 | |
ID16397 | 4439 | 2018-02-26 22:25:00 | 0 | 0.3 | |
ID17169 | 8507 | 2018-04-21 06:01:00 | 0 | 0.3 | |
ID17879 | 3546 | 2018-04-26 00:27:00 | 0 | 0.3 | |
ID16809 | 8009 | 2018-03-26 22:06:00 | 0 | 0.3 | |
ID17690 | 8220 | 2018-03-26 22:06:00 | 0 | 0.3 | |
ID17763 | 0906 | 2018-05-26 06:00:00 | 0 | 0.3 | |
ID16605 | 1851 | 2018-02-26 22:23:00 | 0 | 0.29 | |
ID19053 | 6532 | 2019-09-02 05:01:00 | 0 | 0.29 | |
ID17083 | 8808 | 2018-03-26 22:06:00 | 0 | 0.29 | |
ID19169 | 0217 | 2019-09-02 05:01:00 | 0 | 0.28 | |
ID18308 | 8369 | 2018-07-07 06:00:00 | 0 | 0.28 | |
ID16916 | 8316 | 2018-03-26 22:06:00 | 0 | 0.28 | |
ID17569 | 1922 | 2018-03-26 22:06:00 | 0 | 0.28 | |
ID17272 | 5787 | 2018-03-27 07:00:00 | 0 | 0.28 | |
ID16469 | 0453 | 2018-03-26 22:06:00 | 0 | 0.28 | |
ID16824 | 7575 | 2018-02-28 14:08:00 | 0 | 0.27 | |
ID17693 | 8670 | 2018-03-26 22:06:00 | 0 | 0.27 | |
ID19471 | 0612 | 2019-02-26 06:00:00 | 0 | 0.27 | |
ID16894 | 3393 | 2018-03-26 22:06:00 | 0 | 0.27 | |
ID18824 | 3546 | 2019-02-23 05:01:00 | 0 | 0.27 | |
ID18575 | 3330 | 2018-10-13 06:00:00 | 0 | 0.27 | |
ID18446 | 3147 | 2018-04-08 06:00:00 | 0 | 0.27 | |
ID17672 | 3552 | 2018-03-26 22:06:00 | 0 | 0.27 | |
ID19305 | 4963 | 2019-02-26 12:57:00 | 0 | 0.27 | |
ID18063 | 1557 | 2018-09-06 06:01:00 | 0 | 0.26 | |
ID17163 | 3243 | 2018-03-26 22:06:00 | 0 | 0.26 | |
ID18883 | 7219 | 2018-03-11 06:01:00 | 0 | 0.26 | |
ID18198 | 9225 | 2018-09-06 06:01:00 | 0 | 0.26 | |
ID19474 | 2303 | 2019-02-26 05:03:00 | 0 | 0.26 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment