MarcBalaban/frontendChoropleth.js

## frontendChoropleth.js
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MapD</title>
    <meta charset="UTF-8">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
    <style>
      .title {
        font-weight: bold;
        text-align:center;
      }
      .mapd {
        position: relative;
        top: 2px;
      }
      .search{
        display: inline-block;
        margin-top: 12px;
        margin-left: 50px;
      }
      .data-count {
        padding-right:20px;
      }
      .filter-count {
        font-weight: bold;
        color:  #45B1E8;
      }
    </style>
  </head>
  <body>
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header" style="margin-top:10px">
            <img alt="Brand" src="images/favicon.png" height="30" width="30">
            <span class="mapd">MapD Demo</span>
          </div>
        </div>
      </nav>
      <div class="col-xs-12">
        <div class="title">Frontend Choropleth Example</div>
        <div id="choropleth-example"></div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="assets/app.bundle.js"></script>

    <script>

  var globalGeocoder = null;

  function createCharts(crossFilter, con, tableName) {
    var w = document.documentElement.clientWidth - 30;
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 150;


    const DIMENSION_COLUMN = "dest_state"
    const REDUCE_EXPRESSION = [{expression: "*", agg_mode: "Count", name: "val", isComposite: false}]
    const JOIN_KEY = "abbr"

    const dimension = crossFilter.dimension([DIMENSION_COLUMN])
    const group = dimension.group().reduce(REDUCE_EXPRESSION)

    const Choropleth = dc.geoChoroplethChart(document.querySelector('#choropleth-example'))

    Choropleth
      .dimension(dimension)
      .group(group)
      .width(w)
      .height(h)

    fetch('json/us-states.json').then(res => {
      return res.json()
    }).then(geo => {
      return Choropleth.overlayGeoJson(geo.features, "states", data => data.properties[JOIN_KEY])
    }).then(() => {
      dc.renderAllAsync()
    })
  }


  function init() {
    // A MapdCon instance is used for performing raw queries on a MapD GPU database.
    new MapdCon()
      .protocol("https")
      .host("metis.mapd.com")
      .port("443")
      .dbName("mapd")
      .user("mapd")
      .password("HyperInteractive")
      .connect(function(error, con) {
        // Get a table from the database
        var tableName = "flights_donotmodify";
        // A CrossFilter instance is used for generating the raw query strings for your MapdCon.
        var crossFilter = crossfilter.crossfilter(con, tableName)
          .then(function(cf) {
            createCharts(cf, con, tableName)
          });
      });
  }

    document.addEventListener('DOMContentLoaded', init, false);

    </script>
  </body>
</html>

## us-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-states.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>MapD</title>
	<meta charset="UTF-8">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
	<style>
	.title {
	font-weight: bold;
	text-align:center;
	}
	.mapd {
	position: relative;
	top: 2px;
	}
	.search{
	display: inline-block;
	margin-top: 12px;
	margin-left: 50px;
	}
	.data-count {
	padding-right:20px;
	}
	.filter-count {
	font-weight: bold;
	color: #45B1E8;
	}
	</style>
	</head>
	<body>
	<nav class="navbar navbar-default">
	<div class="container-fluid">
	<div class="navbar-header" style="margin-top:10px">
	<img alt="Brand" src="images/favicon.png" height="30" width="30">
	<span class="mapd">MapD Demo</span>
	</div>
	</div>
	</nav>
	<div class="col-xs-12">
	<div class="title">Frontend Choropleth Example</div>
	<div id="choropleth-example"></div>
	</div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
	<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
	<script src="assets/app.bundle.js"></script>

	<script>

	var globalGeocoder = null;

	function createCharts(crossFilter, con, tableName) {
	var w = document.documentElement.clientWidth - 30;
	var h = Math.max(document.documentElement.clientHeight, window.innerHeight \|\| 0) - 150;


	const DIMENSION_COLUMN = "dest_state"
	const REDUCE_EXPRESSION = [{expression: "*", agg_mode: "Count", name: "val", isComposite: false}]
	const JOIN_KEY = "abbr"

	const dimension = crossFilter.dimension([DIMENSION_COLUMN])
	const group = dimension.group().reduce(REDUCE_EXPRESSION)

	const Choropleth = dc.geoChoroplethChart(document.querySelector('#choropleth-example'))

	Choropleth
	.dimension(dimension)
	.group(group)
	.width(w)
	.height(h)

	fetch('json/us-states.json').then(res => {
	return res.json()
	}).then(geo => {
	return Choropleth.overlayGeoJson(geo.features, "states", data => data.properties[JOIN_KEY])
	}).then(() => {
	dc.renderAllAsync()
	})
	}


	function init() {
	// A MapdCon instance is used for performing raw queries on a MapD GPU database.
	new MapdCon()
	.protocol("https")
	.host("metis.mapd.com")
	.port("443")
	.dbName("mapd")
	.user("mapd")
	.password("HyperInteractive")
	.connect(function(error, con) {
	// Get a table from the database
	var tableName = "flights_donotmodify";
	// A CrossFilter instance is used for generating the raw query strings for your MapdCon.
	var crossFilter = crossfilter.crossfilter(con, tableName)
	.then(function(cf) {
	createCharts(cf, con, tableName)
	});
	});
	}

	document.addEventListener('DOMContentLoaded', init, false);

	</script>
	</body>
	</html>