| license: mit |
Built with blockbuilder.org
forked from lnmunhoz's block: 1. Centered Circle
forked from lnmunhoz's block: learning d3: centered square
forked from lnmunhoz's block: learning d3: centered square
forked from lnmunhoz's block: learning d3: ellipse
forked from lnmunhoz's block: learning d3: ellipse
forked from lnmunhoz's block: learning d3: line
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0 } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chart-area"></div> | |
| <script> | |
| const svg = d3.select("#chart-area") | |
| .append("svg") | |
| .attr("width", 400) | |
| .attr("height", 400) | |
| .style("border", "1px solid black") | |
| const line = svg.append("line") | |
| .attr("x1", 60) | |
| .attr("y1", 60) | |
| .attr("x2", 340) | |
| .attr("y2", 340) | |
| .attr("stroke", "blue") | |
| const circle1 = svg.append("circle") | |
| .attr("cx", 60) | |
| .attr("cy", 60) | |
| .attr("r", 50) | |
| .attr("fill", "red") | |
| const circle2 = svg.append("circle") | |
| .attr("cx", 340) | |
| .attr("cy", 340) | |
| .attr("r", 50) | |
| .attr("fill", "green") | |
| </script> | |
| </body> |