JSFiddle - React, Tailwind, and code Playground

by johannpickard

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js"></script>
<script src="d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>

<div class="container">
  <h2>Визуализация данных My Linker</h2>
  <p>Всего заявок: </p><span id="sum"></span> штук.
  <br>
  <br>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
      <input type="radio" name="options" id="chronological" autocomplete="off" checked> Сбросить
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options" id="descending" autocomplete="off"> Сортировать
    </label>
  </div>
</div>

CSS

.container {
  font-family: "Verdana";
  margin-top: 40px;
}

svg {
  margin-top: 20px;
  margin-top: 20px;
}

svg rect {
  //fill: blue;
}

svg rect:hover {
  fill: red;
}

svg text {
  fill: black;
  font: 12px sans-serif;
  text-anchor: end;
}

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.d3-tip {
  line-height: 1;
  font-family: sans-serif;
  padding: 5px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 8px;
}

JavaScript

data = {
  names: [
    "(1) Европа",
    "(2) Казань",
    "(3) Санкт-Петербург",
    "(4) Сочи",
    "(5) Екатеринбург",
    "(6) Нижний Новгород",
    "(7) Минск",
    "(8) Великий Устюг",
    "(9) Калининград",
    "(10) Кострома",
    "(11) Петрозаводск",
    "(12) Рязань",
    "(13) Симферополь",
    "(14) Тверь"
  ],
  days: [
    75,
    614,
    621,
    326,
    191,
    193,
    26,
    14,
    146,
    20,
    77,
    15,
    110,
    100
  ]
};

// code for displaying sum begins
var sum = data.days;
var result = sum.reduce(function(a, b) {
  return a + b;
}, 0);
document.getElementById('sum').innerHTML = result;
// sum ends

// code for color bars begins
var randomColor = (function() {
  var golden_ratio_conjugate = 0.618033988749895;
  var h = Math.random();

  var hslToRgb = function(h, s, l) {
    var r, g, b;

    if (s == 0) {
      r = g = b = l; // achromatic
    } else {
      function hue2rgb(p, q, t) {
        if (t < 0) t += 1;
        if (t > 1) t -= 1;
        if (t < 1 / 6) return p + (q - p) * 6 * t;
        if (t < 1 / 2) return q;
        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
        return p;
      }

      var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
      var p = 2 * l - q;
      r = hue2rgb(p, q, h + 1 / 3);
      g = hue2rgb(p, q, h);
      b = hue2rgb(p, q, h - 1 / 3);
    }

    return '#' + Math.round(r * 255).toString(16) + Math.round(g * 255).toString(16) + Math.round(b * 255).toString(16);
  };

  return function() {
    h += golden_ratio_conjugate;
    h %= 1;
    return hslToRgb(h, 0.5, 0.60);
  };
})();
// color bars ends

var newData = [];
data.names.forEach(function(d, i) {
  newData.push({
    name: d,
    days: data.days[i],
    id: i
  })
});

var margin = {
    top: 100,
    right: 20,
    bottom: 200,
    left: 80
  },
  width = 1150 - margin.left - margin.right,
  height = 650 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
  .domain(newData.map(function(d) {
    return d.name;
  }))
 ...