Old school D3 from simpler times

All examples By author By category About

xidag

Full window Github gist

responsive2

Built with blockbuilder.org

forked from curran's course

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name ="viewport" content="width=device-width">
  <title>general update pattern-webpage</title>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 
        position: fixed;
        left: 0 px;
        right: 0 px;
        top: 0 px;
        bottom: 0 px;      
        margin: 0 px;
    }
    
    .graph-svg-component {
        background-color: AliceBlue;
    }
    
  </style>
</head>

<body>

<script>
    function myResponsiveComponent(container, props, bars){
      const {width, height} = props;
      
      let svg = container.selectAll('svg').data([null]);
      svg = svg.enter().append('svg')
        .merge(svg)
          .attr('width', width)
          .attr('height', height)
          .attr("class", "graph-svg-component");
     
      
      const rect = svg.selectAll('rect').data([null]);
      rect
        .enter().append('rect')
          .attr('rx', 100)
        .merge(rect)
          .attr('width', width)
          .attr('height', height);
      
      const bar = svg.selectAll('.p') //class: .x
        .data(bars);
      
      bar
        .merge(bar.enter().append('rect')
          .attr('class', 'p')
          .attr('y', 100)
          .attr('width', 70)
          .attr('height', 300)
          .attr('fill', 'green'))
          .attr('x', function(d){ return d; });  
       
    }
    
    function render(bars) {
      myResponsiveComponent(d3.select('body'), {
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight
    }, bars);
      
      
    }
    
    render([400, 800]);
    
    
    
    window.addEventListener('resize', render);
 
    console.log(document.documentElement.clientWidth);
    console.log(document.documentElement.clientHeight);

//render([285, 186]); //Enter
    //render([51, 126, 200]); //Enter + Update
    //render([3]); //Exit

</script>
</body>

https://d3js.org/d3.v4.min.js