Creating a d3.js Treemap zoomable with CSV

Question

I want to create a Treemap with d3 but the enitities I want to show don't have a hierarchy. Is it still possible to create a Treemap?

My data includes crimes in Germany.

The I just wanted to show in the beginning all the crimes (Treemap not zoomed). then if I click on one of the boxes it will show me how many of them are male or female.

Sounds so easy but I really don't get it with my example.

I have tried so many examples but I dont get it because of the hierarchy.

First screenshot

Seccond Screenshot

Everlearn · Accepted Answer

You can arrange tabular data in a hierarchy using d3.nest(). This function groups the data under multiple key fields, similar to a GROUP BY statement in SQL - more detail can be found in the nest documentation. For an introduction to using d3.nest(), see this guide.

D3's treemap requires data to be arranged in a hierarchy with a root node, so you should nest all table entries under a single 'root' value as well as any fields that you wish to use to subdivide the treemap. The following code will arrange your data into a hierarchy that splits it by Sexus only:

var nested_data = d3.nest()
    // Create a root node by nesting all data under the single value "root":
    .key(function () { return "root"; })
    // Nest by other fields of interest:
    .key(function (d) { return d.Sexus; })
    .entries(data);

For example, the following code shows a single rectangle in the treemap for all crimes and displays the number of crimes by Sexus when the user clicks on the rectangle:

To subdivide the treemap by a given field, the data must be nested by that field and tree.children must be bound to the DOM instead of [tree]:

    //...
    d3.csv("data/GermanyCrimeData.csv", function (error, data) {
        if (error) throw error;

        var nested_data = d3.nest()
            .key(function () { return "root"; })
            .key(function (d) { return d.Straftat; })
            .key(function (d) { return d.Sexus; })
            .entries(data);

        var root = d3.hierarchy(nested_data[0], function (d) { return d.values; })
            .sum(function (d) { return d.Tatverdaechtige_Insgesamt_deutsch; });

        var tree = treemap(root);

        var nodes = svg.selectAll(".node")
            .data(tree.children)  // Bind the children of the tree's root node
          .enter().append("g")
            .attr("class", "node")
            .attr('transform', function (d) {
                return 'translate(' + [d.x0, d.y0] + ')'
            })
            .on("click", function () {
                d3.select(this).select("text").style("visibility", "visible");
                //See https://stackoverflow.com/questions/44074031/d3-show-hide-text-of-only-clicked-node
            });

        //...

A simple way to make the treemap zoomable is to place the code that draws the treemap in a function, then use on("click", ...) to re-trigger the function whenever a rectangle is clicked, zooming in on the chosen node:

    //...
    d3.csv("data/GermanyCrimeData.csv", function (error, data) {
        if (error) throw error;

        var nested_data = d3.nest()
            .key(function () { return "root"; })
            .key(function (d) { return d.Stadt_Landkreis; })
            .key(function (d) { return d.Straftat; })
            .key(function (d) { return d.Sexus; })
            .entries(data);


        function drawTreemap(root) {

            var hierarchical_data = d3.hierarchy(root, function (d) { return d.values; })
                .sum(function (d) { return d.Tatverdaechtige_Insgesamt_deutsch; });

            var tree = treemap(hierarchical_data);

            // Clear the contents of the

Finally, to animate the transitions, the following code is a zoomable treemap based on Mike Bostock's example, where flare.json has been replaced with the data from your CSV file, arranged with d3.nest() and d3.hierarchy() (this example uses D3 v3):

Creating a d3.js Treemap zoomable with CSV

Answers (1)

Related Questions