D3 Examples - d3-fun

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {        margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
​
      body {
        height: 100vh;
        width: 100vw;
      }
​
      svg {
        height: 100%;
        width: 100%;
      }
  </style>
</head>
​
<body>
  <svg>
  </svg>
  <script>
    var rectWidth = 50;
    var height = 600;
    var data = [100, 250, 175, 200, 120,];
​
//     let svg = d3.select('svg')
//     .selectAll('rect')
//       .data(data)
//       .enter()
//       .append('rect')
//      .attr('x', (d, i) => {
//         return i * rectWidth;
//       })
//      .attr('y', d => {
//         return height - d;
//       })
//      .attr('width', rectWidth)
//      .attr('height', d => d)
//      .attr('fill', function(d) {
//         if(d === 250) return 'red'
//         return 'blue'
//       })
//      .attr('stroke', '#fff')
    
         var yScale = d3.scaleLinear()
         .domain([0, 100])
         .range([400,0])
       
       var yAxis = d3.axisLeft()
         .scale(yScale)
 
       
       
       var axis = d3.select('svg').append('g')
         .attr('transform', 'translate(40, 20)')
         .call(yAxis)
         
       var text = axis.selectAll('text')
         .attr('fill', d => d === 60 ? 'red' : 'blue')
       
       
       
       
       
  </script>
</body>
​
    