dc.js megamix tall

dc.js megamix

This block shows an imaginary virtual network running on imaginary server farms across North America. Brush the graph to see where the physical machines reside. Zoom the map with shift-drag to see the virtual nodes running in those farms and the health of those nodes.

Admittedly, the main purpose for this block is to put dc.js, dc.leaflet.js, and dc.graph.js all in one block.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>dc.js megamix</title>
  <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css" />
  <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.graph.js/css/dc.graph.css"/>
  <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.leaflet.js/css/leaflet.css" />

<body>
  <div id="under-title" style="height: 215px"></div>
  <div id="graph" style="float:left"></div>
  <div id="pie"></div>
  <div id="scatter"></div>
  <div style="float: left">
    <div id="bars"></div>
    <div id="row" style="clear: both"></div>
  </div>
  <div id="map"></div>
  <script>
    let params = new URLSearchParams(document.location.search.substring(1));
    var center = [39.8333333,-98.585522];

var N = 5000, NW = 100, NE = 90, // number of data, number of (virtual) widgets, number of edges
        rndVW = normal(NW);

var cf = crossfilter(data);
        var locDim = cf.dimension(function(d) { return d.lat + ',' + d.long; }),
            locGroup = locDim.group();

var bubbles = dc_leaflet.bubbleChart('#map')
            .width(600).height(500)
            .center(center)
            .zoom(4)
            .tiles(tiles)
            .dimension(locDim)
            .group(locGroup)
            .r(d3.scale.sqrt().domain([0,100]).range([5,15]))
            .unselectedColor('#68e')
        ;

var healthDim = cf.dimension(function(d) { return d.health; }),
            healthGroup = healthDim.group(function(d) { return Math.floor(d*10)/10; })

var bars = dc.barChart('#bars')
            .width(425).height(250)
            .margins({top: 7, left: 30, right: 10, bottom: 20})
            .dimension(healthDim)
            .group(healthGroup)
            .transitionDuration(2000)
            .x(d3.scale.linear())
            .xUnits(dc.units.fp.precision(0.1))
            .colors(healthColors)
            .colorAccessor(function(d) {
                return d.key;
            })
            .elasticX(true).elasticY(true);

var xDim = cf.dimension(function(d) { return d.x; }),
            xGroup = xDim.group();
        var pie = dc.pieChart('#pie')
            .width(300).height(300)
            .dimension(xDim)
            .group(xGroup)
            .transitionDuration(2000)
            .colors(d3.scale.ordinal().range(d3.shuffle(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00'])));

var yDim = cf.dimension(function(d) { return d.y; }),
            yGroup = xDim.group();
        var row = dc.rowChart('#row')
            .width(425).height(250)
            .margins({top: 0, left: 30, right: 10, bottom: 20})
            .dimension(yDim)
            .group(yGroup)
            .transitionDuration(2000)
            .colors(d3.scale.ordinal().range(d3.shuffle(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628'])));

var abDim = cf.dimension(function(d) { return [d.a, d.b]; }),
            abGroup = abDim.group();
        var scatter = dc.scatterPlot('#scatter')
            .width(300).height(290)
            .margins({top: 0, left: 0, right: 0, bottom: 0})
            .dimension(abDim)
            .group(abGroup)
            .transitionDuration(2000)
            .x(d3.scale.linear())
            .y(d3.scale.linear())
            .elasticX(true)
            .elasticY(true)
            .ordinalColors(['#4daf4a'])
            .symbolSize(2)

dc.renderAll();

Modified http://dc-js.github.io/dc.graph.js/js/chart.registry.js to a secure url

Modified http://dc-js.github.io/dc.graph.js/js/dc.graph.js to a secure url

Modified http://dc-js.github.io/dc.graph.js/js/cola.js to a secure url

Modified http://dc-js.github.io/dc.leaflet.js/js/leaflet-src.js to a secure url

Modified http://dc-js.github.io/dc.leaflet.js/js/dc.leaflet.js to a secure url

https://dc-js.github.io/dc.js/js/d3.js

https://dc-js.github.io/dc.js/js/crossfilter.js

https://dc-js.github.io/dc.js/js/dc.js

https://dc-js.github.io/dc.graph.js/js/chart.registry.js

https://dc-js.github.io/dc.graph.js/js/dc.graph.js

https://dc-js.github.io/dc.graph.js/js/cola.js

https://dc-js.github.io/dc.leaflet.js/js/leaflet-src.js

https://dc-js.github.io/dc.leaflet.js/js/dc.leaflet.js