JSFiddle - React, Tailwind, and code Playground

by Gerardo Furtado

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/540963/d3.layout.cloud.js"></script>
<div id="main">
</div>

CSS

.axis path,
.axis line {
  fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}

JavaScript

var data = [[5,3,[{'text':'word1',size:4},{'text':'word2','size':1}]], 
            [3,5,[{'text':'word3',size:5},{'text':'word4','size':4}]],
            [1,4,[{'text':'word1',size:3},{'text':'word2','size':5},{'text':'word3','size':2}]],
            [2,3,[{'text':'word2',size:1},{'text':'word3','size':5}]]];
   
var margin = {top: 20, right: 15, bottom: 60, left: 60},
    width = 500 - margin.left - margin.right,
    height = 250 - margin.top - margin.bottom;
    
var x = d3.scale.linear()
  .domain([0, d3.max(data, function(d) { return d[0]; })])
  .range([ 0, width ]);
    
var y = d3.scale.linear()
  .domain([0, d3.max(data, function(d) { return d[1]; })])
  .range([ height, 0 ]);
 
var chart = d3.select('body')
  .append('svg:svg')
	.attr('width', width + margin.right + margin.left)
	.attr('height', height + margin.top + margin.bottom)
	.attr('class', 'chart')

var main = chart.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
	.attr('width', width)
	.attr('height', height)
	.attr('class', 'main')   
        
// Draw the x axis
var xAxis = d3.svg.axis()
	.scale(x)
	.orient('bottom');

main.append('g')
	.attr('transform', 'translate(0,' + height + ')')
	.attr('class', 'main axis date')
	.call(xAxis);

// draw the y axis
var yAxis = d3.svg.axis()
	.scale(y)
	.orient('left');

main.append('g')
	.attr('transform', 'translate(0,0)')
	.attr('class', 'main axis date')
	.call(yAxis);

var g = main.append("svg:g"); 
    
var circle = g.selectAll("scatter-dots")
  .data(data)
  .enter().append("svg:circle")
  .attr("cx", function (d,i) { return x(d[0]); } )
  .attr("cy", function (d) { return y(d[1]); } )
  .attr("r", 5)
  .on("mouseover", function(){d3.select(this).style("fill", "red")})
  .on("mouseout", function(){d3.select(this).style("fill", "black")});

// FUNCTION TO DISPLAY CIRCLE
circle.on('mouseover', function(d){
  div.style("display", "block")
  d3.select("krog").style("fill", "orange");
 ...