JSFiddle - React, Tailwind, and code Playground

by raam86

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        <p>Welcome to d3.js animations by 3dot14 </p>
     
        <ul><li><input type="radio" name="type" value="rgb"> RGB</li>
            <ul class="inline">
            <li><input type="text" name="red" value="0"></li>
            <li><input type="text" name="green" value="0"></li>
            <li><input type="text" name="blue" value="0"></li>
            </ul>
            <li><input type="radio" name="type" value="hex">HEX</li>
            <li><input type="text" name="hex" value="#ffffff"></li>
                        <li><input type="button" name="group1" value="ייצר צבע" onclick="color()">Color</li>
        </ul>

        <script type="text/javascript">

var h = 700;
var w = 700;
var svg = d3.select('body').append("svg:svg").attr("width", w).attr("height", h);
document.onload = svg;
var dataset = [];
var color = function() {

    dataset.push(1);
    var red = $('[name="red"]').val();
    var green = $('[name="green"]').val();
    var blue = $('[name="blue"]').val();
    var hex = $('[name="hex"]').val();
    var rgb = $('input:radio[name=type]:checked').val();
    console.log(rgb);

    //Draw Circles
    svg.selectAll("circle").
    data(dataset).
    enter().
    append("svg:circle").
    attr("cx", function(d, i) {
        return 350+dataset.length*10;
    }).
    attr("cy", function(d) {
        return 100+dataset.length*10;
    }).
    attr("r", function(d) {
        return 100;
    }).attr('id',function(d,i){return 'circle'+i;}).
    attr("fill", function(d, i) { //Choose colors randomly
        var color = "";
        if (rgb == "rgb") {
            color = 'rgb(' + red + ',' + green + ',' + blue + ')';
        }
        else if(rgb=="hex") {
            color = hex ;
        }
            else{
            alert('אנא בחר שיטת צבע');
    ...

CSS

.inline li{
  display:inline-block;
}