JSFiddle - React, Tailwind, and code Playground

by raam86

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title  <script type="text/javascript" src="../../d3/d3.v2.js"></script>
    </head>
    <body>
        <p>Welcome to d3.js animations by 3dot14 </p>
        <div><input type="checkbox" id="chk_0_keep" name="chk_0_keep" value="Keep random sizes while resizing?"/><label for="chk_0_keep">Keep random sizes while resizing?</label></div>


    </body>
</html>

CSS

.axis path,
.axis line {
    fill: none;
    stroke: red;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

JavaScript

var dataset = [{mcds:34},{burger:40}];


var h = 200;
var w = 700;
var xScale = d3.scale.linear().
domain([0, dataset.length]). // your data minimum and maximum
range([0, w]); // the pixels to map to, e.g., the width of the diagram.
var zScale = d3.scale.linear().
domain([0, 1]). // your data minimum and maximum
range([0, h]); // the pixels to map to, e.g., the height of the diagram.
var cScale = d3.scale.linear(). //Normalize RGB
domain([0, 1]).
range([0, 255]);
var barScale = d3.scale.linear() //Normalize Radius  to an axis
.domain([1, 30]).range([1, w]);
var dragScale = d3.scale.linear().domain([1, w, 1]).range([1, 30, 0.5]);

var drag = d3.behavior.drag().origin(Object).on("drag", dragmove);

function rScale(rad) {
    d3.selectAll('circle').attr("r", function() {

        if (rad < 0) {
            rad = rad + parseInt($(this).attr('r'));
            if(rad<0){
                rad = -rad
                    }
           
            
        }

        return rad;
    })
};


function dragmove() {
    var  randomize =$('#chk_0_keep').prop('checked');
    var curX = $('#select').attr('x');
    d3.select(this).attr("x", x = Math.min(w - 5, Math.max(5, d3.mouse(this)[0])));

    if (randomize) {
        if (x < curX) {
            x = dragScale(x);
            x = -x
        }
        else {
            x = dragScale(x);
        }
    }
    else {
        x = dragScale(x);
    }
    rScale(x);
}
var svgBar = d3.select('body').append("svg:svg").attr("width", w).attr("height", h / 5).attr('id', "bar");

var svg = d3.select('body').append("svg:svg").attr("width", w).attr("height", h);


//Make Axis
svgBar.append("g").attr('class', 'axis').call(d3.svg.axis().scale(barScale).orient("bottom"));

//Make selector Rectangle 
svgBar.append('rect').attr('height', 15).attr('width', 5).attr('id', "select").call(drag);



//drawchart
var values = [];
var arcSVG = d3.svg.arc();
dataset.forEach(function(k,v){
    for (var key in k){
    values.push(k[key]);
    }
             ...