Skip to content

Instantly share code, notes, and snippets.

@jhnwllr

jhnwllr/.block

Last active January 17, 2019 10:43
Show Gist options
  • Save jhnwllr/5ac750685500eb453065eabdbf01e4f5 to your computer and use it in GitHub Desktop.
Save jhnwllr/5ac750685500eb453065eabdbf01e4f5 to your computer and use it in GitHub Desktop.
Download ZIP
D3-Legends Examples
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
<link rel="stylesheet" href="legends.css">
<style type="text/css"></style>
</head>
<body>
<div class="legend1">
<h3>HTML Vertical Legend</h3>
<div class="legend1"> <p class="country-name"><span class="key-dot queens"></span>Queens</p> </div>
<div class="legend1"> <p class="country-name"><span class="key-dot kings"></span>Kings</p> </div>
<div class="legend1"> <p class="country-name"><span class="key-dot bronx"></span>Bronx</p> </div>
</div>
</body>
<script>
var width = 500;
var height = 75;
var svgw = 20;
var svgh = 20;
d3.tsv("nyc.stats.tsv", function(data) {
legendVals = d3.set(data.map( function(d) { return d.COUNTY } ) ).values()
console.log(legendVals)
var legendVals1 = d3.scale.ordinal()
.domain(legendVals)
.range(["#611eb2", "#FF7F0E", "#2CA02C"]);
var legendVals2 = ["Queens", "Kings", "Bronx", "Manhatan","Richmond"]
var color = d3.scale.category10()
var svgLegned3 = d3.select(".legend3").append("svg")
.attr("width", width).attr("height", height)
//D3 Vertical Legend//////////////////////////
var legend3 = svgLegned3.selectAll('.legend3')
.data(legendVals1.domain())
.enter().append('g')
.attr("class", "legends3")
.attr("transform", function (d, i) {
{
return "translate(0," + i * 20 + ")"
}
})
legend3.append('rect')
.attr("x", 0)
.attr("y", 0)
.attr("width", 10)
.attr("height", 10)
.style("fill", function (d, i) {
return color(i)
})
legend3.append('text')
.attr("x", 20)
.attr("y", 10)
//.attr("dy", ".35em")
.text(function (d, i) {
return d
})
.attr("class", "textselected")
.style("text-anchor", "start")
.style("font-size", 15)
/////////D3 Horizonal Lengend 1///////////////////////////
var svgLegned4 = d3.select(".legend4").append("svg")
.attr("width", width)
.attr("height", height - 50)
var dataL = 0;
var offset = 80;
var legend4 = svgLegned4.selectAll('.legends4')
.data(legendVals2)
.enter().append('g')
.attr("class", "legends4")
.attr("transform", function (d, i) {
if (i === 0) {
dataL = d.length + offset
return "translate(0,0)"
} else {
var newdataL = dataL
dataL += d.length + offset
return "translate(" + (newdataL) + ",0)"
}
})
legend4.append('rect')
.attr("x", 0)
.attr("y", 0)
.attr("width", 10)
.attr("height", 10)
.style("fill", function (d, i) {
return color(i)
})
legend4.append('text')
.attr("x", 20)
.attr("y", 10)
//.attr("dy", ".35em")
.text(function (d, i) {
return d
})
.attr("class", "textselected")
.style("text-anchor", "start")
.style("font-size", 15)
/////////D3 Horizonal Legend 2////////////////////////////////
var legend5 = d3.select('.legend5').selectAll("legend")
.data(legendVals)
legend5.enter().append("div")
.attr("class","legends5")
var p = legend5.append("p").attr("class","country-name")
p.append("span").attr("class","key-dot").style("background",function(d,i) { return color(i) } )
p.insert("text").text(function(d,i) { return d } )
///////////D3 Horizonal Legend 3/////////////////////////////
var legend6 = d3.select('.legend6').selectAll("legend")
.data(legendVals)
legend6.enter().append("div")
.attr("class","legends6")
legend6.html(function(d,i) { return d } ).style("color", function(d,i) { return color(i) } )
//////////D3 Reusable Legend////////////////////////////
d3.edge = {};
d3.edge.reuselegend = function module() {
function exports(_selection) {
_selection.each(function (_data) {
d3.select(this)
.selectAll("legend").data(_data)
.enter().append('div')
.attr("class", "legends7")
.html(function (d, i) {
return d.toUpperCase()
})//.style("color","red")
.style("color", function (d, i) { return color(i) })
})
}
return exports;
}
var rlegend = d3.edge.reuselegend()
//.datum must be used and not data...data will only return the first item
d3.select(".legend7").datum(legendVals).call(rlegend)
})
</script>
</html>
Raw
legends.css
/*HTML Vertical Lengend*/
h3 {
margin-top: 15px;
}
.country-name {
margin: 0 !important;
}
.key-dot {
display: inline-block;
height: 10px;
margin-right: .5em;
width: 10px;
}
.legend {
margin-right:20px;
}
.queens { background: #1F77B4;}
.kings { background: #FF7F0E;}
.bronx { background: #2CA02C;
}
/*HTML Horizonal Legend*/
.country-name {
margin: 0 !important;
}
.key-dot {
display: inline-block;
height: 10px;
margin-right: .5em;
width: 10px;
}
.uk { background: #1F77B4;}
.denmark { background: #FF7F0E;}
.germany { background: #2CA02C;
}
#legend2{
overflow:hidden;
}
.legend2 {
float:left;
margin-right: 1em;
}
/*D3 Vertical Legend*/
/*D3 Horizonal Legend2*/
.legends5 {
float:left;
margin-right: 1em;
}
/*D3 Horizonal Legend3*/
.legends6{
float:left;
margin-right:1em;
}
/*D3 Reusable Legend3*/
.legends7 {
float:left;
margin-right:1em;
}
Raw
legends.js
var width = 500;
var height = 75;
var svgw = 20;
var svgh = 20;
d3.tsv("nyc.stats.tsv", function(data) {
legendVals = d3.set(data.map( function(d) { return d.COUNTY } ) ).values()
console.log(legendVals)
var legendVals1 = d3.scale.ordinal()
.domain(legendVals)
.range(["#611eb2", "#FF7F0E", "#2CA02C"]);
var legendVals2 = ["Queens", "Kings", "Bronx", "Manhatan","Richmond"]
var color = d3.scale.category10()
var svgLegned3 = d3.select(".legend3").append("svg")
.attr("width", width).attr("height", height)
//D3 Vertical Legend//////////////////////////
var legend3 = svgLegned3.selectAll('.legend3')
.data(legendVals1.domain())
.enter().append('g')
.attr("class", "legends3")
.attr("transform", function (d, i) {
{
return "translate(0," + i * 20 + ")"
}
})
legend3.append('rect')
.attr("x", 0)
.attr("y", 0)
.attr("width", 10)
.attr("height", 10)
.style("fill", function (d, i) {
return color(i)
})
legend3.append('text')
.attr("x", 20)
.attr("y", 10)
//.attr("dy", ".35em")
.text(function (d, i) {
return d
})
.attr("class", "textselected")
.style("text-anchor", "start")
.style("font-size", 15)
/////////D3 Horizonal Lengend 1///////////////////////////
var svgLegned4 = d3.select(".legend4").append("svg")
.attr("width", width)
.attr("height", height - 50)
var dataL = 0;
var offset = 80;
var legend4 = svgLegned4.selectAll('.legends4')
.data(legendVals2)
.enter().append('g')
.attr("class", "legends4")
.attr("transform", function (d, i) {
if (i === 0) {
dataL = d.length + offset
return "translate(0,0)"
} else {
var newdataL = dataL
dataL += d.length + offset
return "translate(" + (newdataL) + ",0)"
}
})
legend4.append('rect')
.attr("x", 0)
.attr("y", 0)
.attr("width", 10)
.attr("height", 10)
.style("fill", function (d, i) {
return color(i)
})
legend4.append('text')
.attr("x", 20)
.attr("y", 10)
//.attr("dy", ".35em")
.text(function (d, i) {
return d
})
.attr("class", "textselected")
.style("text-anchor", "start")
.style("font-size", 15)
/////////D3 Horizonal Legend 2////////////////////////////////
var legend5 = d3.select('.legend5').selectAll("legend")
.data(legendVals)
legend5.enter().append("div")
.attr("class","legends5")
var p = legend5.append("p").attr("class","country-name")
p.append("span").attr("class","key-dot").style("background",function(d,i) { return color(i) } )
p.insert("text").text(function(d,i) { return d } )
///////////D3 Horizonal Legend 3/////////////////////////////
var legend6 = d3.select('.legend6').selectAll("legend")
.data(legendVals)
legend6.enter().append("div")
.attr("class","legends6")
legend6.html(function(d,i) { return d } ).style("color", function(d,i) { return color(i) } )
//////////D3 Reusable Legend////////////////////////////
d3.edge = {};
d3.edge.reuselegend = function module() {
function exports(_selection) {
_selection.each(function (_data) {
d3.select(this)
.selectAll("legend").data(_data)
.enter().append('div')
.attr("class", "legends7")
.html(function (d, i) {
return d.toUpperCase()
})//.style("color","red")
.style("color", function (d, i) { return color(i) })
})
}
return exports;
}
var rlegend = d3.edge.reuselegend()
//.datum must be used and not data...data will only return the first item
d3.select(".legend7").datum(legendVals).call(rlegend)
})
Raw
nyc.stats.tsv
COUNTY ZCTA5 EDU POPPT INC
QUEENS 11368 11.8 109931 45,964
KINGS 11226 21.9 101572 40,734
QUEENS 11373 25.7 100820 47,667
KINGS 11220 18.5 99598 37,580
QUEENS 11385 19.5 98592 50,799
BRONX 10467 18.5 97060 36,048
MANHATTAN 10025 68 94600 68,516
KINGS 11208 10.2 94469 35,079
KINGS 11236 24.9 93877 61,061
KINGS 11207 13.1 93386 32,945
KINGS 11219 16.6 92221 34,316
KINGS 11211 40.7 90117 46,848
QUEENS 11377 28.7 89830 49,886
KINGS 11214 22.6 88630 43,398
KINGS 11234 31.4 87757 68,431
BRONX 10456 10.2 86547 23,452
KINGS 11230 37.3 86408 42,170
QUEENS 11355 26.7 85871 41,884
RICHMOND 10314 30.6 85510 77,242
KINGS 11212 10.2 84500 28,348
KINGS 11206 18.9 81677 28,559
MANHATTAN 10002 29.3 81410 33,218
KINGS 11229 35.3 80018 51,725
BRONX 10458 11.8 79492 24,618
KINGS 11235 42.5 79132 41,639
KINGS 11221 18.8 78895 39,178
KINGS 11223 24.2 78731 41,328
BRONX 10453 12.1 78309 25,470
KINGS 11204 23.5 78134 45,472
KINGS 11203 20.2 76174 48,400
BRONX 10468 15.8 76103 33,776
MANHATTAN 10029 30 76003 31,888
BRONX 10462 23.9 75784 45,864
BRONX 10452 10.9 75371 25,979
KINGS 11218 39.8 75220 52,445
BRONX 10457 11.8 70496 24,949
KINGS 11209 43.9 68853 58,261
QUEENS 11375 56.1 68733 72,000
BRONX 10466 20.9 67813 44,012
KINGS 11233 19.3 67053 34,492
QUEENS 11372 29.2 66636 48,683
BRONX 10469 25.4 66631 57,776
BRONX 10472 11.5 66358 30,288
KINGS 11213 20 63767 34,794
KINGS 11215 69.4 63488 95,654
KINGS 11210 32.6 62008 55,429
MANHATTAN 10009 57.6 61347 59,929
MANHATTAN 10023 79.5 60998 103,534
QUEENS 11432 34.4 60809 50,450
MANHATTAN 10128 78 60453 96,296
QUEENS 11691 21.5 60035 39,409
MANHATTAN 10027 44.3 59707 37,872
BRONX 10463 36.4 59507 54,258
RICHMOND 10312 31.7 59304 85,324
MANHATTAN 10024 77.7 59283 109,956
QUEENS 11434 21 59129 59,229
BRONX 10473 17.1 58519 35,866
MANHATTAN 10032 26.5 57331 34,568
BRONX 10460 11.1 57311 22,307
KINGS 11225 28.5 56829 42,922
MANHATTAN 10031 30.5 56438 37,655
MANHATTAN 10003 77.6 56024 92,540
RICHMOND 10306 29.6 55909 75,807
QUEENS 11354 27.5 54878 46,566
KINGS 11216 34.7 54316 43,996
MANHATTAN 10016 79.4 54183 105,324
MANHATTAN 10033 31.7 53926 41,556
QUEENS 11435 28.4 53687 53,041
KINGS 11201 69.5 51128 95,369
MANHATTAN 10011 77.1 50984 104,238
BRONX 10461 25.3 50502 52,347
KINGS 11237 17.6 49896 40,372
KINGS 11238 56 49262 65,315
KINGS 11224 29.2 47621 27,481
BRONX 10459 10.6 47308 24,461
QUEENS 11419 17.9 47211 56,735
BRONX 10451 14.5 45713 26,754
MANHATTAN 10028 81.4 45141 104,638
QUEENS 11420 18.7 44354 59,832
MANHATTAN 10021 80 43631 107,907
QUEENS 11374 48.5 43600 52,532
MANHATTAN 10019 70.1 42870 84,424
QUEENS 11365 35.2 42252 55,492
BRONX 10465 23.9 42230 65,450
RICHMOND 10304 28 42193 53,168
MANHATTAN 10040 34.5 41905 42,721
KINGS 11228 28.4 41788 61,893
RICHMOND 10305 31.7 41749 70,758
QUEENS 11367 42.2 41047 56,608
BRONX 10475 23.7 40931 43,629
KINGS 11205 40 40366 44,688
RICHMOND 10301 33.2 39706 56,848
BRONX 10455 8.7 39665 22,609
QUEENS 11357 33.7 39150 71,978
QUEENS 11421 21.3 39127 60,897
QUEENS 11413 25.9 38912 78,667
MANHATTAN 10034 31.9 38908 41,171
QUEENS 11106 39.2 38875 48,720
QUEENS 11103 41.5 38780 55,129
QUEENS 11369 16.7 38615 53,617
QUEENS 11358 36.8 37546 65,722
BRONX 10454 9.2 37337 20,232
KINGS 11222 50.3 36934 63,739
QUEENS 11105 42.9 36688 57,525
QUEENS 11418 25.8 36256 60,691
KINGS 11217 61.8 35881 81,862
QUEENS 11378 22.3 34981 57,474
QUEENS 11412 21.5 34882 70,672
QUEENS 11379 30.3 34821 69,843
QUEENS 11364 44.4 34555 72,909
QUEENS 11102 41.3 34133 49,924
MANHATTAN 10026 39.3 34003 43,107
MANHATTAN 10035 22.8 33969 24,533
KINGS 11231 58.8 33336 78,174
QUEENS 11433 16.2 32687 42,887
RICHMOND 10309 30.9 32519 86,297
MANHATTAN 10065 79.9 32270 115,519
MANHATTAN 10014 81.9 31959 108,483
MANHATTAN 10022 80.7 31924 109,019
MANHATTAN 10010 73.7 31834 97,955
QUEENS 11422 30 30425 84,824
QUEENS 11423 26.2 29987 60,892
QUEENS 11417 20.9 28967 62,086
QUEENS 11361 41.7 28606 75,335
QUEENS 11370 19.4 28597 52,500
KINGS 11232 23.1 28265 43,595
MANHATTAN 10013 61.7 27700 83,725
RICHMOND 10308 27.8 27357 88,075
QUEENS 11104 41 27232 56,059
MANHATTAN 10030 28.9 26999 31,925
RICHMOND 10303 22.6 26337 51,537
QUEENS 11414 25.1 26148 66,790
MANHATTAN 10075 80.6 26121 102,941
QUEENS 11101 36.5 25484 47,142
QUEENS 11429 20 25105 68,890
RICHMOND 10310 27.6 24962 61,925
QUEENS 11416 21.9 24861 56,724
MANHATTAN 10036 66.6 24711 66,599
MANHATTAN 10039 26.5 24527 33,595
MANHATTAN 10012 75.5 24090 86,594
QUEENS 11427 34.6 23593 70,108
QUEENS 11356 24.3 23438 58,465
BRONX 10471 54.4 22922 71,798
MANHATTAN 10001 69.3 21102 81,671
QUEENS 11694 37.6 20408 76,944
MANHATTAN 10038 59.6 20300 66,074
QUEENS 11415 46 19341 63,549
QUEENS 11428 23.8 19168 69,330
RICHMOND 10302 21 19088 56,841
QUEENS 11360 47.7 18884 76,183
QUEENS 11411 30.7 18556 83,099
QUEENS 11692 19.2 18540 43,354
QUEENS 11436 17.4 17949 62,114
QUEENS 11362 52.7 17823 82,332
QUEENS 11426 37.4 17590 82,301
MANHATTAN 10037 34.8 17416 37,341
MANHATTAN 10017 80.7 16575 100,652
BRONX 10470 27.6 15293 58,600
RICHMOND 10307 32 14096 86,457
QUEENS 11004 44.8 14016 81,709
QUEENS 11366 45.2 13532 71,350
KINGS 11239 21.7 13393 26,275
BRONX 10474 10 12281 25,676
QUEENS 11693 23.8 11916 50,570
MANHATTAN 10044 56.3 11661 83,066
BRONX 11370 19.4 11091 52,500
MANHATTAN 10463 36.4 8463 54,258
MANHATTAN 10280 79.4 7853 129,574
MANHATTAN 10005 88.7 7135 124,670
QUEENS 11363 53.6 6988 90,799
MANHATTAN 10007 76.7 6988 216,037
MANHATTAN 10018 69.1 5229 104,635
MANHATTAN 10069 87.2 5199 170,630
MANHATTAN 10282 86.4 4783 230,952
BRONX 10464 43 4534 70,078
QUEENS 11001 40.5 4222 101,634
QUEENS 11697 44.1 4079 87,636
QUEENS 11109 83.4 3523 125,871
MANHATTAN 10004 78.4 3089 129,313
MANHATTAN 10006 81.5 3011 119,274
QUEENS 11040 43.7 2175 101,434
QUEENS 11005 54.9 1806 64,300
MANHATTAN 10162 92 1685 168,667
QUEENS 11430 10.1 184
QUEENS 11003 29.7 156 85,672
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment