Treemap with D3plus

by Heena Mahour

HTML

<script src="http://d3plus.org/js/d3plus.js"></script>
<link rel="stylesheet" href="http://d3plus.org/css/d3plus.css">
<div id="viz"></div>

JavaScript

var geoData = [{"Exposure":65687860.27999999,"name":"Canada","YTD P&L":28429440.08999998,"country":"North America"},{"Exposure":845029699.2870506,"name":"United States","YTD P&L":174140940.88999987,"country":"North America"},{"Exposure":66099690,"name":"United States","YTD P&L":6251034.080000007,"country":"United States"},];
    var groupData = ["name"];
    var colorHeader = "YTD P&L";
    var colorParam= "TotalBaseYTD";

 
   
    var visualization = d3plus.viz()
        .container("#viz")
        .data(geoData)
        .type("tree_map")
        .id(groupData) // grouping entites here

        .color({
            "range": ["#D91E18","white","#006442"],
            //"range": ["#F9180E","#FB4C44","#F97670","#F79793","#F9B4B1", "#C2F5C2", "#A6F7A6", "rgb(121, 234, 121)", "#2BE62B","#07F507"],
            //"range": ["#F9180E","white","#07F507"],
            "heatmap":  ["white", "#006442"],
            "value": colorHeader
        })
         .size("Exposure") // measure values here
        .data({padding: 2})
        .messages({
            "value" : " Loading clip... ", // can specify loading messages here
            "padding" : 2,
            "style" : "large",
            "font" :{
                "size" : 22
            }
        })
        .tooltip({
            "anchor" : "bottom center"
        })
     
       
         
        .text({
            "name":function(d){
                var current_id = visualization.id();
                return d.name
            },
            "country": function(d){
                var current_id = visualization.id();
                return d.country 
            }
        })

        .draw()

    //setTimeout(function(){

    //    $('svg#d3plus').attr('height',570)
    //},1000)