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>
       <input type="submit" id="create" value="Submit" onClick="colCircles()">
        <form>
<input type="text" id="formValueId"/><input type="button" id="button-id" value="radius"/>

</form>        

        <script type="text/javascript">
           var colCircles = function() {
var dataset=[];
for (i=0;i<100;i++){
dataset.push([Math.random(),Math.random()]);
}
var w = 500;
var h = 200;
var xScale = d3.scale.linear().
  domain([0, 1]). // 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 width of the diagram.
var cScale = d3.scale.linear().
  domain([0, 1]).
  range([0, 255]); 
var svg = d3.select('body').append("svg:svg").attr("width", w).
  attr("height", h);
var yScale = d3.scale.linear().domain([0,dataset.length]).range([0,w]);
svg.selectAll("circle").
  data(dataset).
  enter().
  append("svg:circle").
  attr("cx", function(d,i) { return yScale(i); }).
  attr("cy", function(d) { return h - zScale(d[0]) ; }).
  attr("r", function(d) { return Math.random()*10; }).  
  attr("fill", function(d,i){return 'rgb('+Math.round(cScale(Math.random()))+','+Math.round(cScale(d[1]))+','+Math.round(cScale(d[0]))+')'});}
  var rScale = function(r){
  d3.selectAll('circle').transition(). attr("r", function(d) { return Math.random()*r; })};
        </script>
    </body>
</html>

CSS

#button-id{
}

JavaScript

$(document).ready(function() {
    $('#button-id').click(function() {
      rScale($('#formValueId').val());
    });
});