Changing markers with d3.carto.map.
In this example, the buttons show different markers used for the points, either simple SVG shapes, like the rectangle marker, or scaled circles, or images, or SVG paths either from an icon or from another D3 layout (a pie chart in this case). The Circle Marker button randomly selects one of several data attributes for each point and sizes the circle by that attribute, whereas the pie marker button creates a pie chart based off those attributes.
Any point layer added with d3.carto.layer.csv or d3.carto.layer.xyArray automatically creates SVG circle elements for each point. These reside in a g.marker that you can access and replace the contents of in the same way you would with any other d3 data visualization. In this example I use d3.selectAll because there’s only one points layer, but each layer has a .g() function that gives you access to the parent g element of that layer, which you can then use to select some or all of the child g.marker elements of that specific layer and change, update or replace content.
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title>Changing Markers - 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;
}
.reproject {
position: absolute;
z-index: 99;
left: 50px;
top: 250px;
}
.metro {
fill: rgba(255,0,255,.5);
stroke: darkred;
stroke-width: 1
}
.markerButton {
position: fixed;
top: 20px;
cursor: pointer;
z-index: 99;
}
</style>
<script>
function pngMarker() {
d3.selectAll("g.marker").selectAll("*").remove();
d3.selectAll("g.marker").append("image").attr("xlink:href", "icon_2330.png")
.attr("height", 20).attr("width", 20)
.attr("x", -10).attr("y", -10)
}
function rectangleMarker() {
d3.selectAll("g.marker").selectAll("*").remove();
d3.selectAll("g.marker").append("rect").attr("height", 10).attr("width", 10)
.attr("x", -5)
.attr("y", -5)
.style("fill", "yellow")
.style("stroke", "black")
.style("stroke-width", "1px")
}
function circleMarker() {
var sizeScale = d3.scale.linear().domain([0,100,2000]).range([2,10,20]).clamp(true);
var randomDatapoint = "r" + Math.ceil(Math.random() * 7);
d3.selectAll("g.marker").selectAll("*").remove();
d3.selectAll("g.marker").append("circle")
.attr("class", "metro")
.attr("r", function(d) {return sizeScale(d[randomDatapoint])})
}
function svgMarker() {
d3.selectAll("g.marker").selectAll("*").remove();
d3.html("icon_2330.svg", loadSVG);
function loadSVG(svgData) {
d3.select(svgData).selectAll("path").each(function(d) {
var that = this;
d3.selectAll("g.marker").each(
function() {
d3.select(this).node().appendChild(that.cloneNode(true));
}
)
})
d3.selectAll("g.marker").select("path");
}
}
function pieMarker() {
d3.selectAll("g.marker").selectAll("*").remove();
var pieChart = d3.layout.pie();
var newArc = d3.svg.arc().outerRadius(10);
var set3 = ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494"];
pieChart.value(function(d) {return d});
d3.selectAll("g.marker").each(function(d) {
var pieData = d3.values(d).splice(3,7);
var pieChart = d3.layout.pie();
d3.select(this).append("circle").attr("r",11).style("fill", "black").style("stroke","black")
d3.select(this).selectAll("path").data(pieChart(pieData)).enter().append("path").attr("d", function(d) {return newArc(d)})
.style("fill", function(d,i) {return set3[i]})
.style("stroke", function(d,i) {return set3[i]})
.style("stroke-width", "1px")
})
}
function makeSomeMaps() {
map = d3.carto.map();
d3.select("#map").call(map);
map.centerOn([-99,39],"latlong");
map.setScale(4);
map.refresh();
wcLayer = d3.carto.layer.tile();
wcLayer
.tileType("stamen")
.path("watercolor")
.label("Watercolor")
.visibility(true)
cityLayer = d3.carto.layer.csv();
cityLayer
.path("cities.csv")
.label("Metro Areas")
.cssClass("metro")
.renderMode("svg")
.x("x")
.y("y")
.clickableFeatures(true)
.on("load", function(){console.log(cityLayer.dataset())});
map.addCartoLayer(wcLayer).addCartoLayer(cityLayer);
}
</script>
<body onload="makeSomeMaps()">
<div id="map">
<button style="left: 140px;" class="markerButton" onclick="rectangleMarker();">Rectangle Marker</button>
<button style="left: 250px;" class="markerButton" onclick="pngMarker();">Image Marker</button>
<button style="left: 340px;" class="markerButton" onclick="circleMarker();">Circle Marker</button>
<button style="left: 428px;" class="markerButton" onclick="svgMarker();">SVG Marker</button>
<button style="top:50px; left: 140px;" class="markerButton" onclick="pieMarker();">Pie Marker</button>
</div>
<footer>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="//d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
<script src="//d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
</script>
<script src="//bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js" type="text/javascript">
</script>
<script src="//bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js" type="text/javascript">
</script>
<script src="//bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js" type="text/javascript">
</script>
<script src="https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js" type="text/javascript">
</script>
</footer>
</body>
</html>
name,state,total,r1,r2,r3,r4,r5,r6,r7,y,x
Albany-Schenectady-Troy,NY,871,739,67,2,27,0,21,36,42.9370842,-75.6107025
Albuquerque,NM,887,618,24,52,18,1,38,414,35.0841789,-106.6486435
Allentown-Bethlehem-Easton,PA-NJ,821,694,41,2,20,0,19,107,40.6026001,-75.4702606
Atlanta-Sandy Springs-Marietta,GA,5269,2920,1708,18,254,3,126,547,33.7312012,-84.3832016
Austin-Round Rock-San Marcos,TX,1716,1250,127,13,82,1,55,538,29.8860302,-97.9293365
Bakersfield-Delano,CA,840,500,49,13,35,1,38,413,35.7740784,-119.2718506
Baltimore-Towson,MD,2710,1684,779,9,123,1,68,124,39.2881012,-76.6108017
Baton Rouge,LA,802,480,286,2,14,0,10,27,30.4433403,-91.1869888
Birmingham-Hoover,AL,1128,753,318,3,14,1,13,49,32.7665443,-86.8402863
Boston-Cambridge-Quincy,MA-NH,4552,3588,331,11,295,1,118,411,42.3586617,-71.0567398
Bridgeport-Stamford-Norwalk,CT,917,686,99,2,42,0,24,155,41.281141,-73.118242
Buffalo-Niagara Falls,NY,1136,927,139,8,26,0,21,46,42.9306984,-78.7372589
Charlotte-Gastonia-Rock Hill,NC-SC,1758,1145,421,9,55,1,39,173,35.2228584,-80.8379593
Chicago-Joliet-Naperville,IL-IN-WI,9461,6184,1646,37,533,3,230,1957,41.8842506,-87.6324463
Cincinnati-Middletown,OH-KY-IN,2130,1766,256,4,40,1,39,55,39.1071281,-84.5041275
Cleveland-Elyria-Mentor,OH,2077,1538,417,4,41,0,42,98,41.5047493,-81.6907196
Columbia,SC,768,464,255,3,13,1,15,39,33.9988213,-81.045372
Columbus,OH,1837,1424,274,4,57,1,46,66,39.9619904,-83.0027466
Dallas-Fort Worth-Arlington,TX,6372,4161,962,43,342,6,180,1752,32.7630005,-97.0326004
Dayton,OH,842,673,126,2,15,0,19,17,39.7591095,-84.1944427
Denver-Aurora-Broomfield,CO,2543,1983,143,25,94,3,91,571,39.644869,-105.044314
Detroit-Warren-Livonia,MI,4296,3011,980,15,141,1,95,168,42.3423004,-83.071701
El Paso,TX,801,657,25,6,8,1,20,658,31.7591591,-106.4874878
Fresno,CA,930,515,50,16,89,1,42,468,36.7406807,-119.7857285
Grand Rapids-Wyoming,MI,774,643,62,4,15,0,21,65,42.9664116,-85.6711807
Hartford-West Hartford-East Hartford,CT,1212,932,132,3,47,0,30,151,41.718336,-72.742801
Honolulu,HI,953,199,19,2,418,91,213,77,21.3048496,-157.8577576
Houston-Sugar Land-Baytown,TX,5947,3581,1026,38,389,4,180,2099,29.7357998,-95.3063965
Indianapolis-Carmel,IN,1756,1353,263,5,40,1,38,108,39.9198036,-86.2817993
Jacksonville,FL,1346,940,293,5,46,1,35,93,30.3314705,-81.6562195
Kansas City,MO-KS,2035,1597,255,10,46,3,56,167,39.102951,-94.5830765
Las Vegas-Paradise,NV,1951,1188,204,14,169,14,99,569,36.097799,-115.172816
Los Angeles-Long Beach-Santa Ana,CA,12829,6767,908,91,1885,35,567,5701,33.8863983,-118.0449982
Louisville/Jefferson County,KY-IN,1284,1037,176,3,20,1,26,50,38.2548599,-85.7664032
McAllen-Edinburg-Mission,TX,775,682,5,3,7,0,10,702,26.2153301,-98.3257904
Memphis,TN-MS-AR,1316,631,601,3,24,1,18,65,35.1497612,-90.0492477
Miami-Fort Lauderdale-Pompano Beach,FL,5565,3914,1169,16,126,2,140,2313,26,-80.1947021
Milwaukee-Waukesha-West Allis,WI,1556,1147,261,8,46,1,36,148,44.6417885,-89.7367401
Minneapolis-St. Paul-Bloomington,MN-WI,3280,2657,243,23,188,1,91,176,44.9790306,-93.2649307
Nashville-Davidson–Murfreesboro–Franklin,TN,1590,1222,242,5,36,1,33,105,36.1678391,-86.7781601
New Haven-Milford,CT,862,645,110,2,30,0,23,130,41.2271385,-73.0127411
New Orleans-Metairie-Kenner,LA,1168,680,397,5,32,1,23,92,30.005255,-90.068008
New York-Northern New Jersey-Long Island,NY-NJ-PA,18897,11178,3363,93,1878,9,613,4328,40.7820015,-73.8317032
Oklahoma City,OK,1253,901,131,51,35,1,65,142,35.4720306,-97.5210724
Omaha-Council Bluffs,NE-IA,865,714,68,5,18,1,22,78,41.2606888,-95.9405899
Orlando-Kissimmee-Sanford,FL,2134,1494,345,9,85,2,69,539,28.4930878,-82.47229
Oxnard-Thousand Oaks-Ventura,CA,823,566,15,8,55,2,37,332,37.2551003,-119.6175232
Philadelphia-Camden-Wilmington,PA-NJ-DE-MD,5965,4068,1242,16,296,2,139,468,39.9522781,-75.1624527
Phoenix-Mesa-Glendale,AZ,4193,3059,208,99,139,9,146,1236,33.5385818,-112.1862793
Pittsburgh,PA,2356,2069,197,3,41,0,37,30,40.4383392,-79.997467
Portland-Vancouver-Hillsboro,OR-WA,2226,1804,64,21,127,10,91,242,45.5117912,-122.6756287
Providence-New Bedford-Fall River,RI-MA,1601,1342,78,8,41,1,49,164,41.8238716,-71.4119873
Raleigh-Cary,NC,1130,763,228,6,50,0,27,115,35.252018,-80.795825
Richmond,VA,1258,780,375,5,39,1,29,63,37.540699,-77.4336472
Riverside-San Bernardino-Ontario,CA,4225,2488,322,46,259,14,207,1996,33.9816284,-117.3738785
Rochester,NY,1054,855,123,3,27,0,24,65,43.1557999,-77.6163177
Sacramento–Arden-Arcade–Roseville,CA,2149,1390,158,22,256,16,127,434,37.2551003,-119.6175232
St. Louis,MO-IL,2813,2153,516,7,60,1,51,72,38.6277504,-90.1995621
Salt Lake City,UT,1124,922,17,10,35,16,35,187,40.7603111,-111.8882217
San Antonio-New Braunfels,TX,2143,1617,141,17,45,3,70,1158,29.7082996,-98.1188126
San Diego-Carlsbad-San Marcos,CA,3095,1981,158,26,336,15,158,991,32.7131004,-117.1589966
San Francisco-Oakland-Fremont,CA,4335,2240,364,25,1006,32,240,939,37.7766991,-122.4199982
San Jose-Sunnyvale-Santa Clara,CA,1837,872,47,14,572,7,90,510,34.261243,-118.596455
Seattle-Tacoma-Bellevue,WA,3440,2475,192,37,393,28,184,309,47.6001015,-122.3280029
Tampa-St. Petersburg-Clearwater,FL,2783,2193,329,10,81,2,73,452,27.8731003,-82.5101013
Tucson,AZ,980,729,35,33,26,2,36,339,32.22155,-110.9697571
Tulsa,OK,937,665,79,77,17,1,60,78,36.1497383,-95.9933319
Virginia Beach-Norfolk-Newport News,VA-NC,1672,997,522,7,58,2,57,90,36.7550201,-76.0591965
Washington-Arlington-Alexandria,DC-VA-MD-WV,5582,3059,1438,23,517,4,206,771,38.8903694,-77.0319595
Worcester,MA,799,683,33,2,32,0,19,75,42.2634087,-71.8021927
path,circle,rect,polygon,ellipse,line {
vector-effect: non-scaling-stroke;
}
#d3MapZoomBox {
position: absolute;
z-index: 10;
height: 100px;
width: 25px;
top: 10px;
right: 50px;
}
#d3MapZoomBox > button {
font-size:22px;
font-weight:900;
border: none;
height:25px;
width:25px;
background: rgba(35,31,32,.85);
color: white;
padding: 0;
cursor: pointer;
}
#d3MapZoomBox > button:hover {
background: black;
}
#d3MapZoomBox > button#left {
position: absolute;
left: -25px;
top: 60px;
}
#d3MapZoomBox > button#right {
position: absolute;
right: -25px;
top: 60px;
}
#d3MapLayerBox {
position: absolute;
z-index: 10;
height: 100px;
width: 120px;
top: 10px;
left: 10px;
overflow: auto;
color: white;
background: rgba(35,31,32,.85);
}
#d3MapLayerBox > div {
margin: 5px;
border: none;
}
#d3MapLayerBox ul {
list-style: none;
padding: 0;
margin: 0;
cursor: pointer;
}
#d3MapLayerBox li {
list-style: none;
padding: 0;
}
#d3MapLayerBox li:hover {
font-weight:700;
}
#d3MapLayerBox li input {
cursor: pointer;
}
div.d3MapModal {
position: absolute;
z-index: 11;
background: rgba(35,31,32,.90);
top: 50px;
left: 50px;
color: white;
max-width: 400px;
}
div.d3MapModalContent {
width:100%;
height: 100%;
overflow: auto;
}
div.d3MapModalContent > p {
padding: 0px 20px;
margin: 5px 0;
}
div.d3MapModalContent > h1 {
padding: 0px 20px;
font-size: 20px;
}
div.d3MapModalArrow {
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid rgba(35,31,32,.90);
position: absolute;
bottom: -20px;
left: 33px;
}
#d3MapSVG {
}
rect.minimap-extent {
fill: rgba(200,255,255,0.35);
stroke: black;
stroke-width: 2px;
stroke-dasharray: 5 5;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
width="100px"
height="69.945px"
viewBox="-16.567 20.027 100 69.945"
enable-background="new -16.567 20.027 100 69.945"
xml:space="preserve"
inkscape:version="0.48.2 r9819"
sodipodi:docname="icon_2330.svg"><metadata
id="metadata2996"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs2994" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1108"
inkscape:window-height="762"
id="namedview2992"
showgrid="false"
inkscape:zoom="2.2594662"
inkscape:cx="50"
inkscape:cy="34.9725"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="g2986" />
<g
id="g2986">
<rect
x="-2.6407242"
y="8.9918394"
width="4.8754587"
height="3.971818"
id="rect2988" />
<path
d="M 9.1451812,-5.64278 H -9.5519687 c -2.1733153,0 -3.9518683,1.778553 -3.9518683,3.952132 V -0.47683596 3.458538 7.411203 h 3.9518683 6.910977 4.87546 6.9104465 3.9523982 V 3.458804 -0.47657096 -1.690381 C 13.09758,-3.864227 11.319292,-5.64278 9.1451812,-5.64278 z m -18.0023289,2.229176 c 1.420235,0 2.580843,1.161406 2.580843,2.58190804 V 4.907503 h -5.1619533 v -5.73919896 c 0,-1.41996904 1.160874,-2.58190804 2.5811103,-2.58190804 z M 10.460607,2.957372 c 0,0.337834 -0.277982,0.613689 -0.6142198,0.613689 H 8.6730104 c -0.338101,0 -0.614752,-0.275855 -0.614752,-0.613689 V 1.030651 h -9.03322009 c -0.44902601,0 -0.81160001,-0.36310496 -0.81160001,-0.81213296 0,-0.449293 0.362574,-0.8124 0.81160001,-0.8124 H 8.6732767 9.5702673 9.8461208 c 0.3365042,0 0.6142202,0.275056 0.6142202,0.613157 V 2.957372 h 2.66e-4 z"
id="path2990"
inkscape:connector-curvature="0" />
</g>
</svg>