visually

by Igor Cuckovic

HTML

<script src="http://create.visual.ly/static/js/visually-nugget-api-all.min.js"></script>
<div id="my-nugget-placeholder"></div>

CSS

svg text {
    fill: #fff;
    font-family:"Arial";
}
svg .arc {
    stroke: #fff;
    stroke-width: 1px;
}

div.tooltip {
    position: absolute;
    text-align: left;
    width: 140px;
    height: 30px;
    padding: 2px;
    padding-left: 6px;
    font: 12px sans-serif;
    background: #fff;
    border: 0px;
    border-radius: 4px;
    pointer-events: none;
}

JavaScript

visually.nuggetFunctions || (visually.nuggetFunctions = {});

visually.nuggetFunctions['testNugget'] = function (view) {
    return NuggetFactory({
        // define the original size of the SVG block
        getDimensions: function () {
            return {
                width: 500,
                height: 500
            };
        },

        // define the SVG rendering function
        // 'parent' is a d3 wrapper for the parent SVG block - either a top-level SVG element or a '<svg:g>' element
        draw: function (parent) {
            var dimensions = this.getDimensions(),

                // retrieve the data passed to the nugget constructor (see below)
                data = this.data(),

                // retrieve the config settings passed to the nugget constructor  (see below)
                config = this.config();

            // draw some SVG elements based on the data passed //


            /*
            parent.append('text')
                    //.text(data[0].age)
                    .text(config.r)
                    .style('fill', config.color(14106543))
                    .attr('y',20);
            */
            

            
            var group = parent.append("g")
                .attr("transform", "translate(200, 200)");
            
            var div = d3.select("body").append("div")
                .attr("class", "tooltip")
                .style("opacity", 0);


            var arcs = group.selectAll(".arc")
                .data(config.pie(data))
                .enter()
                .append("g")
                .attr("class", "arc");



            arcs.append("path")
                .attr("d", config.arc)
                .attr("fill", function (d, i) {
                //return config.color1(d.data[0]);
                return config.color1(d.data);
            })
                .attr("id", function (d) {
                return d.data[1];
            })
                .on("mousemove", function (d, i) {  
             ...