JSFiddle - React, Tailwind, and code Playground

by Matthew Bowlby

HTML

<body>

  <div class="header">  
    <h1 align="center">Candidates by Party</h1>  
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
  </div>

<div class="chart"></div>

CSS

.chart div {
    font: 10px sans-serif;
    background-color: steelblue;
    text-align: right;
    padding: 3px;
    margin: 1px;
    color: white;
}

.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

var data = [{
    "id": "EEC6B010-F6E9-48B4-87F3-F24B2D71457C",
    "nameAbbreviated": "Verité",
    "value": "121"
}, {
    "id": "DCCC0381-0B18-408D-B4B5-797736C01EE6",
    "nameAbbreviated": "Lavalas",
    "value": "109"
}, {
    "id": "06C02B09-2829-489E-AEE8-4B4705EF815A",
    "nameAbbreviated": "Fusion",
    "value": "104"
}, {
    "id": "B85A5B7A-6B3E-44BC-B933-CFC7C4F21B71",
    "nameAbbreviated": "Renmen Ayiti",
    "value": "101"
}, {
    "id": "E5B984D8-C334-42B6-8A6E-0A4847C3E0EB",
    "nameAbbreviated": "OPL",
    "value": "101"
}, {
    "id": "4E8B7CE7-4DAC-4678-82DD-E5CEBD98F927",
    "nameAbbreviated": "Pitit Dessalines",
    "value": "95"
}, {
    "id": "D011724F-246B-4B8F-84B0-15C9BA5AA25F",
    "nameAbbreviated": "KID",
    "value": "91"
}, {
    "id": "5D3370AD-715D-4124-99AC-F084CB77DA7F",
    "nameAbbreviated": "Bouclier",
    "value": "60"
}, {
    "id": "B083B402-AAFC-4F3E-9926-3A828401FE2B",
    "nameAbbreviated": "Pou Nou Tout",
    "value": "58"
}, {
    "id": "97DFDDDC-DF7C-41D8-B41E-513ED2129497",
    "nameAbbreviated": "LAPEH",
    "value": "55"
}, {
    "id": "ABD3EFC7-5937-4591-B511-C024396F2F4F",
    "nameAbbreviated": "Respè",
    "value": "47"
}, {
    "id": "6297E405-C6AA-4EF3-8B4C-A4CFD4C7407A",
    "nameAbbreviated": "Inite",
    "value": "47"
}, {
    "id": "41DC3C63-F423-4941-ACF7-63118BD9CE19",
    "nameAbbreviated": "AAA",
    "value": "40"
}, {
    "id": "442F6E92-33D7-4D9D-988A-DDCE8F9B5C9E",
    "nameAbbreviated": "APLA",
    "value": "40"
}, {
    "id": "1E08C86E-D1F5-4FC4-A57C-DB03D9A6CF35",
    "nameAbbreviated": "Consortium",
    "value": "39"
}, {
    "id": "33F4766F-E324-43F4-9C80-7B7640465920",
    "nameAbbreviated": "Defile",
    "value": "37"
}, {
    "id": "CB847E83-9915-4030-8AC2-F71262B7E220",
    "nameAbbreviated": "Kontra Pèp La",
    "value": "36"
}, {
    "id": "6053FF19-079A-49E4-8061-EE569785A3F8",
    "nameAbbreviated": "Platforme G-18",
    "value": "35"
}, {
    "id":...