Skip to content

Instantly share code, notes, and snippets.

@kirjavascript
Last active Jan 15, 2016
Embed
What would you like to do?
Nested data binding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
<script>
var svg;
var c = {
w: window.innerWidth,
h: window.innerHeight
}
var state = {
palettes: [
["000000","000000","2222aa","2244cc","4444ee","6666ee","eeeeee","aaaaaa","888888","444444","eeaa88","aa6644","ee0000","880000","eeaa00","ee8800"],
["000000","220022","440044","660066","880088","aa00aa","cc00cc","ee00ee","cc00ee","aa00cc","8800aa","660088","440066","220044","000022","ee0000"],
["000000","222200","444400","666600","888800","aaaa00","cccc00","eeee00","eecc00","ccaa00","aa8800","886600","664400","442200","220000","00ee00"],
["000000","002222","004444","006666","008888","00aaaa","00cccc","00eeee","00eecc","00ccaa","00aa88","008866","006644","004422","002200","0000ee"]
]
};
window.addEventListener("load", e => {
svg = d3.select("body").append("svg")
.attr("width",c.w).attr("height",c.h)
.attr("viewBox",[0,0,c.w,c.h].join(" "));
var palettes = svg.selectAll('.pal')
.data(state.palettes)
palettes
.enter()
.append('g')
.selectAll('.line')
.data(d=>d)
.enter()
.append("rect")
.attr({
x:(d,i)=>25*i,
y:(d,i,a)=>25*a,
width:25,
height:25,
fill:d=>'#'+d,
})
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment