Skip to content

Instantly share code, notes, and snippets.

@fogonwater

fogonwater/.block

Last active January 3, 2018 07:18
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 fogonwater/398b6fed189697f3228dbbd0ee128a06 to your computer and use it in GitHub Desktop.
Save fogonwater/398b6fed189697f3228dbbd0ee128a06 to your computer and use it in GitHub Desktop.
Download ZIP
chroma d3 tests IV
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>
<style>
body { margin:10px;font-family: monospace}
.swatch {
color: #444;
float: left;
font-family: sans-serif;
font-size: 0.8em;
margin: 1px;
padding: 4px;
width: 105px;
height: 70px;
}
textarea {margin-top: 6px;}
</style>
</head>
<body>
<div id="viz"></div>
<div style="clear:left;margin-top:20px;">&nbsp;</div>
<!--<textarea id="out" rows="25" cols="150"></textarea>-->
<script>
const data = [
{'label':'Quaternary', 'col': chroma('#FFFDE3')},
{'label':'Pleistocene', 'col': chroma('#FFFDE3')},
{'label':'Tertiary', 'col': chroma('#FFDC91')},
{'label':'Cretaceous', 'col': chroma('#EFED86')},
{'label':'Jurassic', 'col': chroma('#B4DDC0')},
{'label':'Triassic', 'col': chroma('#78CDD1')},
{'label':'Permian', 'col': chroma('#00C0F3')},
{'label':'Carboniferous','col':chroma('#717EBD')},
{'label':'Devonian', 'col': chroma('#B39ABC')},
{'label':'Silurian', 'col': chroma('#B37AB4')},
{'label':'Ordovician', 'col': chroma('#D792B3')},
{'label':'Cambrian', 'col': chroma('#B96858')},
{'label':'Proterozoic', 'col': chroma('#DAD5DB')}
]
d3.select("#viz").selectAll("div")
.data(data)
.enter().append("div")
.style("background", function(d) {return d.col})
.text(function(d){ return d.label; })
.attr("class", "swatch")
//[ageperiod='Tertiary'] {polygon-fill: #444;}
const report = data.map(function(d, i){
return "[ageperiod='" + d.label + "'] {polygon-fill: " + d.col.hex() + ";}<br/>"
})
//d3.select("#out")
// .text(JSON.stringify(report, null, 4));
report.forEach(function(d) {
document.write(d)}
)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment