All examples By author By category About

phoebebright

Full window Github gist

Treemap works in safari not firefox

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Kanban Treemap</title>
     <script src="https://d3js.org/d3.v2.js"></script>
   <script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style>

body { text-align: center;  margin: auto; }
        p.source { font-style: italic; }
        a { color: blue; }

svg {
            display: block;
            margin: auto;
        }

rect {
            fill: none;
            stroke: #fff;
        }

.axis path, .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }

sup, sub {
            line-height: 0;
        }

q:before,
        blockquote:before {
            content: "â€œ";
        }

q:after,
        blockquote:after {
            content: "â€";
        }

blockquote:before {
            position: absolute;
            left: 2em;
        }

blockquote:after {
            position: absolute;
        }

.bucket {
            width: 300px;
            height: 500px;
            float:left;
        }
        #bucket1, #bucket2, #bucket3 {
            width: 240px;
            height: 500px;
            margin: 30px;
            background: #bbb;
        }

text {
            pointer-events: none;
        }

.grandparent text {
            font-weight: bold;
        }

rect {
            fill: none;
            stroke: #fff;
        }

rect.parent,
        .grandparent rect {
            stroke-width: 2px;
        }

.grandparent rect {
            fill: #fff;
        }

.children rect.parent,
        .grandparent rect {
            cursor: pointer;
        }

rect.parent {
            pointer-events: all;
        }

.children:hover rect.child,
        .grandparent:hover rect {
            fill: #aaa;
        }

</style>

$(":button").click(function() {
            alert("Handler for .click() called.");
        });

});

</script>

<h1>Phoebe's Kanban Treemap</h1>

<div class="bucket"><h3>Not Started</h3><div id="bucket1"></div></div>
<div class="bucket"><h3>In Progress</h3><div id="bucket2"></div></div>
<div class="bucket"><h3>Complete</h3><div id="bucket3"></div></div>

<div id="filter">
Filter for <span id="who_filter"></span>

Check to Highlight <span id="who_high"></span>

</div>

var svg_b1 = d3.select("#bucket1")
            .attr("width", w + "px")
            .attr("height", h + "px")
            .append("svg:svg")
            .append("svg:g");

var svg_b2 = d3.select("#bucket2")
            .attr("width", w + "px")
            .attr("height", h + "px")
            .append("svg:svg")
            .append("svg:g");

var svg_b3 = d3.select("#bucket3")
            .attr("width", w + "px")
            .attr("height", h + "px")
            .append("svg:svg")
            .append("svg:g");

//load csv and copy to global variable
    d3.csv("./data_project.csv",function(csv) {
        master=data=csv;
        init(master);
    });

d3.select("#filter").on("change", redraw);

function init(){
        var nested_data = d3.nest()
                .key(function(d) { return d.who}).sortKeys(d3.ascending)
                .rollup(function(leaves) { return leaves.length; })
                .entries(master);

// select list for filtering
        var list = d3.select("#who_filter").append("select")
                .attr("class", "filter")
                .attr("id", "who_select");

list.selectAll("option")
                .data(nested_data)
                .enter()
                .append("option")
                .attr("value", function(d) {return d.key;})
                .text(function(d) {
                    return d.key; });

// Buttons to highlight
        var checks = d3.select("#who_high")
                .data(nested_data)
                .enter().append("button")
                .attr("value", function(d) {return d.key;})
                .text(function(d) {
                    return d.key; });
        datanest();
        datadraw();
    }

function redraw(master){
        filter();
//fonfilter();
//fonfilter2(); etc etc etc
//nestswitcher..... use switch to choose appropriate nest.
//visswitcher..... use switch to choose appropriate vis. maybe here https://stackoverflow.com/questions/6643015/switch-and-select-in-javascript
        datanest();
        datadraw();
    }

function filter () {
        var who = $("#who_select").val();
        data = master.filter(function(d) { return d.who  == who;});
        return data;
    }

function datanest () {
        node = root = {values: d3.nest()
                .key(function(d) { return d.status; })
                .entries(data)};

bucket1_data = root.values[0];
        bucket2_data = root.values[1];
        bucket3_data = root.values[2];

// calculate total size per bucket and overall
        totals = d3.nest()
                .key(function(d) { return d.status; })
                .rollup(function(leaves) {
                    return  d3.sum(leaves, function(d) {return d.time;} );})
                .map(data);

total_time = totals["Complete"] + totals["In Progress"] + totals["Not Started"];

}

function datadraw() {

// calculate percentage of total for each bucket
        var pct_b1 = Math.round(h * totals["Not Started"] / total_time),
            pct_b2 = Math.round(h * totals["In Progress"] / total_time),
            pct_b3 =  Math.round(h * totals["Complete"] / total_time);

// resize treemps to they reflect the correct proportion of the overall time
        treemap1.size([w, pct_b1]);
        treemap2.size([w, pct_b2]);
        treemap3.size([w, pct_b3]);

// filter gets the leaves
        celldraw(svg_b1.selectAll(".cell")
                .data(treemap1.nodes(bucket1_data).filter(function(d) { return !d.values; }) ));
        celldraw(svg_b2.selectAll(".cell")
                .data(treemap2.nodes(bucket2_data).filter(function(d) { return !d.values; }) ));
        celldraw(svg_b3.selectAll(".cell")
                .data(treemap3.nodes(bucket3_data).filter(function(d) { return !d.values; }) ));

svg_b1.attr("transform", "translate(0,"+(h-pct_b1)+")");
        svg_b2.attr("transform", "translate(0,"+(h-pct_b2)+")");
        svg_b3.attr("transform", "translate(0,"+(h-pct_b3)+")");
    }

function celldraw(cell) {

// enter new elements
        var cellEnter = cell.enter().append("g")
                .attr("class", "cell")
        // .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })

cellEnter.append("rect")
        cellEnter.append("text")

// update remaining elements

cell.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })

cell.select("rect")
                .attr("width", function(d) { return d.dx - 1; })
                .attr("height", function(d) { return d.dy - 1; })
                .attr("class", function(d) { return  "cell "+ d.who; })
                .style("fill", function(d) { return color(d.parent.key); })

cell.select("text")
                .attr("x", function(d) { return d.dx / 2; })
                .attr("y", function(d) { return d.dy / 2; })
                .attr("dy", ".35em")
                .attr("text-anchor", "middle")
                .text(function(d) { return d.id; })
                .style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; })

// remove old elements
        cell.exit().remove()
    }

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

Modified http://d3js.org/d3.v2.js to a secure url

https://d3js.org/d3.v2.js

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js