Skip to content

Instantly share code, notes, and snippets.

@ialarmedalien

ialarmedalien/.block

Last active October 14, 2018 11:05
Show Gist options
  • Save ialarmedalien/e3157b48b3ef624d2574 to your computer and use it in GitHub Desktop.
Save ialarmedalien/e3157b48b3ef624d2574 to your computer and use it in GitHub Desktop.
Download ZIP
d3.form.element.colorbrewer
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>d3.form.element.colorbrewer.js</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/colorbrewer@1/colorbrewer.min.css">
<script src="https://cdn.jsdelivr.net/combine/npm/colorbrewer@1/colorbrewer.min.js,npm/d3@3"></script>
<script src="https://cdn.jsdelivr.net/npm/colorbrewer@1/colorbrewer.min.js"></script>
<script src="https://rawgit.com/ialarmedalien/d3.chart.img/master/src/d3.form.element.colorbrewer.js"></script>
<meta charset="UTF-8">
<style>
#palette svg {
width: 100%;
height: 40px;
}
#palette rect {
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<div class="wrapper">
<p>A select element offering access to <a href="http://colorbrewer2.org">colorbrewer palettes</a> using the colorbrewer library shipped with <a href="https://github.com/mbostock/d3">d3.js</a>. For consistency, only colorbrewer schemes with nine variations or greater are included. Colours are added using css, rather than the customary fills.</p>
<div id="palette"></div>
<div id="select"></div>
</div>
<script>
var p = d3.select("#palette")
.append('svg')
.append('g')
.attr("transform", function(d) { return "translate(" + 5 + "," + 5 + ")"; })
.classed('YlGn', true)
, cbc = new ColorBrewerControl(colorbrewer);
p.selectAll('rect')
.data( d3.range(9) )
.enter().append("rect")
.attr("class", function(d){ return 'q' + d + '-9' })
.attr('x', function(d,i){ return 30 * i })
.text(function(d){ return d; } );
cbc.add_colorbrewer_control({ el:'#select', id: "colors_select" })
.on('change', function(){
p.attr( 'class', this.value );
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment