Skip to content

Instantly share code, notes, and snippets.

@ludoo

ludoo/index.html

Created February 28, 2013 16:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ludoo/5058117 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ludoo/5058117 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ludoo created this gist Feb 28, 2013.
    45 changes: 45 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <style type="text/css">
    h3 {
    clear: left;
    margin: 0;
    }
    ul {
    width: 800px;
    margin: 0;
    list-style-type: none;
    }
    li {
    width: 80px;
    font-size: 13px;
    padding: 13px 0;
    text-align: center;
    color: white;
    float: left;
    }
    </style>
    </head>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript">

    var body = d3.select('body'),
    labels = ['d3.scale.category20()', 'dark', 'light'],
    colors = d3.scale.category20().range(),
    dark = colors.map(function(d, i, all) { return i<10 ? all[i*2] : null }).filter(Boolean),
    light = colors.map(function(d, i, all) { return i<10 ? null : all[(i-10)*2+1] }).filter(Boolean);

    [colors, dark, light].map(function(d, i) {
    body.append('h3')
    .text(labels[i]);
    body.append('ul').selectAll('li').data(d).enter().append('li')
    .style('background-color', String)
    .text(String);
    });

    </script>
    </body>
    </html>