Responsive CartoDB choropleth linked to strip plot

README.md

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).

huur.css

html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
		background-color: #fff;
		font-family: 'Noto Serif', serif;
      }
	  #map {
        height: 400px;
        padding: 0;
        margin-top: 10px;
        cursor: pointer;
      }
		
	div.cartodb-legend.choropleth {
			border: none;
			border-radius: 0;
			padding: 0;
			right: 0px;
			bottom: 17px;
			color: white;
			background-color: transparent;
			min-width: 211px;
			box-shadow: none;
			opacity: 1;
			
		}
		
		div.cartodb-legend ul li {
			border: none;
			color: #777;
			border-radius: 0;
		}
		
		div.cartodb-legend.choropleth li.graph {
			border-radius: 0px;
			border: none;
		}
		
		.leaflet-bar a:first-child, .leaflet-bar a:last-child {
			border-radius: 0;
		}
		
		div.cartodb-searchbox {
			border-radius: 0;
			border: none;
			opacity: 1;
			margin: 10px 10px 0 0;
			width: 240px;
			height: 32px;
		}
		
		div.cartodb-searchbox input.text {
			width: 200px;
			border: none;
			line-height: 24px;
			font-size: 16px;
		}

		g.axis.x path{
			visibility: hidden;
		}

		.tick text {
			color: #2c3b78;
			opacity: 0.2;
		}

huur.js

var bigmapheight = 650,
    smallmapheight = 400
    mapbreakwidth = 720,
    highzoom = 8,
    lowzoom = 7;
var initzoom;
var x;
        
      function main() {
        var hlcolor = "#454443";
        
        /*MAP STUFF*/
        if ($("#map").width() > mapbreakwidth) {
            initzoom = highzoom;
            $("#map").height(bigmapheight);
        }
        else {
            initzoom = lowzoom;
            $("#map").height(smallmapheight);
        }
        
        var map = new L.Map('map', {
            center: [50.45,4.45],
            zoom: initzoom,
            maxZoom: 12,
            scrollWheelZoom: false
          });
          
          var cartocss = $("#choropleth").text();
          
          var layerSource = {
            user_name: 'mediafin',
            type: 'cartodb',
            sublayers: [{
                sql: "SELECT * FROM huurwoningen",
                cartocss: cartocss
            }]
          }

          cartodb.createLayer(map, layerSource)
            .addTo(map)
            .on('done', function(layer) {

                //add legend
                var legend = new cdb.geo.ui.Legend({
                   type: "choropleth",
                   data: [
                            { value: "8,4 %" },
                            { value: "74,4 %" },
                            { name: "color1", value: "#008837" },
                            { name: "color2", value: "#a6dba0" },
                            { name: "color3", value: "#f7f7f7" },
                            { name: "color4", value: "#c2a5cf" },
                            { name: "color5", value: "#7b3294" }
                        ]
                 });
                $('#map').append(legend.render().el);

                var datalayer = layer.getSubLayer(0);
                datalayer.setInteractivity('niscode');
                datalayer.setInteraction(true);

                var updategraph = function(e, latlng, pos, data) {
                    d3.selectAll(".municipline")
                        .style("stroke", function(d) {return d.color; })
                        .style("opacity", 0.6)
                        .attr("y1",50);
                    d3.select("#mun" + data.niscode)
                        .style("stroke", hlcolor)
                        .style("opacity", 1)
                        .attr("y1",5);
                    var name = d3.select("#mun" + data.niscode).data()[0].naam;
                    var huurpercentage = d3.select("#mun" + data.niscode).data()[0].huurperc;
                    var xcoord = d3.select("#mun" + data.niscode).attr("x1");
                    d3.select(".ttip")
                        .text(name + " "  + huurpercentage + " %")  
                        .attr("x", function() {
                            if (xcoord > width/2) {
                                return parseFloat(xcoord) - 5;
                            }
                            else {
                                return parseFloat(xcoord) + 5;
                            }
                        })
                        .style("opacity", 1)
                        .attr("text-anchor", function() {
                            if (xcoord > width/2) {
                                return "end"
                            }
                            else {
                            return "start"
                            }
                        });
                }

                datalayer.on('featureOver', updategraph);
                datalayer.on('featureClick', updategraph);
              
                //add searchbox
                var v = cdb.vis.Overlay.create('search', map.viz, {})
                v.show();
                $('#map').append(v.render().el);
              
            })
            .on('error', function(err) {
              alert("some error occurred: " + err);
            });
          
          //GRAPH STUFF
          var svg = d3.select("#viz")
                        .append("svg");
          var gaxis  = svg.append("g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + 150 + ")")
        //initial draw
        var width = $("#viz").width();
        svg.attr("width", width).attr("height", 170);

        d3.csv("huurperc.csv", function(error, data) {
            data.forEach(function(d) {
                d.huurperc = +d.huurperc;
                if (d.huurperc < 20) { d.color = "#008837"; } else
                if (d.huurperc < 30) { d.color = "#a6dba0"; } else
                if (d.huurperc < 40) { d.color = "#ccc"; } else
                if (d.huurperc < 50) { d.color = "#c2a5cf"; } else
                                     { d.color = "#7b3294"}
            });
            //Scale the range of the data
            x = d3.scale.linear().range([5,width-5]);
            x.domain(d3.extent(data, function(d) {return d.huurperc; }));
            
            var xAxis = d3.svg.axis().scale(x);
            gaxis.call(xAxis);

            var lines  = svg.selectAll("line.municipline")
                .data(data)
                .enter()
                .append("line")
                .attr("class", "municipline")
                .attr("x1", function(d) { return x(d.huurperc) ; })
                .attr("x2", function(d) { return x(d.huurperc) ; })
                .attr("id", function(d) { return "mun" + d.NIS; })
                .attr("y1", 50)
                .attr("y2", 150)
                .style("stroke", function(d) {
                    return d.color;
                })
                .style("stroke-width", 2)
                .style("opacity", 0.6)
                .on("mouseover", function(d) {
                    d3.selectAll("line.municipline")
                        .style("stroke", function(d) {return d.color; })
                        .style("opacity", 0.6)
                        .attr("y1", 50);
                    d3.select(this)
                        .style("stroke", hlcolor)
                        .style("opacity", 1)
                        .attr("y1", 5);
                    if (x(d.huurperc) > width/2) {
                        tooltip.attr("text-anchor", "end")
                    }
                    else {
                        tooltip.attr("text-anchor", "start")
                    }   
                    tooltip.style("opacity", .9)
                        .text(d.naam + " "  + d.huurperc + " %")    
                        .attr("x", function() {
                            if (x(d.huurperc) > width/2) {
                                return x(d.huurperc) - 5;
                            }
                            else {
                                return x(d.huurperc) + 5;
                            }
                        })
                })
                .on("mouseout", function(d) {       
                    d3.select(this)
                        .style("stroke", function(d) {return d.color; })
                        .style("opacity", 0.6)
                        .attr("y1", 50);
                    tooltip.style("opacity", 0);    
                });

            var tooltip = svg.append("text")    
                .attr("class", "ttip")
                .attr("y", 20)
                .attr("x", 50)
                .attr("text-anchor", "start")
                .style("font-size", "18px")
                .style("fill", hlcolor)         
                .style("opacity", 0);

            function redraw() {
                var newwidth = $("#container").width();
                //Redraw map
                if (newwidth < mapbreakwidth) {
                    map.setZoom(lowzoom);
                    $("#map").css('height', smallmapheight);
                };
              
                if (newwidth > mapbreakwidth) {
                    map.setZoom(highzoom);
                    $("#map").css('height', bigmapheight);
                };

                //Redraw chart
                svg.attr("width", newwidth);

                x = d3.scale.linear().range([5,newwidth-5]);
                x.domain(d3.extent(data, function(d) {return d.huurperc; }));
            
                var xAxis = d3.svg.axis().scale(x);
                gaxis.call(xAxis);

                svg.selectAll(".municipline")
                    .attr("x1", function(d) { return x(d.huurperc) ; })
                    .attr("x2", function(d) { return x(d.huurperc) ; })
                    .on("mouseover", function(d) {
                    d3.selectAll("line.municipline")
                        .style("stroke", function(d) {return d.color; })
                        .style("opacity", 0.6)
                        .attr("y1", 50);
                    d3.select(this)
                        .style("stroke", hlcolor)
                        .style("opacity", 1)
                        .attr("y1", 5);
                    if (x(d.huurperc) > newwidth/2) {
                        tooltip.attr("text-anchor", "end")
                    }
                    else {
                        tooltip.attr("text-anchor", "start")
                    }   
                    tooltip.style("opacity", .9)
                        .text(d.naam + " "  + d.huurperc + " %")    
                        .attr("x", function() {
                            if (x(d.huurperc) > newwidth/2) {
                                return x(d.huurperc) - 5;
                            }
                            else {
                                return x(d.huurperc) + 5;
                            }
                        })
                });
            };
            window.addEventListener("resize", redraw);
        });
     }
        
      window.onload = main;

huurperc.csv

index.html

<!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="http://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="http://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>

thumbnail.png