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);