D3 Examples - Responsive CartoDB choropleth linked to strip plot

Responsive CartoDB choropleth linked to strip plot

A choropleth map created in CartoDB.js linked to a D3.js strip plot. Open to view in full.

For now the link is only one way (hover/click on the map updates the strip plot). Data is also duplicated (it lives in CartoDB and in a csv).

Both map and plot are responsive and respond to resize. The map responsiveness comes from my block Responsive map with Cartodb/Leaflet.

Integretad live on tijd.be (Dutch) and on lecho.be (French).

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title>Choropleth strip plot</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
      
    <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <link rel="stylesheet" href="huur.css" />
    <link href='https://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>
    
    <style type="cartocss/text" id="choropleth">
      #huurwoningen{
        polygon-fill: #0080ff;
        polygon-opacity: 0.8;
        line-color: #ccc;
        line-width: 0.5;
        line-opacity: 1;
      }
      #huurwoningen [ perchuur <= 75] {
         polygon-fill: #7b3294;
      }
      #huurwoningen [ perchuur <= 50] {
         polygon-fill: #c2a5cf;
      }
      #huurwoningen [ perchuur <= 40] {
         polygon-fill: #eee;
      }
      #huurwoningen [ perchuur <= 30] {
         polygon-fill: #a6dba0;
      }
      #huurwoningen [ perchuur <= 20] {
         polygon-fill: #008837;
      }
    </style>
      
  </head>
  <body>
    <div id="container">
            <div id="map">
            </div>
            <div id="viz">
            </div>  
    </div>
    <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="huur.js"></script>
  </body>
</html>
    