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.
Last active
August 29, 2015 14:04
-
-
Save emeeks/7d5925cb7d9721c60360 to your computer and use it in GitHub Desktop.
Quadtree clustering - d3.carto.map
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment