range_bar_chart

forked from ninjakx's block: range_bar_chart

<!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="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>
    
    <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">
    
    <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>

<div>
  <a id="reset-focus" href="#" class="reset">reset</a>&emsp;&emsp;
  <a id="reset-all" href="javascript:dc.filterAll(); dc.redrawAll();" class="reset">reset all</a>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    
    <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>

Updated missing url https://rawgit.com/crossfilter/reductio/master/reductio.min.js to https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.min.js

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.js to https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeslider.js

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js to https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeslider.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js

https://rawgit.com/crossfilter/reductio/master/reductio.min.js

https://cdn.jsdelivr.net/underscorejs/1.5.2/underscore-min.js

https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.4.0/coffee-script.min.js

https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js

https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/dc/3.2.1/dc.js

https://cdnjs.cloudflare.com/ajax/libs/reductio/1.0.0/reductio.js

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js

https://d3js.org/d3-color.v1.min.js

https://d3js.org/d3-interpolate.v1.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js