Kodama Tests

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//darkmarmot.github.io/kodama/js/kodama.js"></script>
<link rel="stylesheet" href="//darkmarmot.github.io/kodama/stylesheets/stylesheet.css">
<section class="main-content">
  <div>
   <svg id="svg_demo" height="100%" width=600 viewBox="0 0 1000 600" preserveAspectRatio="none">
   </svg>
</div>
</section>

JavaScript

var x = 'linear-gradient(to top, rgb(16, 74, 105) 0%, rgb(14, 96, 125) 90%)'  

var defaultThemeConfig = 
    {
        frame: {
            "font-size": "11px",
            color: "black",
            padding: '1px',
            "background-color": "#fff",
  border: "1px solid #ccc",
  border: "1px solid rgba(0,0,0,.2)",
  "border-radius": "6px",
  "-webkit-box-shadow:": "0 5px 10px rgba(0,0,0,.2)",
  "box-shadow": "0 5px 10px rgba(0,0,0,.2)"
        },
        title: {'text-align': 'center', 'padding': '4px'},
        item_title: {'text-align': 'right', 'color': 'black'},
        item_value: {'padding': '1px 2px 1px 10px', 'color': 'black'}
    };

d3.kodama.themeRegistry('kodama', defaultThemeConfig);
d3.kodama.theme("kodama")

var svg = d3.select('#svg_demo');

        var nodeLayer = svg.append('g');
        var voronoiLayer = svg.append('g');

        var nodes = d3
                .range(150)
                .reverse()
                .map(function(n) {
                    return {
                        name: n,
                        hue: Math.random() * 80 + 180,
                        radius: (n *.4 + 2),
                        cx: Math.random() * 950 + 25,
                        cy: Math.random() * 550 + 25,
                        alpha: (1.0 - (n / 150.0)) *.8
                    }
                }
        );

        var voronoi = d3.geom.voronoi()
                .x(function(d) { return d.cx; })
                .y(function(d) { return d.cy; })
                .clipExtent([[0, 0], [1000, 600]]);

        var voronoiData = voronoi(nodes);

        nodes.forEach(function(d, i){ d.voronoiData = voronoiData[i];})

        var makeTipData = function(d, i){
            return {
                title: 'This is Kodama Node #' + i,
                items: [
                    { title: 'Hue', value: d3.format(',d')(Math.round(Number(d.hue)))},
                    { title: 'Radius', value: d3.format(',d')(Math.round(Number(d.radius)))}
               ...