Dendrogram + Grouped Horizontal Bar Chart

Dendrogram + Grouped Horizontal Bar Chart, based on and inspirited by Mike Bostock's brilliant Dendrogram.

At first, I was hunting for a skills bar chart for my portfolio site, then I saw Mike's Dendrogram. I was thinking if there was a traditional bar chart attached to the pointers of Dendrogram, the new combination gonna have the best of both charts with very limited separation. Then this happens, with a little bit animation and custom colors. I also commented on both Mike's and mine codes.

Original Dendrogram: /mbostock/4063570

For better visualization, visit my portfolio at: http://www.saturnringstation.com/portfolio/

forked from bumbeishvili's block: Dendrogram + Grouped Horizontal Bar Chart

forked from willzjc's block: Dendrogram + Grouped Horizontal Bar Chart

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .link {
        fill: none;
        stroke: #555;
        stroke-opacity: 0.4;
        stroke-width: 1px;
    }
    text {
        font-family: "Arial Black", Gadget, sans-serif;
        fill: black;
        font-weight: bold;
        font-size: 14px
    }

.xAxis .tick text{
        fill: black;
    }
    .grid .tick line{
        stroke: grey;
        stroke-dasharray: 5, 10;
        opacity: 0.7;
    }
    .grid path{
        stroke-width: 0;
    }

.node circle {
        fill: #999;
    }
    .node--internal circle {
        fill: #555;
    }
    .node--internal text {
        font-size: 16px;
        text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff;
    }
    .node--leaf text {
        fill: white;
    }
    .ballG text {
        fill: white;
    }

.shadow {
        -webkit-filter: drop-shadow( -1.5px -1.5px 1.5px #000 );
        filter: drop-shadow( -1.5px -1.5px 1.5px #000 );
    }
</style>

// main svg
    var svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height"),
            g = svg.append("g").attr("transform", "translate(20,0)");       // move right 20px.

// x-scale and x-axis
    var experienceName = ["", "Basic 1.0","Alright 2.0","Handy 3.0","Expert 4.0","Guru 5.0"];
    var formatSkillPoints = function (d) {
        return experienceName[d % 6];
    }
    var xScale =  d3.scaleLinear()
            .domain([0,5])
            .range([0, 400]);

var xAxis = d3.axisTop()
            .scale(xScale)
            .ticks(5)
            .tickFormat(formatSkillPoints);

// Setting up a way to handle the data
    var tree = d3.cluster()                 // This D3 API method setup the Dendrogram datum position.
            .size([height, width - 460])    // Total width - bar chart width = Dendrogram chart width
            .separation(function separate(a, b) {
                return a.parent == b.parent            // 2 levels tree grouping for category
                || a.parent.parent == b.parent
                || a.parent == b.parent.parent ? 0.4 : 0.8;
            });

var stratify = d3.stratify()            // This D3 API method gives cvs file flat data array dimensions.
            .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

d3.csv("skillsdata.csv", row, function(error, data) {
        if (error) throw error;

var root = stratify(data);
        tree(root);

// Draw every datum a line connecting to its parent.
        var link = g.selectAll(".link")
                .data(root.descendants().slice(1))
                .enter().append("path")
                .attr("class", "link")
                .attr("d", function(d) {
                    return "M" + d.y + "," + d.x
                            + "C" + (d.parent.y + 100) + "," + d.x
                            + " " + (d.parent.y + 100) + "," + d.parent.x
                            + " " + d.parent.y + "," + d.parent.x;
                });

// Setup position for every datum; Applying different css classes to parents and leafs.
        var node = g.selectAll(".node")
                .data(root.descendants())
                .enter().append("g")
                .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
                .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

// Draw every datum a small circle.
        node.append("circle")
                .attr("r", 4);

// Setup G for every leaf datum.
        var leafNodeG = g.selectAll(".node--leaf")
                .append("g")
                .attr("class", "node--leaf-g")
                .attr("transform", "translate(" + 8 + "," + -13 + ")");

leafNodeG.append("rect")
                .attr("class","shadow")
                .style("fill", function (d) {return d.data.color;})
                .attr("width", 2)
                .attr("height", 30)
                .attr("rx", 2)
                .attr("ry", 2)
                .transition()
                    .duration(800)
                    .attr("width", function (d) {return xScale(d.data.value);});

leafNodeG.append("text")
                .attr("dy", 19.5)
                .attr("x", 8)
                .style("text-anchor", "start")
                .text(function (d) {
                    return d.data.id.substring(d.data.id.lastIndexOf(".") + 1);
                });

// Write down text for every parent datum
        var internalNode = g.selectAll(".node--internal");
        internalNode.append("text")
                .attr("y", -10)
                .style("text-anchor", "middle")
                .text(function (d) {
                    return d.data.id.substring(d.data.id.lastIndexOf(".") + 1);
                });

// Attach axis on top of the first leaf datum.
        var firstEndNode = g.select(".node--leaf");
            firstEndNode.insert("g")
                    .attr("class","xAxis")
                    .attr("transform", "translate(" + 7 + "," + -14 + ")")
                    .call(xAxis);

// tick mark for x-axis
            firstEndNode.insert("g")
                    .attr("class", "grid")
                    .attr("transform", "translate(7," + (height - 15) + ")")
                    .call(d3.axisBottom()
                            .scale(xScale)
                            .ticks(5)
                            .tickSize(-height, 0, 0)
                            .tickFormat("")
                    );

// Emphasize the y-axis baseline.
        svg.selectAll(".grid").select("line")
                .style("stroke-dasharray","20,1")
                .style("stroke","black");

// The moving ball
        var ballG = svg.insert("g")
                .attr("class","ballG")
                .attr("transform", "translate(" + 1100 + "," + height/2 + ")");
        ballG.insert("circle")
                .attr("class","shadow")
                .style("fill","steelblue")
                .attr("r", 5);
        ballG.insert("text")
                .style("text-anchor", "middle")
                .attr("dy",5)
                .text("0.0");

// Animation functions for mouse on and off events.
        d3.selectAll(".node--leaf-g")
                .on("mouseover", handleMouseOver)
                .on("mouseout", handleMouseOut);

function handleMouseOver(d) {
            var leafG = d3.select(this);

leafG.select("rect")
                    .attr("stroke","#4D4D4D")
                    .attr("stroke-width","2");

var ballGMovement = ballG.transition()
                    .duration(400)
                    .attr("transform", "translate(" + (d.y
                            + xScale(d.data.value) + 90) + ","
                            + (d.x + 1.5) + ")");

ballGMovement.select("circle")
                    .style("fill", d.data.color)
                    .attr("r", 18);

ballGMovement.select("text")
                    .delay(300)
                    .text(Number(d.data.value).toFixed(1));
        }
        function handleMouseOut() {
            var leafG = d3.select(this);

leafG.select("rect")
                    .attr("stroke-width","0");
        }

});

function row(d) {
        return {
            id: d.id,
            value: +d.value,
            color: d.color
        };
    }
</script>

https://d3js.org/d3.v4.min.js