From 680c0d36533c46568044d20f47114785d165d933 Mon Sep 17 00:00:00 2001 From: yikth Date: Mon, 31 Aug 2020 11:54:30 +0800 Subject: [PATCH] scatter plot playground --- playground/scatter.html | 12 ++++++++++++ playground/scatterplot.js | 22 ++++++++++++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 playground/scatter.html create mode 100644 playground/scatterplot.js diff --git a/playground/scatter.html b/playground/scatter.html new file mode 100644 index 0000000..25d85ce --- /dev/null +++ b/playground/scatter.html @@ -0,0 +1,12 @@ + + + + + + Scatter PLot + + + + + + \ No newline at end of file diff --git a/playground/scatterplot.js b/playground/scatterplot.js new file mode 100644 index 0000000..063693f --- /dev/null +++ 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); \ No newline at end of file