JSFiddle - React, Tailwind, and code Playground

by rbkreisberg

HTML

<script src="https://dl.dropboxusercontent.com/s/hj6nj1d25ltax2m/science.v1.js"></script>
<script src="https://dl.dropboxusercontent.com/s/4xocll72aguws99/d3.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/mjqt4svrh5mjbwv/carve.css">
<script src="https://dl.dropboxusercontent.com/s/z0hyis11d003z80/carve.js"></script>
<div id="plot" style="display:block;height:400px">
</div>
<br/>

Carving event:
<div id="splits">
</div>

JavaScript

var data = [
            { id: "Sparky", height : 10, weight : 14,  breed : "dachsund" },
            { id: "Lucy", height : 24, weight : 64,  breed : "retriever" },
            { id: "Chewbaca", height : 33, weight : 180, breed : "great dane" },
            { id: "Belle", height : 20, weight : 27,  breed : "whippet" },
            { id: "Crowe", height : 28, weight : 95,  breed : "ridgeback" },
            { id: "Chico", height : 7,  weight : 6,  breed : "chihuahua" },
            { id: "Katie", height : 32,  weight : 225,  breed : "mastiff" },
            { id: "Hamish", height : 27,  weight : 50,  breed : "saluki" }
]

var format = d3.format('.3f');

var carve_obj = carve({
            radius : 20,
            margin : { top: 15, bottom: 20, left: 15, right: 50 }
        });
var carve_vis = carve_obj("#plot");

carve_vis
        .colorBy({
            label : "breed",
            list : _.pluck(data, "breed")
        })
        .axisLabel({ x : "Weight (lbs)", y : "Height (in)" })
        .axisKey({ x : "weight", y : "height" })
        .data(data)
        .render();

carve_vis
    .on('partitioncomplete',function(split_obj) {
    var el = document.getElementById("splits");
        el.innerHTML ="";
    var keys = _.keys(split_obj);
    var splitItem = _.object(keys, _.map(keys, function( feature ){
        if ( _.isFinite(split_obj[feature].low) ) {
     el.innerHTML += feature + " - low: " + 
         format(split_obj[feature].low) + ", high: " +
         format(split_obj[feature].high) + "<br/>";
         } else {
           el.innerHTML = feature + " - values: " + split_obj[feature].values
      }
     }));
   });