JSFiddle - React, Tailwind, and code Playground

by Daniel Lizik

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<div id="chart"></div>
<pre id="console"></pre>

CSS

#chart {
  border: 1px solid #bdc3c7;
}

.circle {
  transition: opacity .25s ease-in-out;
  transition: left .25s ease-in;
  cursor: pointer;
  position: absolute;
  outline: 1px solid #bdc3c7;
}

.circle:hover {
  opacity: .5;
}

#circles {
  border: 1px solid #bdc3c7;
}

JavaScript

var data = (function(n, tmp) { 
  for (var i = 0; i < n; i++) 
  	tmp.push({ x: i * 20, y: _.random(5, 100) })
  return tmp;
})(85, [])

var generate = {
  container:   d3
                  .select("#chart")
                  .append("svg")
                  .attr("width", 700)
                  .attr("height", 200),
                  
  segment:     d3,             
                  
  line:        d3
                  .svg
                  .line()
                  .x(map("x"))
                  .y(map("y"))
                  .interpolate("linear")
};

d3
	.select("#chart")
  .append("svg")
  .attr("width", 700)
  .attr("height", 300)
  .append("line")
  .attr({	"x1": 5, "y1": 100, "x2": 90, "y2": 4 })
  .attr("stroke-width", 2)
  .attr("stroke", "#bdc3c7")
  .on("mouseover", hover)


function hover(e) {
  console.log(this)
	document.querySelector("#console").textContent = JSON.stringify(this.__data__, null, 2);
}

function map(p) {
	return function(o) { return o[p]; };
}