# 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>
```
Sign in with Wallet
Connect another wallet