initial

2023-09-24 00:53:39 -07:00
commit 30ddc25d2b
12 changed files with 2577 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules/*
--- a/README.md
+++ b/README.md
@@ -0,0 +1,5 @@
+## Demo 1
+
+## Demo 2
+
+## Demo 3
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "d3-learning",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1", 
+    "start": "live-server src"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "live-server": "^1.2.2"
+  }
+}
--- a/src/data/examples-multiple.csv
+++ b/src/data/examples-multiple.csv
@@ -0,0 +1,22 @@
+x,y1,y2
+1.0,0.001,0.63
+1.5,0.002,0.65
+2.0,0.0025,0.66
+2.5,0.0035,0.70
+3.0,0.003,0.84
+3.5,0.010,0.80
+4.0,0.024,0.56
+4.2,0.030,0.40
+4.4,0.040,0.30
+4.5,0.054,0.22
+4.6,0.062,0.15
+4.8,0.080,0.12
+5.0,0.100,0.08
+5.5,0.120,0.11
+6.0,0.176,0.20
+6.5,0.180,0.25
+7.0,0.185,0.30
+7.5,0.190,0.50
+8.0,0.198,0.71
+8.5,0.199,0.73
+9.0,0.199,0.65
--- a/src/data/examples-simple.csv
+++ b/src/data/examples-simple.csv
@@ -0,0 +1,6 @@
+x,y
+100,50
+200,100
+300,150
+400,200
+500,250
--- a/src/demo3.html
+++ b/src/demo3.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>D3.js Example</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script src="js/demo3.js"></script>
+</head>
+<body onload="makeDemo3()">
+    <svg id="demo2" width="700" height="400" style="background:rgb(37, 37, 37)"></svg>
+
+</body>
+</html>
--- a/src/f1.html
+++ b/src/f1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>D3.js Example</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script src="js/single.js"></script>
+    <script src="js/multi.js"></script>
+</head>
+<body onload="makeDemo1()">
+    <svg id="demo1" width="600" height="300" style="background:lightgrey"></svg>
+
+</body>
+</html>
--- a/src/js/demo3.js
+++ b/src/js/demo3.js
@@ -0,0 +1,70 @@
+function makeDemo3() {
+  d3.csv("data/examples-multiple.csv").then(function (data) {
+    var svg = d3.select("svg");
+    var pointX = svg.attr("width");
+    var pointY = svg.attr("height");
+
+    function makeScale(accessor, range) {
+      return d3
+        .scaleLinear()
+        .domain(d3.extent(data, accessor))
+        .range(range)
+        .nice();
+    }
+
+    var scaleX = makeScale((d) => d["x"], [0, pointX]);
+    var scaleY1 = makeScale((d) => d["y1"], [pointY, 0]);
+    var scaleY2 = makeScale((d) => d["y2"], [pointY, 0]);
+
+    function drawData(g, accessorX, accessorY, curve) {
+      g.selectAll("circle")
+        .data(data)
+        .enter()
+        .append("circle")
+        .attr("r", 5)
+        .attr("cx", accessorX)
+        .attr("cy", accessorY);
+
+      var lineMaker = d3.line().curve(curve).x(accessorX).y(accessorY);
+
+      g.append("path").attr("fill", "none").attr("d", lineMaker(data));
+    }
+
+    var g1 = svg.append("g");
+    var g2 = svg.append("g");
+
+    drawData(
+      g1,
+      (d) => scaleX(d["x"]),
+      (d) => scaleY1(d["y1"]),
+      d3.curveStep
+    );
+    drawData(
+      g2,
+      (d) => scaleX(d["x"]),
+      (d) => scaleY2(d["y2"]),
+      d3.curveNatural
+    );
+
+    g1.selectAll("circle").attr("fill", "green");
+    g1.selectAll("path").attr("stroke", "cyan");
+
+    g2.selectAll("circle").attr("fill", "blue");
+    g2.selectAll("path").attr("stroke", "red");
+
+    var axisMaker = d3.axisRight(scaleY1);
+    axisMaker(svg.append("g").attr("color", "white"));
+    axisMaker = d3.axisLeft(scaleY2);
+
+    svg
+      .append("g")
+      .attr("transform", "translate(" + pointX + ", 0)")
+      .attr("color", "white")
+      .call(axisMaker);
+    svg
+      .append("g")
+      .call(d3.axisTop(scaleX))
+      .attr("transform", "translate(0," + pointY + ")")
+      .attr("color", "white");
+  });
+}
--- a/src/js/multi.js
+++ b/src/js/multi.js
@@ -0,0 +1,66 @@
+function makeDemo2() {
+  d3.csv("data/examples-multiple.csv").then(function (data) {
+    var pxX = 600;
+    var pxY = 300;
+
+    var scX = d3
+      .scaleLinear()
+      .domain(d3.extent(data, (d) => d["x"]))
+      .range([10, pxX]);
+
+    var scY1 = d3
+      .scaleLinear()
+      .domain(d3.extent(data, (d) => d["y1"]))
+      .range([pxY, 10]);
+
+    var scY2 = d3
+      .scaleLinear()
+      .domain(d3.extent(data, (d) => d["y2"]))
+      .range([pxY, 10]);
+
+    d3.select("svg")
+      .append("g")
+      .attr("id", "ds1")
+      .selectAll("circle")
+      .data(data)
+      .enter()
+      .append("circle")
+      .attr("r", 5)
+      .attr("fill", "green")
+      // .attr("stroke", "green")
+      // .attr("stroke-width", "4")
+      .attr("cx", (d) => scX(d["x"]))
+      .attr("cy", (d) => scY1(d["y1"]));
+
+    d3.select("svg")
+      .append("g")
+      .attr("id", "ds2")
+      .selectAll("circle")
+      .data(data)
+      .enter()
+      .append("circle")
+      .attr("r", 5)
+      .attr("fill", "blue")
+      .attr("cx", (d) => scX(d["x"]))
+      .attr("cy", (d) => scY2(d["y2"]));
+
+    var lineMaker = d3
+      .line()
+      .x((d) => scX(d["x"]))
+      .y((d) => scY1(d["y1"]));
+
+    d3.select("#ds1")
+      .append("path")
+      .attr("fill", "none")
+      .attr("stroke", "black")
+      .attr("d", lineMaker(data));
+
+    lineMaker.y((d) => scY2(d["y2"]));
+
+    d3.select("#ds2")
+      .append("path")
+      .attr("fill", "none")
+      .attr("stroke", "black")
+      .attr("d", lineMaker(data));
+  });
+}
--- a/src/js/single.js
+++ b/src/js/single.js
@@ -0,0 +1,17 @@
+function makeDemo1() {
+  d3.csv("data/examples-simple.csv").then(function (data) {
+    d3.select("svg")
+      .selectAll("circle")
+      .data(data)
+      .enter()
+      .append("circle")
+      .attr("r", 5)
+      .attr("fill", "red")
+      .attr("cx", function (d) {
+        return d["x"];
+      })
+      .attr("cy", function (d) {
+        return d["y"];
+      });
+  });
+}
--- a/src/multi-data.html
+++ b/src/multi-data.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>D3.js Example</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script src="js/multi.js"></script>
+</head>
+<body onload="makeDemo2()">
+    <svg id="demo2" width="700" height="400" style="background:lightgrey"></svg>
+
+</body>
+</html>