From 53fd274adc8eb3d67ca770218d3824554d8525ae Mon Sep 17 00:00:00 2001
From: emilyhunt <emily.hunt.physics@gmail.com>
Date: Mon, 20 Sep 2021 11:09:13 +0200
Subject: [PATCH] Basic working example of using very basic d3

---
 .gitignore                     |   0
 .idea/.gitignore               |   5 ++
 .idea/modules.xml              |   9 +++
 .idea/open-cluster-plotter.iml |  13 +++++
 .idea/vcs.xml                  |   6 ++
 index.html                     | 104 +++++++++++++++++++++++++++++++++
 6 files changed, 137 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 .idea/.gitignore
 create mode 100644 .idea/modules.xml
 create mode 100644 .idea/open-cluster-plotter.iml
 create mode 100644 .idea/vcs.xml
 create mode 100644 index.html

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e69de29
diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..b58b603
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..9d06650
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/../d3examples/.idea/d3examples.iml" filepath="$PROJECT_DIR$/../d3examples/.idea/d3examples.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/open-cluster-plotter.iml" filepath="$PROJECT_DIR$/.idea/open-cluster-plotter.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/open-cluster-plotter.iml b/.idea/open-cluster-plotter.iml
new file mode 100644
index 0000000..a0ddd38
--- /dev/null
+++ b/.idea/open-cluster-plotter.iml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="module" module-name="d3examples" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..08159b7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>The Open Cluster Plotting Tool</title>
+</head>
+<body>
+
+<h1>The Open Cluster Plotting Tool</h1>
+<p>Interactive plots of open cluster membership lists based on data from Gaia and beyond!</p>
+
+<!DOCTYPE html>
+
+<!-- Create a div where the graph will take place -->
+<div id="my_dataviz3"></div>
+
+<!-- Load d3.js -->
+<script src="https://d3js.org/d3.v6.min.js"></script>
+
+<script>
+
+    // set the dimensions and margins of the graph
+    const margin = {top: 10, right: 30, bottom: 40, left: 50},
+        width = 520 - margin.left - margin.right,
+        height = 520 - margin.top - margin.bottom;
+
+    // append the SVg object to the body of the page
+    const svg = d3.select("#my_dataviz3")
+        .append("svg")
+        .attr("width", width + margin.left + margin.right)
+        .attr("height", height + margin.top + margin.bottom)
+        .append("g")
+        .attr("transform",
+            "translate(" + margin.left + "," + margin.top + ")")
+
+    // Add the black box around the chart
+    svg
+        .append("rect")
+        .attr("x",0)
+        .attr("y",0)
+        .attr("height", height)
+        .attr("width", height)
+        .style("fill", "none")
+        .style("stroke", "black")
+
+    //Read the data
+    d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv").then( function(data) {
+
+        // Add X axis
+        const x = d3.scaleLinear()
+            .domain([4, 8])
+            .range([ 0, width ]);
+        svg.append("g")
+            .attr("transform", `translate(0, ${height})`)
+            .call(d3.axisBottom(x));
+
+        // Add Y axis
+        const y = d3.scaleLinear()
+            .domain([0, 8])
+            .range([ height, 0])
+            .nice();
+        svg.append("g")
+            .call(d3.axisLeft(y));
+
+        // Add X axis label:
+        svg.append("text")
+            .attr("text-anchor", "end")
+            .attr("x", width)
+            .attr("y", height + margin.top + 20)
+            .text("Sepal Length");
+
+        // Y axis label:
+        svg.append("text")
+            .attr("text-anchor", "end")
+            .attr("transform", "rotate(-90)")
+            .attr("y", -margin.left+20)
+            .attr("x", -margin.top)
+            .text("Petal Length")
+
+        // Shape scale: give a specie, it gives a shape
+        const shape = d3.scaleOrdinal()
+            .domain(["setosa", "versicolor", "virginica" ])
+            .range([ d3.symbolCircle, d3.symbolTriangle, d3.symbolSquare])
+
+        // Add dots
+        svg.append('g')
+            .selectAll("dot")
+            .data(data)
+            .enter()
+            .append("path")
+            .attr("d", d3.symbol()
+                .size(120)
+                .type(function(d) {  return shape(d.Species) })
+            )
+            .attr("transform", function(d) { return "translate(" + x(d.Sepal_Length) + "," + y(d.Petal_Length) + ")"; })
+            .style("fill", "black")
+            .style("opacity", 0.8)
+
+    })
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
-- 
2.54.0