viewBox space coordinate transformation

experimenting with the SVG attributes viewBox and preserveAspectRatio

created with d3js v4 and ES2015

forked from enjalot's block: viewBox space coordinate transformation

<!DOCTYPE html>
<html>
<head>
<title>viewBox space coordinate transformation</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
<script src='https://npmcdn.com/babel-core@5.8.34/browser.min.js'></script>
</head>
<body>
<script lang='babel' type='text/babel'>
  const boxExample = (w, h) => {
    //
    // setup a parent svg
    //
    const svg = d3.select('body')
      .append('svg:svg')
        // .attr('width', '1000')
        // .attr('height', '700')
        .attr('width', w)
        .attr('height', h)
        .attr('viewBox', '0 0 100 100')
        .attr('preserveAspectRatio', 'xMinYMin meet')
        .attr('id', 'charts');

svg.append('svg:rect')
      .attr('width', '100%')
      .attr('height', '100%')
      .attr('stroke', '#000')
      .attr('stroke-width', 1)
      .attr('fill', 'none');
    
		//
    // setup the square
    //
    // 100 is the value we use by convention
    // for the width and height of the viewBox
    // initialize the square side length as half of that value
    const sideLength = 100 / 2;
    const halfSideLength = sideLength / 2;
    const mybox = svg.append('svg:rect')
      .attr('width', sideLength)
      .attr('height', sideLength)
      .attr('transform', `translate(${halfSideLength}, ${halfSideLength})`)
      .attr('fill', '#00ff00')
      .attr('fill-opacity', 0.8)
      .attr('stroke', '#000')
      .attr('stroke-width', 5)
      .attr('stroke-opacity', 0.6);

const boxnode = mybox.node();
    const bbox = boxnode.getBBox();
    console.log('bbox', bbox);
  };

//
  // draw some boxes with squares inside
  //
  // 1 to 1 relationship between screen pixels and viewBox
  boxExample(100, 100);
  
  // skewed shape specified, but fixed aspect ratio,
  // since we set preserveAspectRatio `xMinYMin`
  boxExample(333, 200);
  
  // larger now, a 3 to 1 relationship between screen pixels and viewBox
  boxExample(300, 300)
</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js

https://npmcdn.com/babel-core@5.8.34/browser.min.js