---
# System prepended metadata

title: d3 experiment - javascript graph library

---

# d3 experiment - javascript graph library

```html
<!DOCTYPE html>
<html>
    <head>
        <title>Shapes in D3</title>
        <script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
      <div style="display:flex">
        <div id="canvas"></div>
        <div style="width: 50px"></div>
        <div id="poly-canvas"></div>
      </div>
    
    <script>
    var canvas = d3.select("#canvas") // D3 uses a jQuery like selector
            .append("svg")
            .attr("height", 600)
            .attr("width", 600);
    var rectangle = canvas.append("rect")
            .attr("height", 600).attr("width", 600)
            .attr("fill", "whitesmoke");
    canvas.append("circle") 
            .attr("cx", 300)
            .attr("cy", 300)
            .attr("r", 250)
            .attr("fill", "none")
            .attr("stroke", "black")
            .attr("stroke-width", 2);
    canvas.append("circle") 
            .attr("cx", 300)
            .attr("cy", 300)
            .attr("r", 200)
            .attr("fill", "none")
            .attr("stroke", "black")
            .attr("stroke-width", 2);

    var drawLine = (canvas, p1, p2) => {
      canvas.append("line")
        .attr("x1", p1.x).attr("y1", p1.y)
        .attr("x2", p2.x).attr("y2", p2.y)
        .attr("stroke-width", 2)
        .attr("stroke", "black");
    }

    var drawLineWithColor = (canvas, p1, p2, color) => {
      canvas.append("line")
        .attr("x1", p1.x).attr("y1", p1.y)
        .attr("x2", p2.x).attr("y2", p2.y)
        .attr("stroke-width", 2)
        .attr("stroke", color);
    }

    var drawLineCenterAngleLength = (canvas, center, angle, length, color) => {
      var rad = (angle / 360.0) * Math.PI * 2.0
      var unitCircleDest = {x: Math.cos(rad), y: Math.sin(rad)}
      var scaledDest = {x: unitCircleDest.x * length, y: unitCircleDest.y * length}

      console.log(`${angle}°(${center.x}, ${center.y}) -> (${center.x + scaledDest.x}, ${center.y + scaledDest.y})`)
      drawLineWithColor(canvas, center, {x: center.x + scaledDest.x, y: center.y + scaledDest.y}, color)
    }

    drawLineWithColor(canvas, {x: 300, y: 300}, {x: 600, y: 300}, "red")
    drawLine(canvas, {x: 0, y: 0}, {x: 600, y: 600})
    drawLine(canvas, {x: 0, y: 600}, {x: 600, y: 0})
    
    // draws lines in the specified intervals (in degrees) around a central point
    var degArray = [15, 30, 45, 45, 18, 18, 18, 18, 18, 22.5, 22.5, 22.5, 22.5, 30]
    var currDeg = 0;
    for (var i = 0; i < degArray.length; i++) {
      currDeg += degArray[i]
      drawLineCenterAngleLength(canvas, {x: 300, y: 300}, currDeg, 450, "blue")
    }

    var drawPolygon = (canvas, pointList) => {
      var str = '';
      pointList.forEach(el => {
        str += `${el.x},${el.y} `
      });
      str = str.substring(0, str.length - 1)
      canvas.append("polygon")
            .attr("points", str)
            .attr("fill", "yellow")
            .attr("stroke", "black")
            .attr("stroke-width", 2);
    }

    canvas.append("circle") 
            .attr("cx", 300)
            .attr("cy", 300)
            .attr("r", 250)
            .attr("fill", "none")
            .attr("stroke", "black")
            .attr("stroke-width", 2);

    var polyCanvas = d3.select("#poly-canvas")
            .append("svg")
            .attr("height", 600)
            .attr("width", 600);

    var rectangle = polyCanvas.append("rect")
            .attr("height", 600).attr("width", 600)
            .attr("fill", "whitesmoke");

    drawPolygon(polyCanvas, [{x: 400, y: 10}, {x: 450, y: 190}, {x: 360, y: 210}])
    drawPolygon(polyCanvas, [{x: 200, y: 10}, {x: 250, y: 10}, {x: 300, y: 50}, {x: 400, y: 500}, {x: 450, y: 450}])
    </script>
    </body>
</html>
```