D3 Radar Chart

README.md

D3 Radar Chart

bl.ocks.org link

A radar chart visualizes multivariate data in a 2D chart of three or more quantitative variables represented on axes.

The project is created using AngularJS and D3.js.

---

Description

• This is a variation of the original and improved D3 radar chart.

• Major improvements include:

  • Refactoring D3 components (levels, labels, axes, polygons, legend), which now can be controlled through the config object.
  • Abstracting the building and rendering portions of the D3 visualization.
  • Aside from the basic stacked view, this variation includes a facetting option to plot the graphs in a facet grid.

• Use the configuration parameters to adjust the plot to your tastes, and you can also choose to view the plots stacked vs facetted.

• The data input has to be a 4-column CSV (headers MUST be included) conforming to the data schema of:

• group (int/string): data to be grouped into an object to plot the required polygon on the radar chart.

• axis (int/string): the axis of the radar charts (dimensions of the multivariate data).

• value (int): the data value of the given record.

• description (int/string): not a mandatory field, and additional columns after this are accepted as well.

• All D3 logic is contained in the radar.js file. You should be able to look at just this file if you intend to use the visualization logic without AngularJS.

---

Files

• index.html: Main HTML file.

• app.js: AngularJS core logic to connect Javascript components and D3 visualization updates with user interactions. The directive onReadFile handles file uploads and the directive radar draws the D3 visualization.

• radar.js: All D3 logic is contained in this file. You should use this file if you are looking solely to use D3 without AngularJS.

• radarDraw.js: This is the directive-link function called by the AngularJS directive radar in app.js. Funnels the dataset from the angular app into the D3 drawing logic called from radar.js.

• style.css: stylesheet containing optional D3 classes that can be adjusted (commented out)

• data.csv: Three CSV-data files for sample downloads and uploads to the app.

---

Other Notes

• You may notice Angular digest errors in the console due to $scope.$watch. Not too familiar on resolving these issues.
• A big help from this fiddle to help implement an AngularJS FileReader.

app.js

(function() {
  angular.module("RadarChart", [])
    .directive("radar", radar)
    .directive("onReadFile", onReadFile)
    .controller("MainCtrl", MainCtrl);

  // controller function MainCtrl
  function MainCtrl($http) {
    var ctrl = this;
    init();


    // function init
    function init() {
      // initialize controller variables
      ctrl.examples = [
        "data_the_avengers",
        "data_plant_seasons",
        "data_car_ratings"
      ];
      ctrl.exampleSelected = ctrl.examples[0];
      ctrl.getData = getData;
      ctrl.selectExample = selectExample;

      // initialize controller functions
      ctrl.selectExample(ctrl.exampleSelected);
      ctrl.config = {
        w: 250,
        h: 250,
        facet: false,
        levels: 5,
        levelScale: 0.85,
        labelScale: 0.9,
        facetPaddingScale: 2.1,
        showLevels: true,
        showLevelsLabels: false,
        showAxesLabels: true,
        showAxes: true,
        showLegend: true,
        showVertices: true,
        showPolygons: true
      };
    }

    // function getData
    function getData($fileContent) {
      ctrl.csv = $fileContent;
    }

    // function selectExample
    function selectExample(item) {
      var file = item + ".csv";
      $http.get(file).success(function(data) {
        ctrl.csv = data;
      });
    }
  }

  // directive function sunburst
  function radar() {
    return {
      restrict: "E",
      scope: {
        csv: "=",
        config: "="
      },
      link: radarDraw
    };
  }


  // directive function onReadFile
  function onReadFile($parse) {
    return {
      restrict: "A",
      scope: false,
      link: function(scope, element, attrs) {
        var fn = $parse(attrs.onReadFile);
        element.on("change", function(onChangeEvent) {
          var reader = new FileReader();
          reader.onload = function(onLoadEvent) {
            scope.$apply(function() {
              fn(scope, {
                $fileContent: onLoadEvent.target.result
              });
            });
          };
          reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);
        });
      }
    };
  }
})();

data_car_ratings.csv

data_plant_seasons.csv

data_the_avengers.csv

index.html

<!DOCTYPE html>
<html ng-app="RadarChart">

<head>
  <meta charset="utf-8">
  <title>D3 Radar Chart</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" />
  <link rel="stylesheet" href="style.css" />
</head>

<body class="container" ng-controller="MainCtrl as radar">

  <!-- header -->
  <header class="page-header">
    <h1>D3 Radar Chart</h1> 
    <p class="text-small">AngularJS application showcasing an interactive D3 radar chart (with facetting).</p>
  </header>


  <!-- main content -->
  <div class="main container">
    <h2>Visualization</h2>

    <!-- visualization -->
    <div class="visualization col-xs-7">
      <p>Select example:
        <select ng-options="example for example in radar.examples" ng-model="radar.exampleSelected" ng-change="radar.selectExample(radar.exampleSelected)"></select>
      </p>
      <div class="visualization">
        <radar csv="radar.csv" config="radar.config"></radar>
      </div>
    </div>


    <!-- configuration -->
    <div class="configuration col-xs-5">
      <form>
        <h3>Configuration Parameters</h3>
        <div class="form-group">
          <label>Width:</label>
          <input type="number" class="form-control-inline" step="50" ng-model="radar.config.w" />
          <label>Height:</label>
          <input type="number" class="form-control-inline" step="50" ng-model="radar.config.h" />
        </div>
        <div class="form-group">
          <label>Levels:</label>
          <input type="number" class="form-control-inline" step="1" ng-model="radar.config.levels" />
        </div>
        <div class="form-group">
          <label>Padding Scale:</label>
          <input type="number" class="form-control-inline" step="0.1" ng-model="radar.config.facetPaddingScale" />
        </div>
        <div class="form-group">
          <label>Label Scale:</label>
          <input type="number" class="form-control-inline" step="0.1" ng-model="radar.config.labelScale" />
        </div>
        <div class="form-group">
          <label class="checkbox"><input type="checkbox" ng-model="radar.config.facet" /><span class="text-primary">Facet Plot</span></label>
          <label class="checkbox"><input type="checkbox" ng-model="radar.config.showLevels" />Levels</label>
          <label class="checkbox"><input type="checkbox" ng-model="radar.config.showAxes" />Axes</label>
          <label class="checkbox"><input type="checkbox" ng-model="radar.config.showVertices" />Vertices</label>
          <label class="checkbox"><input type="checkbox" ng-model="radar.config.showPolygons" />Polygons</label>
          <label class="checkbox"><input type="checkbox" ng-model="radar.config.showLegend" />Legend</label>
          <label class="checkbox"><input type="checkbox" ng-model="radar.config.showLevelsLabels" />Levels Labels</label>
          <label class="checkbox"><input type="checkbox" ng-model="radar.config.showAxesLabels" />Axes Labels</label>
        </div>
        <p class="text-muted">(NOTE: Not all configuration options are shown, refer to <code>README.md</code> or <code>radarDraw.js</code> for more details)</p>
      </form>
    </div>
  </div>
  <hr />


  <!-- description -->
  <div class="description">
    <p>A radar chart visualizes multivariate data in a 2D chart of three or more quantitative variables represented on axes. Use the configuration parameters above to adjust the plot to your tastes, and you can also choose to view the plots stacked vs facetted.</p>
    <p>For custom testing, load up a file conforming to the data schema (see Data section below) or you can test out the following sample files:</p>
    <ul>
      <li><a href="data_the_avengers.csv" target="_blank">The Avengers</a> (Power Grid ratings)</li>
      <li><a href="data_plant_seasons.csv" target="_blank">Plant Seaons</a> (mock data)</li>
      <li><a href="data_car_ratings.csv" target="_blank">Car Ratings</a> (mock data)</li>
    </ul>
    <input id="fileUpload" type="file" on-read-file="radar.getData($fileContent)" />
  </div>
  <hr/>



  <!-- details -->
  <div class="Details">
    <h2>Details</h2>
    <p>This is a variation of the <a href="http://bl.ocks.org/tpreusse/2bc99d74a461b8c0acb1">original</a> and <a href="http://bl.ocks.org/nbremer/6506614">improved</a> D3 radar chart. Main D3 drawing logic is located in the <code>radar.js</code> file.</p>
    <p>Major improvements include:</p>
    <ul>
      <li>Refactoring D3 components (levels, labels, axes, polygons, legend), which now can be controlled through the <code>config</code> object (see configuration parameters).</li>
      <li>Abstracting the building and rendering portions of the D3 visualization.</li>
      <li>Aside from the basic stacked view, this variation includes a facetting option to plot the graphs in a facet grid.</li>
    </ul>
    <p>The data input takes the form of a csv file with the following schema:</p>
    <ul>
      <li><code>group (int/string):</code> data to be grouped into an object to plot the required polygon on the radar chart.</li>
      <li><code>axis (int/string):</code> the axis of the radar charts (dimensions of the multivariate data).</li>
      <li><code>value (int):</code> the data value of the given record.</li>
      <li><code>description (int/string):</code> not a mandatory field, and additional columns after this are accepted as well.</li>
    </ul>
    <hr />
  </div>


  <!-- data/file preview -->
  <div class="preview">
    <h2>Data</h2>
    <pre>{{ radar.csv }}</pre>
  </div>


  <!-- footer -->
  <footer>
    <p><a href="https://gist.github.com/chrisrzhou/2421ac6541b68c1680f8" target="_blank">D3 Radar Chart</a> by chrisrzhou, 2015-01-15
      <br />
      <a href="http://github.com/chrisrzhou" target="_blank"><i class="fa fa-github"></i></a> |
      <a href="http://bl.ocks.org/chrisrzhou" target="_blank"><i class="fa fa-cubes"></i></a> |
      <a href="http://www.linkedin.com/in/chrisrzhou" target="_blank"><i class="fa fa-linkedin"></i></a>
    </p>
  </footer>


  <!-- scripts -->
  <script src="http://code.angularjs.org/1.3.5/angular.js"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="app.js"></script>
  <script src="radar.js"></script>
  <script src="radarDraw.js"></script>
  <script>
    // Hack to make this example display correctly in an iframe on bl.ocks.org
    d3.select(self.frameElement).style("height", "1000px");
  </script>
</body>

</html>

radar.js

/** RadarChart
 *
 * This is the main reuseable function to draw radar charts.
 *
 * The original d3 project is found on: https://github.com/alangrafu/radar-chart-d3
 * This version is based on the cleaned version found on: http://bl.ocks.org/nbremer/6506614
 * with some reorganization of code and added commenting, as well as further function abstractions
 * to allow for addition/removal of visualization components via tweaking configuration parameters.
 *
 **/





var RadarChart = {
  draw: function(id, data, options) {
    
    console.log(data)

    // add touch to mouseover and mouseout
    var over = "ontouchstart" in window ? "touchstart" : "mouseover";
    var out = "ontouchstart" in window ? "touchend" : "mouseout";

    /** Initiate default configuration parameters and vis object
     *
     **/
    // initiate default config
    var w = 300;
    var h = 300;
    var config = {
      w: w,
      h: h,
      facet: false,
      levels: 5,
      levelScale: 0.85,
      labelScale: 1.0,
      facetPaddingScale: 2.5,
      maxValue: 0,
      radians: 2 * Math.PI,
      polygonAreaOpacity: 0.3,
      polygonStrokeOpacity: 1,
      polygonPointSize: 4,
      legendBoxSize: 10,
      translateX: w / 4,
      translateY: h / 4,
      paddingX: w,
      paddingY: h,
      colors: d3.scale.category10(),
      showLevels: true,
      showLevelsLabels: true,
      showAxesLabels: true,
      showAxes: true,
      showLegend: true,
      showVertices: true,
      showPolygons: true
    };

    // initiate main vis component
    var vis = {
      svg: null,
      tooltip: null,
      levels: null,
      axis: null,
      vertices: null,
      legend: null,
      allAxis: null,
      total: null,
      radius: null
    };

    // feed user configuration options
    if ("undefined" !== typeof options) {
      for (var i in options) {
        if ("undefined" !== typeof options[i]) {
          config[i] = options[i];
        }
      }
    }

    render(data); // render the visualization





    /** helper functions
     *
     * @function: render: render the visualization
     * @function: updateConfig: update configuration parameters
     * @function: buildVis: build visualization using the other build helper functions
     * @function: buildVisComponents: build main vis components
     * @function: buildLevels: build "spiderweb" levels
     * @function: buildLevelsLabels: build out the levels labels
     * @function: buildAxes: builds out the axes
     * @function: buildAxesLabels: builds out the axes labels
     * @function: buildCoordinates: builds [x, y] coordinates of polygon vertices.
     * @function: buildPolygons: builds out the polygon areas of the dataset
     * @function: buildVertices: builds out the polygon vertices of the dataset
     * @function: buildLegend:  builds out the legend
     **/
    // render the visualization
    function render(data) {
      // remove existing svg if exists
      d3.select(id).selectAll("svg").remove();
      updateConfig();
      
      if (config.facet) {
        data.forEach(function(d, i) {
          buildVis([d]); // build svg for each data group

          // override colors
          vis.svg.selectAll(".polygon-areas")
            .attr("stroke", config.colors(i))
            .attr("fill", config.colors(i));
          vis.svg.selectAll(".polygon-vertices")
            .attr("fill", config.colors(i));
          vis.svg.selectAll(".legend-tiles")
            .attr("fill", config.colors(i));
        });
      } else {
        buildVis(data); // build svg
      }
    }


    // update configuration parameters
    function updateConfig() {
      // adjust config parameters
      config.maxValue = Math.max(config.maxValue, d3.max(data, function(d) {
        return d3.max(d.axes, function(o) { return o.value; });
      }));
      config.w *= config.levelScale;
      config.h *= config.levelScale;
      config.paddingX = config.w * config.levelScale;
      config.paddingY = config.h * config.levelScale;


      // if facet required:
      if (config.facet) {
        config.w /= data.length;
        config.h /= data.length;
        config.paddingX /= (data.length / config.facetPaddingScale);
        config.paddingY /= (data.length / config.facetPaddingScale);
        config.polygonPointSize *= Math.pow(0.9, data.length);
      }
    }


    //build visualization using the other build helper functions
    function buildVis(data) {
      buildVisComponents();
      buildCoordinates(data);
      if (config.showLevels) buildLevels();
      if (config.showLevelsLabels) buildLevelsLabels();
      if (config.showAxes) buildAxes();
      if (config.showAxesLabels) buildAxesLabels();
      if (config.showLegend) buildLegend(data);
      if (config.showVertices) buildVertices(data);
      if (config.showPolygons) buildPolygons(data);
    }

    // build main vis components
    function buildVisComponents() {
      // update vis parameters
      vis.allAxis = data[0].axes.map(function(i, j) { return i.axis; });
      vis.totalAxes = vis.allAxis.length;
      vis.radius = Math.min(config.w / 2, config.h / 2);

      // create main vis svg
      vis.svg = d3.select(id)
        .append("svg").classed("svg-vis", true)
        .attr("width", config.w + config.paddingX)
        .attr("height", config.h + config.paddingY)
        .append("svg:g")
        .attr("transform", "translate(" + config.translateX + "," + config.translateY + ")");;

      // create verticesTooltip
      vis.verticesTooltip = d3.select("body")
        .append("div").classed("verticesTooltip", true)
        .attr("opacity", 0)
        .style({
          "position": "absolute",
          "color": "black",
          "font-size": "10px",
          "width": "100px",
          "height": "auto",
          "padding": "5px",
          "border": "2px solid gray",
          "border-radius": "5px",
          "pointer-events": "none",
          "opacity": "0",
          "background": "#f4f4f4"
        });


      // create levels
      vis.levels = vis.svg.selectAll(".levels")
        .append("svg:g").classed("levels", true);

      // create axes
      vis.axes = vis.svg.selectAll(".axes")
        .append("svg:g").classed("axes", true);

      // create vertices
      vis.vertices = vis.svg.selectAll(".vertices");

      //Initiate Legend	
      vis.legend = vis.svg.append("svg:g").classed("legend", true)
        .attr("height", config.h / 2)
        .attr("width", config.w / 2)
        .attr("transform", "translate(" + 0 + ", " + 1.1 * config.h + ")");
    }


    // builds out the levels of the spiderweb
    function buildLevels() {
      for (var level = 0; level < config.levels; level++) {
        var levelFactor = vis.radius * ((level + 1) / config.levels);

        // build level-lines
        vis.levels
          .data(vis.allAxis).enter()
          .append("svg:line").classed("level-lines", true)
          .attr("x1", function(d, i) { return levelFactor * (1 - Math.sin(i * config.radians / vis.totalAxes)); })
          .attr("y1", function(d, i) { return levelFactor * (1 - Math.cos(i * config.radians / vis.totalAxes)); })
          .attr("x2", function(d, i) { return levelFactor * (1 - Math.sin((i + 1) * config.radians / vis.totalAxes)); })
          .attr("y2", function(d, i) { return levelFactor * (1 - Math.cos((i + 1) * config.radians / vis.totalAxes)); })
          .attr("transform", "translate(" + (config.w / 2 - levelFactor) + ", " + (config.h / 2 - levelFactor) + ")")
          .attr("stroke", "gray")
          .attr("stroke-width", "0.5px");
      }
    }


    // builds out the levels labels
    function buildLevelsLabels() {
      for (var level = 0; level < config.levels; level++) {
        var levelFactor = vis.radius * ((level + 1) / config.levels);

        // build level-labels
        vis.levels
          .data([1]).enter()
          .append("svg:text").classed("level-labels", true)
          .text((config.maxValue * (level + 1) / config.levels).toFixed(2))
          .attr("x", function(d) { return levelFactor * (1 - Math.sin(0)); })
          .attr("y", function(d) { return levelFactor * (1 - Math.cos(0)); })
          .attr("transform", "translate(" + (config.w / 2 - levelFactor + 5) + ", " + (config.h / 2 - levelFactor) + ")")
          .attr("fill", "gray")
          .attr("font-family", "sans-serif")
          .attr("font-size", 10 * config.labelScale + "px");
      }
    }


    // builds out the axes
    function buildAxes() {
      vis.axes
        .data(vis.allAxis).enter()
        .append("svg:line").classed("axis-lines", true)
        .attr("x1", config.w / 2)
        .attr("y1", config.h / 2)
        .attr("x2", function(d, i) { return config.w / 2 * (1 - Math.sin(i * config.radians / vis.totalAxes)); })
        .attr("y2", function(d, i) { return config.h / 2 * (1 - Math.cos(i * config.radians / vis.totalAxes)); })
        .attr("stroke", "grey")
        .attr("stroke-width", "1px");
    }


    // builds out the axes labels
    function buildAxesLabels() {
      vis.axes
        .data(vis.allAxis).enter()
        .append("svg:text").classed("axis-labels", true)
        .text(function(d) { return d; })
        .attr("text-anchor", "middle")
        .attr("x", function(d, i) { return config.w / 2 * (1 - 1.3 * Math.sin(i * config.radians / vis.totalAxes)); })
        .attr("y", function(d, i) { return config.h / 2 * (1 - 1.1 * Math.cos(i * config.radians / vis.totalAxes)); })
        .attr("font-family", "sans-serif")
        .attr("font-size", 11 * config.labelScale + "px");
    }


    // builds [x, y] coordinates of polygon vertices.
    function buildCoordinates(data) {
      data.forEach(function(group) {
        group.axes.forEach(function(d, i) {
          d.coordinates = { // [x, y] coordinates
            x: config.w / 2 * (1 - (parseFloat(Math.max(d.value, 0)) / config.maxValue) * Math.sin(i * config.radians / vis.totalAxes)),
            y: config.h / 2 * (1 - (parseFloat(Math.max(d.value, 0)) / config.maxValue) * Math.cos(i * config.radians / vis.totalAxes))
          };
        });
      });
    }


    // builds out the polygon vertices of the dataset
    function buildVertices(data) {
      data.forEach(function(group, g) {
        vis.vertices
          .data(group.axes).enter()
          .append("svg:circle").classed("polygon-vertices", true)
          .attr("r", config.polygonPointSize)
          .attr("cx", function(d, i) { return d.coordinates.x; })
          .attr("cy", function(d, i) { return d.coordinates.y; })
          .attr("fill", config.colors(g))
          .on(over, verticesTooltipShow)
          .on(out, verticesTooltipHide);
      });
    }


    // builds out the polygon areas of the dataset
    function buildPolygons(data) {
      vis.vertices
        .data(data).enter()
        .append("svg:polygon").classed("polygon-areas", true)
        .attr("points", function(group) { // build verticesString for each group
          var verticesString = "";
          group.axes.forEach(function(d) { verticesString += d.coordinates.x + "," + d.coordinates.y + " "; });
          return verticesString;
        })
        .attr("stroke-width", "2px")
        .attr("stroke", function(d, i) { return config.colors(i); })
        .attr("fill", function(d, i) { return config.colors(i); })
        .attr("fill-opacity", config.polygonAreaOpacity)
        .attr("stroke-opacity", config.polygonStrokeOpacity)
        .on(over, function(d) {
          vis.svg.selectAll(".polygon-areas") // fade all other polygons out
          .transition(250)
            .attr("fill-opacity", 0.1)
            .attr("stroke-opacity", 0.1);
          d3.select(this) // focus on active polygon
          .transition(250)
            .attr("fill-opacity", 0.7)
            .attr("stroke-opacity", config.polygonStrokeOpacity);
        })
        .on(out, function() {
          d3.selectAll(".polygon-areas")
            .transition(250)
            .attr("fill-opacity", config.polygonAreaOpacity)
            .attr("stroke-opacity", 1);
        });
    }


    // builds out the legend
    function buildLegend(data) {
      //Create legend squares
      vis.legend.selectAll(".legend-tiles")
        .data(data).enter()
        .append("svg:rect").classed("legend-tiles", true)
        .attr("x", config.w - config.paddingX / 2)
        .attr("y", function(d, i) { return i * 2 * config.legendBoxSize; })
        .attr("width", config.legendBoxSize)
        .attr("height", config.legendBoxSize)
        .attr("fill", function(d, g) { return config.colors(g); });

      //Create text next to squares
      vis.legend.selectAll(".legend-labels")
        .data(data).enter()
        .append("svg:text").classed("legend-labels", true)
        .attr("x", config.w - config.paddingX / 2 + (1.5 * config.legendBoxSize))
        .attr("y", function(d, i) { return i * 2 * config.legendBoxSize; })
        .attr("dy", 0.07 * config.legendBoxSize + "em")
        .attr("font-size", 11 * config.labelScale + "px")
        .attr("fill", "gray")
        .text(function(d) {
          return d.group;
        });
    }


    // show tooltip of vertices
    function verticesTooltipShow(d) {
      vis.verticesTooltip.style("opacity", 0.9)
        .html("<strong>Value</strong>: " + d.value + "<br />" +
          "<strong>Description</strong>: " + d.description + "<br />")
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY) + "px");
    }

    // hide tooltip of vertices
    function verticesTooltipHide() {
      vis.verticesTooltip.style("opacity", 0);
    }
  }
};

radarDraw.js

function radarDraw(scope, element) {
  /**
   * Angular variables
   *
   */
   
  // watch for changes on scope.data
  scope.$watch("[csv, config]", function() {
    var csv = scope.csv;
    var config = scope.config;
    var data = csv2json(csv);
    RadarChart.draw(element[0], data, config);  // call the D3 RadarChart.draw function to draw the vis on changes to data or config
  });


  // helper function csv2json to return json data from csv
  function csv2json(csv) {
    csv = csv.replace(/, /g, ","); // trim leading whitespace in csv file
    var json = d3.csv.parse(csv); // parse csv string into json
    // reshape json data
    var data = [];
    var groups = []; // track unique groups
    json.forEach(function(record) {
      var group = record.group;
      if (groups.indexOf(group) < 0) {
        groups.push(group); // push to unique groups tracking
        data.push({ // push group node in data
          group: group,
          axes: []
        });
      };
      data.forEach(function(d) {
        if (d.group === record.group) { // push record data into right group in data
          d.axes.push({
            axis: record.axis,
            value: parseInt(record.value),
            description: record.description
          });
        }
      });
    });
    return data;
  }
}

style.css

body {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  padding-top: 10px;
  padding-bottom: 100px;
}
html {
  overflow-y: scroll;
}
h1 {
  color: steelblue;
  font-weight: 800;
  font-size: 1.7em;
}
h2 {
  color: steelblue;
  font-size: 1.3em;
  padding-bottom: 10px;
}
h3 {
  color: gray;
  font-size: 1.2em;
  padding-bottom: 10px;
}
footer a,
footer a:hover, footer a:visited {
  color: #D2A000;
}
.text-small {
  font-size: 12px;
  font-style: italic;
}
footer {
  color: white;
  padding-top: 5px;
  border-top: 1px solid gray;
  font-size: 12px;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 50px;
  width: 100%;
  background: black;
  text-align: center;
}
pre {
  height: 200px;
  font-size: 9px;
  overflow-y: scroll;
}
.form-control-inline {
  display: inline;
  width: 40px;
  margin-right: 5px;
}
.visualization {
}
.configuration {
  font-size: 0.8em;
  width: 250px;
  border: 1px solid #ddd;
  padding-left: 20px;
  margin-bottom: 20px;
}
.checkbox {
  margin-left: 20px;
}
/* Customizable classes used in D3 vis, uncomment to customize
.svg-vis {
  background-color: gray;
  opacity: 0.5;
}
.verticesTooltip {
  position: absolute;
  color: red;
  font-size: 12px;
  width: 100px;
  height: auto;
  padding: 5px;
  border: 2px solid gray;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
  background: #f4f4f;
}
.level-lines {
  stroke: red;
  stroke-width: 1px;
}
.level-labels {
  fill: red;
  font-size: 12px;
}
.axis-lines {
  stroke: blue;
  stroke-width: 2px;
}
.axis-labels {
  fill: blue;
  font-size: 12px;
}
.polygon-vertices {
  fill-opacity: 0.6;
}
.polygon-areas {
  fill-opacity: 0.6;
}
.legend-tiles {
  fill-opacity: 0.3;
}
.legend-labels {
  font-size: 15px;
}
*/

thumbnail.png