Taste Buds Data Only

by Vivid D

CSS

.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.node {
    font: 12px sans-serif;
}
.link {
    fill: none;
    stroke: lightgray;
    stroke-width: 1.5px;
}

JavaScript

var width = 700,
    height = 700,
    diameter = 500;

var radialCluster = d3.layout.cluster()
    .size([360, diameter/2])
    .separation(function(a, b) {
        return (a.parent == b.parent ? 1 : 2) / a.depth;
    });

var radialDiagonal = d3.svg.diagonal.radial()
    .projection(function(d) {
        return [d.y, d.x / 180 * Math.PI];
    });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")");

var root = getData(),
    nodes = radialCluster.nodes(root),
    links = radialCluster.links(nodes);

var link = svg.selectAll(".link")
    .data(links)
    .enter()
    .append("path")
    .attr("class", "link")
    .attr("d", radialDiagonal);

var node = svg.selectAll(".node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", function (d) {
        return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
    })

node.append("circle")
    .attr("r", 4.5);

node.append("text")
    .attr("dy", ".31em")
    .style("text-anchor", function (d) {
        return d.x < 180 ? "start" : "end";
    })
    .attr("transform", function(d) {
        return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)";
    })
    .text(function (d) {
        return d.name;
    });

d3.select(self.frameElement).style("height", height + "px");


function getData() {
    return {
        "name": "fish",
            "children": [{
            "name": "mussels & clams",
                "children": [{
                "name": "fennel",
                    "size": 1
            }, {
                "name": "garlic",
                    "size": 1
            }, {
                "name": "lemon",
                    "size": 1
            }, {
                "name": "onion",
                    "size": 1
            }, {
                "name": "parsley",
                    "size": 1
            }, {
               ...