Skip to content

Instantly share code, notes, and snippets.

@LuisSevillano

LuisSevillano/.block

Last active September 13, 2019 09:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save LuisSevillano/a797b60a01a2d8e98815398f723f57a9 to your computer and use it in GitHub Desktop.
Save LuisSevillano/a797b60a01a2d8e98815398f723f57a9 to your computer and use it in GitHub Desktop.
Download ZIP
Path stroke with moveToFront
Raw
.block
border: none
height: 600
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
path {
stroke-linecap: round;
stroke-linejoin: round;
}
</style>
</head>
<body>
<!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="https://unpkg.com/d3-composite-projections@1.0.2"></script>
<script>
var svg = d3.select("svg"),
width = svg.node().getBoundingClientRect().width,
height = svg.node().getBoundingClientRect().height,
projection = d3.geoConicConformalSpain(),
path = d3.geoPath(projection);
projection
.scale(1)
.translate([0, 0]);
d3.queue()
.defer(d3.json, 'map.json')
.defer(d3.csv, 'population.csv')
.await(function(error, es, rate) {
// loop through the csv to create a new object accesible by ids
var data = [];
rate.forEach(function(d){
data[d.cod] = {"cod":d.cod,"rate":+d.rate};
});
var minMax = d3.extent(rate, function(d){ return +d.rate; });
color = d3.scaleThreshold()
.range(['#d0e4f1','#c0d6e9','#afc7e1','#9fb8da','#8eaad2','#7d9ccb','#6c90c3','#5982bc','#4575b4'])
.domain([5, 9, 19, 49, 74, 124, 249, 499, 1000]);
var region = topojson.feature(es, es.objects.border),
municipalities = topojson.feature(es, es.objects.municipalities).features.sort(function(a,b){
return d3.ascending(a.properties.id, b.properties.id);
});
var b = path.bounds(region),
s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
projection
.scale(s)
.translate(t);
if (error) throw error;
svg.append("path").datum(region).attr('d', path).attr('fill', 'none').attr('stroke', 'rgb(80,80,80)').attr('stroke-width', '2')
svg.selectAll(".municipalities")
.data(municipalities)
.enter()
.append("path")
.attr('d', path)
.attr('fill', function(d){
return color(+data[d.properties.id].rate);
})
.attr('stroke', 'white')
.attr('stroke-width', '.2')
.on('mouseover', function(d) {
d3.select(this).attr('stroke', 'black').attr('stroke-width', '2')
d3.select(this).moveToFront();
})
.on("mouseout", function(d){
d3.select(this).attr('stroke', 'white')
.attr('stroke-width', '.2');
})
});
d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
map.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
population.csv
cod rate
50001 1.66
50002 7.34
50003 8.37
50004 18.74
50005 4.16
50006 28.09
50007 2.28
50008 290.9
50009 7.21
50010 7.12
50011 52.42
50012 22.91
50013 26.64
50014 12.73
50015 2.18
50016 1.39
50017 16.7
50018 14.37
50019 5.46
50020 33.23
50021 0.97
50022 4.42
50023 4.73
50024 12.99
50025 135.8
50026 16.82
50027 4.17
50028 4.7
50029 14.11
50030 3.07
50031 2.04
50032 6.31
50033 2.64
50034 11.06
50035 5.82
50036 5.74
50037 3.78
50038 21.92
50039 3.47
50040 4.38
50041 0.39
50042 0.72
50043 20.8
50044 9.95
50045 5.7
50046 4.83
50047 2.68
50048 1.8
50050 1.74
50051 7.54
50052 9.09
50053 45.17
50054 1.42
50055 46.2
50056 24.69
50057 126.7
50058 2.34
50059 8.23
50060 8.93
50061 19.9
50062 95.84
50063 8.41
50064 59.59
50065 0.89
50066 308.2
50067 130.9
50068 58.77
50069 1.11
50070 2.52
50071 3.85
50072 5.51
50073 41.02
50074 18.94
50075 4.84
50076 5.62
50077 2.05
50078 6.49
50079 10.44
50080 1.45
50081 7.81
50082 3.41
50083 48.84
50084 4.28
50085 16.02
50086 3.61
50087 2.5
50088 12.12
50089 1406
50090 2.99
50091 1.35
50092 12.38
50093 7.83
50094 40.11
50095 27.13
50096 0.99
50098 5.58
50099 22.92
50100 19.2
50101 11.29
50102 11.64
50104 3.88
50105 5.26
50106 37.86
50107 71.7
50108 2.05
50109 2.99
50110 8.21
50111 10.92
50113 10.37
50114 2.03
50115 32.21
50116 9.84
50117 5.12
50118 63.08
50119 15.24
50120 3.16
50121 21.02
50122 4.9
50123 130.9
50124 5.11
50125 7.62
50126 125.1
50128 1.6
50129 7.36
50130 10.63
50131 5.52
50132 158.3
50133 5.33
50134 2.67
50135 27.37
50136 6.65
50137 6.8
50138 2.92
50139 11.61
50140 11.18
50141 10.37
50142 0.99
50143 17.17
50144 0.71
50146 22.22
50147 36.54
50148 2.54
50149 1.19
50150 29.35
50151 2.37
50152 11.26
50153 14.72
50154 4.32
50155 2.92
50156 3338
50157 62.05
50159 24.68
50160 85.21
50161 4.48
50162 9.06
50163 51.35
50164 4.89
50165 7.53
50166 5.89
50167 4.19
50168 1.89
50169 8.44
50170 2.28
50171 1.81
50172 3.45
50173 3.54
50174 5.86
50175 25.67
50176 11.79
50177 16.27
50178 7.16
50179 6.2
50180 14.29
50181 16.58
50182 35.48
50183 10.01
50184 7.07
50185 3.07
50186 1.71
50187 2.5
50188 1.82
50189 8.89
50190 76.45
50191 22.16
50192 8.01
50193 102.2
50194 5.95
50195 2.04
50196 6.16
50197 1.98
50198 4.8
50199 16.41
50200 14.23
50201 18.48
50202 10.84
50203 78.83
50204 30.34
50205 5.86
50206 5.49
50207 4.94
50208 7.9
50209 231.6
50210 0.54
50211 9.21
50212 20.53
50213 2.77
50214 1
50215 1.06
50216 8.78
50217 21.54
50218 1.55
50219 353.9
50220 4.45
50221 1.07
50222 16.87
50223 60.16
50224 3.02
50225 33.4
50227 6.5
50228 3.06
50229 6.28
50230 10.55
50231 121
50232 2.56
50233 10.18
50234 52.84
50235 42.72
50236 6.31
50237 32.75
50238 3.45
50239 3.48
50240 3.93
50241 46.53
50242 8.72
50243 9.57
50244 6.04
50245 0.91
50246 0.84
50247 89.45
50248 2.79
50249 4
50250 1.17
50251 43.93
50252 17.11
50253 14.73
50254 2.98
50255 6.95
50256 1.47
50257 5.78
50258 2.24
50259 3.17
50260 2.11
50261 98.04
50262 27.45
50263 3.1
50264 2.84
50265 5.26
50266 1.76
50267 2.89
50268 1.35
50269 15.76
50270 1.07
50271 3.13
50272 1042
50273 3.52
50274 2.73
50275 2.41
50276 3.69
50277 22.19
50278 3.86
50279 10.96
50280 13.85
50281 31.81
50282 11.62
50283 4.77
50284 8.18
50285 13.02
50286 7.43
50287 8.37
50288 61.56
50289 7.76
50290 6.04
50291 2.22
50292 8.92
50293 5.22
50294 4.49
50295 2.2
50296 26.69
50297 678.9
50298 24.01
50901 1.09
50902 5.38
50903 30.81
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment