Tree Map

Tree Map

by Graham Dixon

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="graph"></div>

CSS

body {
    font: 10px sans-serif;
}

.link {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.sibling {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.border {
    fill: none;
    shape-rendering: crispEdges;
    stroke: #aaa;
}

.node {
    stroke: red;
    fill: white;
}

#graph svg {
    margin-top: -80px;
}

JavaScript

/*!
 * Script: jQuery.formRepeatable.js
 * Description: jQuery.formRepeatable - A jQuery plugin...
 * Copyright: Copyright (c) 2018 Money Marketplace LTD
 * Author: GDixon
 * Email: [email protected]
 * Licensed: MIT
 * Requires: jQuery > 1.9
 * Version: 0.0.1
 */
;
(function(factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module depending on jQuery
        define(['jquery', 'd3'], factory);
    } else {
        // No AMD. Register plugin with global jQuery object
        factory(jQuery, d3);
    }
}(function($, d3) {

    // defaults to align the repeatable instance with the dom situation
    var defaults = {
        dataAttr: "createMap",
        // top level binding context - this allows us to only bind within a known context
        $context: $(document)
    };

    $.fn.createMap = function(root, siblings, options) {
        // the options must be passed to the init func as an array - convert any strings
        var optionsArray = (typeof options == "string" ? [options] : (options ? options : {}));
        // only create when the giving el exists
        if ($(this).length) {
            // extend defaults with options and set to settings
            optionsArray = $.extend({}, defaults, (typeof optionsArray !== "undefined" ? optionsArray : []));
            // check that createMap instance hasnt already been created against instance
            if (typeof $(this).data(optionsArray.dataAttr) == "undefined") {
                // create a new instance
                var instance = $(this).data(optionsArray.dataAttr, new createMap(this, optionsArray, root, siblings)).data(optionsArray.dataAttr);
            } else {
                // do option based functions
                if (typeof options !== 'undefined' && options == "destroy") {
                    // fully destroys the repeatable instance
                    var instance = this.data(optionsArray.dataAttr).destroy();
                } else...