JSFiddle - React, Tailwind, and code Playground

by nachocab

HTML

<!DOCTYPE HTML>
    <html>
        <head>
            <script src="http://d3js.org/d3.v3.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
            <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/>
            <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
            <script type="text/javascript">
              $(document).ready(function () {
                $("a").tooltip({
                  'placement': 'bottom'
                });

                $("my_circle").tooltip({
                  'placement': 'bottom'
                });
              });
            </script>
        </head>
        <body>
            <a href="#" rel="tooltip" title="first tooltip">hover over me</a>
            
        </body>
    </html>

JavaScript

var data, svg, svg2;

              data = [
                { x: 20, y: 40, name: "B"},
                { x: 50, y: 70, name: "A1"},
                { x: 100, y: 120, name: "A2"}
              ];

              svg = d3.select("body")
                .append('svg:svg')
                .attr('width', "200px")
                .attr('height', "200px")
                .style('background', "lightblue")
                .style('margin', "10px");

              svg.selectAll("circle").data(data, function(d) { return d.name;})
                .enter().append("circle")
                .attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y;})
                .attr("r", 10).attr("fill", "#fff")
                .attr("title", "this is a circle")
                .attr("class","my_circle");