Clustering in d3.carto.map.
If you set the .cluster() property of a cartoLayer to true, it will cluster bsaed on a precomputed quadtree.
This is still very early on but it should get better.
Clustering in d3.carto.map.
If you set the .cluster() property of a cartoLayer to true, it will cluster bsaed on a precomputed quadtree.
This is still very early on but it should get better.
path,circle,rect,polygon,ellipse,line { | |
vector-effect: non-scaling-stroke; | |
} | |
svg, canvas { | |
top: 0; | |
} | |
#d3MapZoomBox { | |
position: absolute; | |
z-index: 10; | |
height: 100px; | |
width: 25px; | |
top: 10px; | |
right: 50px; | |
} | |
#d3MapZoomBox > button { | |
height:25px; | |
width: 25px; | |
line-height: 25px; | |
} | |
.d3MapControlsBox > 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; | |
} | |
.d3MapControlsBox > button:hover { | |
background: black; | |
} | |
#d3MapPanBox { | |
position: absolute; | |
z-index: 10; | |
height: 100px; | |
width: 25px; | |
top: 60px; | |
right: 50px; | |
} | |
#d3MapPanBox > button { | |
height:25px; | |
width: 25px; | |
line-height: 25px; | |
} | |
#d3MapPanBox > button#left { | |
position: absolute; | |
left: -25px; | |
top: 10px; | |
} | |
#d3MapPanBox > button#right { | |
position: absolute; | |
right: -25px; | |
top: 10px; | |
} | |
#d3MapLayerBox { | |
position: relative; | |
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; | |
} | |
circle.newpoints { | |
fill: black; | |
stroke: red; | |
stroke-width: 2px; | |
} | |
path.newfeatures { | |
fill: steelblue; | |
fill-opacity: .5; | |
stroke: pink; | |
stroke-width: 2px; | |
} |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<title>d3.carto.map - clustering</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; | |
} | |
circle { | |
fill: black; | |
stroke: red; | |
} | |
</style> | |
<script> | |
function makeSomeMaps() { | |
map = d3.carto.map(); | |
d3.select("#map").call(map); | |
tileLayer = d3.carto.layer(); | |
tileLayer | |
.type("tile") | |
.path("examples.map-zgrqqx0w") | |
.label("Base") | |
csvLayer = d3.carto.layer.csv(); | |
csvLayer | |
.path("http://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/sample_points.csv") | |
.label("CSV Points") | |
.cssClass("pinkcircle") | |
.renderMode("svg") | |
.markerSize(2) | |
.x("x") | |
.y("y") | |
.cluster(true); | |
map.addCartoLayer(tileLayer).addCartoLayer(csvLayer); | |
} | |
</script> | |
<body onload="makeSomeMaps()"> | |
<div id="map"></div> | |
<footer> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script> | |
<script src="http://d3js.org/topojson.v1.min.js" type="text/javascript"> | |
</script> | |
<script src="http://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript"> | |
</script> | |
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js" type="text/javascript"> | |
</script> | |
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js" type="text/javascript"> | |
</script> | |
<script src="http://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> |