scatter plot playground

5 years ago · 680c0d3653
parent 931fe03f0f
commit 680c0d3653
2 changed files with 34 additions and 0 deletions
--- a/playground/scatter.html
+++ b/playground/scatter.html
@ -0,0 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scatter PLot</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
 </head>
 <body>
    <script src="scatterplot.js"></script>
 </body>
 </html>
--- a/playground/scatterplot.js
+++ b/playground/scatterplot.js
@ -0,0 +1,22 @@
 var dataset = [
    [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
 ];
 const WIDTH = 600
 const HEIGHT = 600
 // Create SVG element
 var svg = d3.select("body")
    .append("svg")
    .attr('width', WIDTH)
    .attr("height", HEIGHT);
 // create circle dot datapoint
 svg.selectAll("circle")
 .data(dataset)
 .enter()
 .append("circle")
 .attr("cx", d => d[0])
 .attr("cy", d => d[1])
 .attr("r", 5);