static/d3-tutorial/manipulation.html

<!DOCTYPE html>
<html>
  <head>
    <title>Data Visualization</title>
    <script src="../js/d3.min.js"></script>
  </head>
  <body>
    <svg width="1600" height="800" id="mainsvg" class="svgs">
        <g id='maingroup' transform='translate(100, 100)'>
            <circle id='circle1' 
            stroke='black' r='66' fill='#4B8E6F' cx='0'></circle>
            <rect id='rect1' class='class2' 
            stroke='black' height='200' width='66' fill='#ff8603' x='100' y='-100'></rect>
            <rect id='rect2' class='class1' 
            stroke='black' height='200' width='66' fill='#ffde1d' x='200' y='-100'></rect>
            <rect id='rect3' class='class1' 
            stroke='black' height='200' width='66' fill='#7289AB' x='300' y='-100'></rect>
            <text id='myText' class='class2' 
            stroke='yellow' font-size='2em' x='400' fill='#1e9d95'>Hey D3! </text>
        </g>
        <g id='secondgroup' transform='translate(550, 100)'>
            <rect id='rect4' class='class2' 
            stroke='black' height='200' width='66' fill='#DD6B66' x='100' y='-100'></rect>
            <rect id='rect5' class='class1' 
            stroke='black' height='200' width='66' fill='#759AA0' x='200' y='-100'></rect>
            <rect id='rect6' class='class1' 
            stroke='black' height='200' width='66' fill='#E69D87' x='300' y='-100'></rect>
        </g>
    </svg>
    <script>
        // write your practice here...
    </script>
  </body>
</html>