JSFiddle - React, Tailwind, and code Playground

by devgru

HTML

<script src='http://d3js.org/colorbrewer.v1.js'></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

CSS

.axis path, .axis line {
    fill: none;
    stroke: #000;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}
.axis text {
    fill: black;
    stroke: black;
    stroke-width: 0.5px;
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

JavaScript

//http://rawgit.com/
var margin = {top: 50, right: 40, bottom: 30, left: 40}
var width = 950 - margin.left - margin.right
var height = 550 - margin.top - margin.bottom

var Ru_ru = d3.locale(
{
  "decimal": ",",
  "thousands": "\xa0",
  "grouping": [3],
  "currency": ["", " руб."],
  "dateTime": "%A, %e %B %Y г. %X",
  "date": "%d.%m.%Y",
  "time": "%H:%M:%S",
  "periods": ["AM", "PM"],
  "days": ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"],
  "shortDays": ["вс", "пн", "вт", "ср", "чт", "пт", "сб"],
  "months": ["января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря"],
  "shortMonths": ["янв", "фев", "мар", "апр", "май", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"]
}
)

var svg = d3.select('body')
    .append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', 'translate(' +  margin.left + ',' + margin.top + ')')

var x = d3.time.scale().range([0, width])
var y = d3.scale.linear().range([height - 10, 0])
var format = d3.time.format('%m/%d/%y')
var nest = d3.nest().key(function(d) { return d.key })
var stack = d3.layout.stack()
        .values(function(d) { return d.values })
        .x(function(d) { return d.date })
        .y(function(d) { return d.value })
        //.offset('wiggle')
var color = d3.scale.ordinal().range(colorbrewer['Greens'][6])

function prepareData(data) 
{
    data.forEach(function (d) 
    {
       d.date = format.parse(d.date)
       d.value = Number(d.value)
    })
        
    return stack(nest.entries(data))
}

var tip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .direction('n')
      .html(function(d)
      {
        return "<span style='color:red'>" + d.key + "</span>";
      })    

//    var tip_html = tip.html();


svg.call(tip);
 
d3.csv('http://nemetz.devg.ru/d3/test.csv', function (data) 
{
   ...