Skip to content

Instantly share code, notes, and snippets.

@emeeks

emeeks/d3map.css

Last active August 29, 2015 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emeeks/066e20c1ce5008f884eb to your computer and use it in GitHub Desktop.
Save emeeks/066e20c1ce5008f884eb to your computer and use it in GitHub Desktop.
Download ZIP
Semantic Cluster Positioning - d3.carto
Raw
readme.md

Repositioning clustered points in d3.carto.map.

d3.carto uses quadtrees to perform grid-based clustering of points. One drawback of grid-based clustering as seen in the basic and complex clustering examples is that it produces regular rows and columns of clustered points, which can be jarring to map readers, especially when the regularized point is located in the sea when the dataset is entirely on land.

In this example, medium-sized cities (between 50k and 1m population) are clustered using the built-in clustering behavior, but the points are adjusted after each "recluster" event so that they are placed on the location of the largest city (population-wise) is located. This is accomplished by accessing the d3.carto.map.projection() and using it to adjust the "transform" attribute of the g.pointG container that determines the position of each point. It might do to make this semi-automated, but it's a hard thing to plan for, because you might want to use some kind of administrative rank (local, prefectural and national capitals) or other mechanism to determine the "anchor" point. In other cases, where there is no obvious such point, you might want to pick the point nearest the center or use some other mechanism.

As a result of this repoisitioning, the clustered sites are irregular, semantically interesting and never placed on non-sensical terrain.

Which is good.

Raw
d3map.css
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;
}
Raw
example.css
.countrylabel {
font-size: 12px;
color: red;
text-anchor: middle;
pointer-events: none;
font-weight: 900;
}
.wards {
fill: gray;
stroke: gray;
stroke-width: 1px;
}
.countryborders {
fill: rgba(0,0,0,0);
stroke-width: 1px;
stroke: gray;
cursor: pointer;
}
.invisible {
fill: rgba(0,0,0,0);
stroke-width: 0;
stroke: black;
cursor: pointer;
}
.countries {
fill: none;
stroke-width: 1px;
stroke: black;
opacity: 1;
}
.halffilledcountries {
fill: rgba(224,224,209,0.5);
stroke-width: 1px;
stroke: black;
opacity: 1;
}
.filledcountries {
fill: #E0E0D1;
stroke-width: 1px;
stroke: black;
opacity: 1;
}
.francelike {
fill: steelblue;
stroke-width: 2px;
stroke: lightgray;
}
.roads {
stroke: brown;
stroke-width: 1px;
fill: none;
}
.rivers {
stroke: blue;
stroke-width: 2px;
fill: none;
opacity: 1;
}
.thickborders {
stroke: brown;
stroke-width: 2px;
fill: none;
}
circle {
fill: black;
stroke: red;
}
circle.pinkcircle {
fill: pink;
stroke: black;
stroke-width: 1;
opacity: 1
}
circle.greencircle {
fill: green;
stroke: red;
opacity: 1;
stroke-width: 3;
}
#infoBox {
position: fixed;
z-index: 1;
bottom: 150px;
right: 150px;
background: white;
border: 1px gray dashed;
padding:20px;
width: 200px;
}
Raw
index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>d3.carto - Major City Clustering</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="d3map.css" />
<link type="text/css" rel="stylesheet" href="example.css" />
</head>
<style>
html,body {
height: 100%;
width: 100%;
margin: 0;
}
#map {
height: 100%;
width: 100%;
position: absolute;
}
</style>
<script>
function makeSomeMaps() {
map = d3.carto.map();
d3.select("#map").call(map);
tileLayer = d3.carto.layer();
tileLayer
.type("tile")
.path("elijahmeeks.map-azn21pbi")
.label("Base")
csvLayer = d3.carto.layer.csv();
csvLayer
.path("http://bl.ocks.org/emeeks/raw/540b1b884b80b14a44c6/all_sites.csv")
.label("CSV Points")
.cssClass("pinkcircle")
.renderMode("svg")
.x("xcoord")
.y("ycoord")
.cluster(true)
.on("recluster", positionCluster);
map.addCartoLayer(tileLayer).addCartoLayer(csvLayer);
map.centerOn([-115,40],"latlong").setScale(2);
function positionCluster() {
var d3MapProjection = map.projection();
csvLayer.clusterLayer().g().selectAll("g.pointG")
.each(function(d) {
if (!d.leaf) {
var newPosition = findMax(d,d);
var newProjectedPos = d3MapProjection([csvLayer.x()(newPosition.point),csvLayer.y()(newPosition.point)]);
d3.select(this).attr("transform", "translate("+newProjectedPos+")");
}
})
function findMax(current, max) {
if (current.leaf) {
if (!max.leaf) {
max = current;
}
else if (parseInt(current.point.pop) >= parseInt(max.point.pop)) {
max = current;
}
}
else {
for (var y in current.children) {
var thisMax = findMax(current.children[y],max);
if (!max.leaf) {
max = thisMax;
}
else if (parseInt(thisMax.point.pop) >= parseInt(max.point.pop)) {
max = thisMax;
}
}
}
return max;
}
}
}
</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