Skip to content

Instantly share code, notes, and snippets.

@ThomasThoren

ThomasThoren/README.md

Last active December 3, 2015 20:55
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 ThomasThoren/7e9970f025c301e8c2f8 to your computer and use it in GitHub Desktop.
Save ThomasThoren/7e9970f025c301e8c2f8 to your computer and use it in GitHub Desktop.
Download ZIP
Map labels
Raw
README.md

Practice with map locations and labels.

Raw
index.html
<!DOCTYPE html>
<head>
<title>Louisiana drop shadow</title>
<meta charset="utf-8">
<style>
body {
padding: 0;
margin: 0;
}
svg {
background-color: #E8C691;
}
.bold {
font-weight: bold;
}
.parishes {
fill: #FAFAFA;
stroke: #777;
stroke-opacity: 0.5;
stroke-width: 0.5px;
opacity: 0.8;
}
.parish-border {
fill: none;
stroke: #DFDFDF;
}
.state-border {
fill: none;
stroke: #585858;
}
.city-label {
font-weight: 500;
text-transform: uppercase;
text-anchor: middle;
opacity: 0.4;
color: #000;
font-family: arial, helvetica, sans-serif;
font-size: 13px;
}
.map-note-text {
font-size: 15px;
font-weight: 500;
color: #000;
font-family: arial, helvetica, sans-serif;
line-height: 18px;
margin: 0;
}
.state-label {
font-weight: 500;
text-transform: uppercase;
text-anchor: middle;
opacity: 0.3;
color: #000;
font-family: arial, helvetica, sans-serif;
font-size: 24px;
line-height: 28px;
letter-spacing: 0.333em;
}
</style>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 650;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Inset map
var map_projection = d3.geo.albers()
.translate([width / 2, height / 2])
.rotate([91.6, 0]) // Rotate CCW (looking down onto North Pole)
.center([0, 31.2])
.parallels([29, 33])
.scale(8000);
var map_path = d3.geo.path()
.projection(map_projection);
d3.json("parishes.json", function(error, data) {
if (error) throw error;
// Draw land
svg.append("g")
.attr("class", "parishes")
.selectAll("path")
.data(topojson.feature(data, data.objects.parishes).features)
.enter().append("path")
.attr("fill", function(d) {
var parish_code_as_int = parseInt(d.properties.parishcode, 10);
if (parish_code_as_int < 30) {
return "#C00";
} else if (parish_code_as_int >= 30 && parish_code_as_int < 60) {
return "#FDBF4F";
} else {
return "#FFF";
}
})
.attr("d", map_path);
// Draw parish borders
svg.append("path")
.datum(topojson.mesh(data, data.objects.parishes, function(a, b) { return a !== b; }))
.attr("class", "parish-border")
.attr("d", map_path);
// Draw state border
svg.append("path")
.datum(topojson.mesh(data, data.objects.parishes, function(a, b) { return a === b; }))
.attr("class", "state-border")
.attr("d", map_path);
// Draw circle marker
svg.selectAll('.circle-icon')
.data(topojson.feature(data, data.objects.parishes).features)
.enter().append('circle')
.each(function(d) {
if (d.properties.parishname !== 'Caddo' && d.properties.parishname !== 'Lafayette') {
return;
}
d3.select(this)
.attr("r", 4)
.attr("transform", function(d) { return "translate(" + map_path.centroid(d) + ")"; })
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 2);
})
.filter(function(d) {
return d.properties.parishname !== 'Caddo' && d.properties.parishname !== 'Lafayette';
}).remove(); // Delete empty circle elements
// Draw parish name
svg.selectAll('.parish-label')
.data(topojson.feature(data, data.objects.parishes).features)
.enter().append('text')
.each(function(d) {
if (d.properties.parishname !== 'Orleans') {
return;
}
d3.select(this)
.attr("transform", function(d) { return "translate(" + map_path.centroid(d) + ")"; })
// .attr("dx", "-3em")
// .attr("dy", "-0.5em")
.attr("fill", "black")
.style("text-anchor", "end")
.text(function(d) { return d.properties.parishname });
})
.filter(function(d) {
return d.properties.parishname !== 'Orleans';
}).remove();
// Draw parish text note
svg.selectAll('.parish-note')
.data(topojson.feature(data, data.objects.parishes).features)
.enter().append('text')
.each(function(d) {
if (d.properties.parishname === 'Lafayette') {
d3.select(this)
.attr("transform", function(d) { return "translate(" + map_path.centroid(d) + ")"; })
.attr("dx", "-150")
.attr("dy", "150")
.attr("fill", "black")
.style("text-anchor", "end")
.text("Welcome to Lafayette.");
} else if (d.properties.parishname === 'Caddo') {
d3.select(this)
.attr("transform", function(d) { return "translate(" + map_path.centroid(d) + ")"; })
.attr("dx", "10")
.attr("dy", "-90")
.attr("fill", "black")
.attr("id", "caddo-text")
.style("text-anchor", "start")
.text("This is the ");
d3.select(this)
.append("tspan")
.attr("class", "bold")
.text("centroid ");
d3.select(this)
.append("tspan")
.attr("x", "10")
.attr("y", "-75")
.style("text-anchor", "start")
.text("of Caddo Parish.");
} else {
return;
}
})
.filter(function(d) {
return d.properties.parishname !== 'Caddo' && d.properties.parishname !== 'Lafayette';
}).remove();
// Draw line between parish marker and text
// Line path generator
var line = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("basis");
svg.selectAll(".parish-line")
.data(topojson.feature(data, data.objects.parishes).features)
.enter().append('path')
.attr("class", "parish-line")
.attr("d", function(d) {
var centroid = map_path.centroid(d);
if (d.properties.parishname === 'Lafayette') {
var lineData = [
{"x": centroid[0] - 4, "y": centroid[1] + 4},
{"x": centroid[0] - 145, "y": centroid[1] + 145}
];
} else if (d.properties.parishname === 'Caddo') {
var lineData = [
{"x": centroid[0], "y": centroid[1] - 4},
{"x": centroid[0] + 10, "y": centroid[1] - 72}
];
} else {
return;
}
return line(lineData);
})
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("opacity", 0.8)
.attr("fill", "#000")
.filter(function(d) {
return d.properties.parishname !== 'Caddo' && d.properties.parishname !== 'Lafayette';
}).remove();
// State label
svg.append("text")
.attr("class", "state-label")
.attr("x", width * 0.35)
.attr("y", height * 0.4)
.text('Louisiana');
});
// Allows iframe on bl.ocks.org.
d3.select(self.frameElement).style("height", height + "px");
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
parishes.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment