y Labeled data

Tutorials of (Y labeled data) by Kevin trévien

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>y Labeled  data</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.row {
  display: block;
  position: relative;
}

.label {
  font-size: 11px;
  font-family: Arial;
}

.value {
  position: absolute;
  background-color: #123123;
  height: 100%;
}
/* Downloaded from https://www.codeseek.co/ */
$(function(){
	var datas = [];
	var labels = ['2G','3G','4G'];
	
	
	d3.select('body')
		.selectAll('div')
		.data(labels)
		.enter().append('div')
			.text(function(x){
			return x;
		}).attr('class','label');
	
	var $value =  $('.value');
	$value.css('left',$value.attr('offset')+'px');
	$value.css('width',$value.attr('size'));
});

This awesome code ( y Labeled data ) is write by Kevin Trévien, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Kevin Trévien