JSFiddle - React, Tailwind, and code Playground

by Shankar

HTML

<!DOCTYPE html>
<meta charset="utf-8" />
<head>
  <title>d3 svg test</title>
  <style type="text/css">
    a {
      font: 8pt"Menlo", "Consolas", "Lucida Console", "Courier", monospace;
      padding: 10px;
      border: 1px solid #000;
      z-index: 2;
    }
    a:link {
      text-decoration: none;
      color:#333;
    }
    a:visited {
      text-decoration: none;
      color:#999;
    }
    a:hover {
      text-decoration: none;
      color:#F00;
    }
    a:active {
      text-decoration: none;
      color:#000;
    }
    svg.projects {
      position: absolute;
      left:0;
      top:0;
      z-index: -5;
    }
    svg circle.orbcircle {
      fill: rgba(255, 255, 255, 1);
      stroke: black;
      stroke-width: 5;
    }
    svg rect.box {
      stroke: red;
      fill: none;
      stroke-width: 1;
      shape-rendering: crispEdges;
    }
    svg use.d3 {
      stroke: black;
    }
    svg #redrect {
      fill: red;
    }
    svg text {
      font: 8pt"Menlo", "Consolas", "Lucida Console", "Courier", monospace;
    }
    svg line.leader {
      stroke: black;
      stroke-width: 1.5;
    }
    .x-axis path, .x-axis line, .y-axis path, .y-axis line {
      fill: none;
      stroke: none;
    }
    .realaxes line {
      fill: none;
      stroke: black;
      stroke-width: 1;
      shape-rendering: crispEdges;
    }
    .x-axis text, .y-axis text {
      font: 8pt"Menlo", "Consolas", "Lucida Console", "Courier", monospace;
    }
    .x-label, y-label {
      font-size: 9pt;
    }
  </style>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
  <script type="text/javascript" src="toshare.js"></script>
</body>

JavaScript

var projects = [{
  "name": "first",
  "date": "12/12/12",
  "img": "icon-01",
  "hours": 50
}, {
  "name": "second",
  "date": "1/2/12",
  "img": "icon-02",
  "hours": 2.5
}, {
  "name": "third",
  "date": "8/4/10",
  "img": "icon-03",
  "hours": 0.25
}, {
  "name": "fourth",
  "date": "1/29/08",
  "img": "icon-04",
  "hours": 17
}, {
  "name": "fifth",
  "date": "4/6/07",
  "img": "icon-05",
  "hours": 30
}, {
  "name": "sixth",
  "date": "3/14/11",
  "img": "icon-06",
  "hours": 13
},

];

for (var i = 0; i < 50; i++) {
  projects.push(randgenerator());
}


var w = $(window).width();
var h = $(window).height();

if (w >= h) {
  buffer = h / 8;
} else {
  buffer = w / 8;
}

var x, y, // scales
  r = 15, // circle radius
  s = 2 * r / 150; // scale factor (for icons)




var innerstroke = .75;
innerstroke /= s;



var format = d3.time.format("%m/%d/%y");
var formatDate = function (d) {
  return format.parse(d.date);
}




//								SCALES




var x = d3.time.scale()
  .domain(d3.extent(projects, function (d) {
  return format.parse(d.date);
}))
  .nice(d3.time.year)
  .range([buffer, w - buffer]);

var y = d3.scale.linear()
  .domain(d3.extent(projects, function (d) {
  return d.hours;
}))
  .range([h - buffer * 1.5, buffer])
  .nice();

var ux = function (x) {
  return (x) / s - 75;
}
var uy = function (y) {
  return (y) / s - 75;
}



//								MAIN DRAWING



var projectmap = d3.select("body")
  .append("svg")
  .attr("class", "projects")
  .attr("width", "100%")
  .attr("height", "100%");


projects.forEach(function (d, i) { // setup node origins
  d.x = x(formatDate(d));
  d.y = y(d.hours);
  d.x0 = x(formatDate(d));
  d.y0 = y(d.hours);
  d.r = r;
});



var padding = 7;

var force = d3.layout.force()
  .nodes(projects)
  .on("tick", tick)
  .gravity(0)
  .friction(0.95)
  .start();

var leader = projectmap.selectAll("line")
  .data(projects)
  .enter().append("line")
  .attr("class", "leader")
  .attr("x1", 0)
  .attr("y1", 0)
  .attr("x2", function (d)...