ergz/d3-learning
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial

Browse Source
This commit is contained in:
Emanuel Rodriguez
2023-09-24 00:53:39 -07:00
commit 30ddc25d2b
12 changed files with 2577 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
node_modules/*

5
README.md Normal file
View File

@@ -0,0 +1,5 @@
## Demo 1
## Demo 2
## Demo 3

2332
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

15
package.json Normal file
View File

@@ -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"
}
}

22
src/data/examples-multiple.csv Normal file
View File

@@ -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
1 x y1 y2
2 1.0 0.001 0.63
3 1.5 0.002 0.65
4 2.0 0.0025 0.66
5 2.5 0.0035 0.70
6 3.0 0.003 0.84
7 3.5 0.010 0.80
8 4.0 0.024 0.56
9 4.2 0.030 0.40
10 4.4 0.040 0.30
11 4.5 0.054 0.22
12 4.6 0.062 0.15
13 4.8 0.080 0.12
14 5.0 0.100 0.08
15 5.5 0.120 0.11
16 6.0 0.176 0.20
17 6.5 0.180 0.25
18 7.0 0.185 0.30
19 7.5 0.190 0.50
20 8.0 0.198 0.71
21 8.5 0.199 0.73
22 9.0 0.199 0.65

6
src/data/examples-simple.csv Normal file
View File

@@ -0,0 +1,6 @@
x,y
100,50
200,100
300,150
400,200
500,250
1 x y
2 100 50
3 200 100
4 300 150
5 400 200
6 500 250

14
src/demo3.html Normal file
View File

@@ -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>

15
src/f1.html Normal file
View File

@@ -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>

70
src/js/demo3.js Normal file
View File

@@ -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");
});
}

66
src/js/multi.js Normal file
View File

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

17
src/js/single.js Normal file
View File

@@ -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"];
});
});
}

14
src/multi-data.html Normal file
View File

@@ -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>