Styling Canvas Elements - d3.carto

Canvas element styling with d3.carto.map does not use d3.selectAll like SVG element styling because these aren't SVG elements. Here we see 6000+ cities between 50k and 1m population each styled based on various attributes.

This relies on using cartoLayer.markerColor() and cartoLayer.markerSize() and setting them to function based on the data. If you don't set markerColor, then it will rely on CSS styling of the associated class.

This example is also available in transform mode.

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Improved Canvas Rendering - d3.carto</title>
  <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="d3map.css" />
    <link type="text/css" rel="stylesheet" href="https://raw.githubusercontent.com/emeeks/d3-carto-map/master/examples/example.css" />
</head>
<style>
  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
  }

#map {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  
  .region {
    stroke: white;
  }
  
</style>
<script>

function makeSomeMaps() {
    pathSource = 0;

map = d3.carto.map();
    
    var regionColor = ["lightgray","#feedde","#fdbe85","#fd8d3c","#e6550d","#a63603"];
    var colorScale = d3.scale.linear().domain([0,5,26]).range(["green","yellow", "red"])
    var sizeScale = d3.scale.linear().domain([50,1000]).range([1,6])

d3.select("#map").call(map);
    map.mode("globe");
    map.zoom().scale(350);

//    map.centerOn([-88,39],"latlong");
//    map.setScale(2);

wcLayer = d3.carto.layer.tile();
    wcLayer
    .tileType("mapbox")
    .path("elijahmeeks.map-azn21pbi")
    .label("Base")
    .visibility(true)

regionLayer = d3.carto.layer.geojson();
    regionLayer
    .path("ecoregions.json")
    .label("Regions")
    .cssClass("region")
    .renderMode("canvas")
    .markerColor(function(d) {return regionColor[d.a]})
    .clickableFeatures(true);
    
    csvLayer = d3.carto.layer.csv();
    csvLayer
    .path("all_sites.csv")
    .label("Cities")
    .cssClass("pinkcircle")
    .renderMode("canvas")
    .markerSize(function(d) {return sizeScale(d.pop)})
    .markerColor(function(d) {return colorScale(d.capacity)})
    .x(function(d) {return d.xcoord})
    .y(function(d) {return d.ycoord});
    
    map.addCartoLayer(wcLayer).addCartoLayer(regionLayer).addCartoLayer(csvLayer);
    map.refresh();

}
</script>
<body onload="makeSomeMaps()">
<div id="map">
</div>
<footer>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="https://d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/tile.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.geo.raster.js" type="text/javascript">
</script>
<script src="https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js" type="text/javascript">
</script>
</footer>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js to /emeeks/f3105fda25ff785dc5ed/example/tile.js

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js to /emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js to /emeeks/f3105fda25ff785dc5ed/example/d3.geo.raster.js

Updated missing url https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js to https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://d3js.org/d3.geo.projection.v0.min.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js

https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js