JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
</body>

CSS

#axis-y,  #axis-z {
	cursor : pointer;
}

#axis-z text{
  fill: red;
}

.lineTl {
	fill : none;
	stroke : orange;
	stroke-width : 1px;
}

.lineGl {
	fill : none;
	stroke : blue;
	stroke-width : 1px;
}

.leukozyt {
	stroke : green;
}

circle {
	cursor: pointer;
	stroke-width : 2;
}

circle + text {
	cursor: pointer;
	font-size : .9rem;
}

circle > * , circle + text{
	pointer-events: none;
}

circle.gl {
  stroke : red;
}

circle.tl {
	stroke : black;
}

circle.leukozyt {
	fill : green;
}

circle.erythrozyt {
	fill : orange;
}

circle.thrombozyt {
	fill : blue;
}

#grid-z line {
  stroke : red;
}

#grid-z[data-visible=false] line {
  display: none;
}

#grid-y[data-visible=false] line {
  display: none;
}

JavaScript

const data = [

              //erythrozyten gl

              [       
                {date : "2017-02-02T23:00:00Z", type : "erythrozyt", value : 3.5, unit : "tl"},
                {date : "2017-02-12T23:00:00Z", type : "erythrozyt", value : 5, unit : "tl"},
                {date : "2017-02-16T23:00:00Z", type : "erythrozyt", value : 4, unit : "tl"},
                {date : "2017-02-19T23:00:00Z", type : "erythrozyt", value : 4.2, unit : "tl"},
                {date : "2017-03-05T23:00:00Z", type : "erythrozyt", value : 5, unit : "tl"},
                {date : "2017-03-15T23:00:00Z", type : "erythrozyt", value : 4.8, unit : "tl"},
                {date : "2017-03-22T23:00:00Z", type : "erythrozyt", value : 4.6, unit : "tl"}
              ],

              //thrombozyten tl

              [       
                {date : "2017-02-05T23:00:00Z", type : "thrombozyt", value : 3.2, unit : "gl"},
                {date : "2017-02-18T23:00:00Z", type : "thrombozyt", value : 5, unit : "gl"},
                {date : "2017-02-22T23:00:00Z", type : "thrombozyt", value : 4, unit : "gl"},
                {date : "2017-02-25T23:00:00Z", type : "thrombozyt", value : 4.2, unit : "gl"},
                {date : "2017-03-01T23:00:00Z", type : "thrombozyt", value : 5, unit : "gl"},
                {date : "2017-03-15T23:00:00Z", type : "thrombozyt", value : 4.8, unit : "gl"},
                {date : "2017-03-20T23:00:00Z", type : "thrombozyt", value : 4.6, unit : "gl"}
              ],

              //leukozyten tl
              [       
                {date : "2017-02-04T23:00:00Z", type : "leukozyt", value : 3.5, unit : "gl"},
                {date : "2017-02-10T23:00:00Z", type : "leukozyt", value : 4, unit : "gl"},
                {date : "2017-02-12T23:00:00Z", type : "leukozyt", value : 3.9, unit : "gl"},
                {date : "2017-02-24T23:00:00Z", type : "leukozyt", value : 4.5, unit : "gl"},
                {date : "2017-03-14T23:00:00Z", type : "leukozyt", value :...