I want to build a visualization in D3.js that illustrates the concept of potential energy and kinetic energy for my students. In essence, I want the students to be able to drag a skier up a slope (i.e. a Line) and when they drop him, he transits down again. I’m sure it is an easy task in D3 but I’m struggling to understand how I can get the skier icon to be draggable only along the line path?
Here’s an image for illustration:
I want the skier icon to switch place with the ball with the green connector. I have used https://observablehq.com/@mbostock/closest-point-on-line as inspiration for this project. Here, you can drag the circle up and down but the small ball will always be on that line. I want the same thing with my skier but I’m struggling to understand how I can accomplish this?
Here’s the fiddle.
JavaScript
x
91
91
1
const height = 500;2
const width = 960;3
const skierIconSvg = "https://image.flaticon.com/icons/svg/94/94150.svg";4
5
6
const [p1, p2, p3] = [7
[width / 3, 213],8
[(2 * width) / 3, 300],9
[width / 2, 132],10
];11
12
const svg = d3.select('svg');13
14
const line = svg.append('line').attr('stroke', 'black');15
16
const connection = svg.append('line').attr('stroke', 'green');17
18
const projection = svg19
.append('circle')20
.attr('r', 5)21
.attr('stroke', 'red')22
.attr('fill', 'none');23
24
const skier = svg25
.append('image')26
.attr('id', 'skier')27
.attr('href', skierIconSvg)28
.attr('x', -40)29
.attr('y', -80)30
.attr('width', 100)31
.attr('height', 100);32
33
const point = svg34
.append('g')35
.attr('cursor', 'move')36
.attr('pointer-events', 'all')37
.attr('stroke', 'transparent')38
.attr('stroke-width', 30)39
.selectAll('circle')40
.data([p1, p2, p3])41
.enter()42
.append('circle')43
.attr('r', 10)44
.attr('fill', (d, i) => (i === 2 ? 'red' : null))45
.call(46
d347
.drag()48
.subject(([x, y]) => ({49
x,50
y51
}))52
.on('drag', dragged)53
);54
55
update();56
57
function dragged(d) {58
d[0] = d3.event.x;59
d[1] = d3.event.y;60
update();61
}62
63
function update() {64
const t = (width + height) / distance(p1, p2);65
const l1 = interpolate(p1, p2, t);66
const l2 = interpolate(p2, p1, t);67
const p = interpolate(p1, p2, project(p1, p2, p3));68
connection.attr('x1', p3[0]).attr('y1', p3[1]);69
connection.attr('x2', p[0]).attr('y2', p[1]);70
projection.attr('cx', p[0]).attr('cy', p[1]);71
line.attr('x1', l1[0]).attr('y1', l1[1]);72
line.attr('x2', l2[0]).attr('y2', l2[1]);73
point.attr('cx', (d) => d[0]).attr('cy', (d) => d[1]);74
//skier.attr('x', (d) => d[0]).attr('y', (d) => d[1]);75
}76
77
function distance([x1, y1], [x2, y2]) {78
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);79
}80
81
function interpolate([x1, y1], [x2, y2], t) {82
return [x1 + (x2 - x1) * t, y1 + (y2 - y1) * t];83
}84
85
function project([x1, y1], [x2, y2], [x3, y3]) {86
const x21 = x2 - x1,87
y21 = y2 - y1;88
const x31 = x3 - x1,89
y31 = y3 - y1;90
return (x31 * x21 + y31 * y21) / (x21 * x21 + y21 * y21);91
}JavaScript
1
24
24
1
* {2
font-family: 'Amatic SC', cursive;3
text-align: center;4
}5
6
h1 {7
font-size: 50px;8
}9
10
p {11
font-size: 20px;12
}13
14
path {15
fill: none;16
stroke: #000;17
stroke-width: 4px;18
}19
20
circle {21
fill: steelblue;22
stroke: #fff;23
stroke-width: 3px;24
}JavaScript
1
25
25
1
<!DOCTYPE html>2
<html>3
4
<head>5
<meta charset="utf-8" />6
<script src="https://d3js.org/d3.v5.js"></script>7
<script src="https://d3js.org/d3-path.v1.min.js"></script>8
<script src="https://d3js.org/d3-shape.v1.min.js"></script>9
<script src="https://d3js.org/d3-scale.v3.min.js"></script>10
<script src="https://d3js.org/d3-axis.v1.min.js"></script>11
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>12
<script src="https://d3js.org/d3-selection.v1.min.js"></script>13
14
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap" rel="stylesheet" />15
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet" />16
</head>17
18
<body>19
<h1>Forsøk på å lage en tutorial i JavaScript og D3.js</h1>20
<svg width="960" height="500"></svg>21
22
<script src="main.js"></script>23
</body>24
25
</html>Advertisement
Answer
You were very close! The only thing I did was draw two circles instead of three, and give the skier the coordinates of the last circle. Then I applied transform to the skier, because otherwise he would be anchored at the top left of the image, instead of the bottom centre.
I used datum instead of data, since datum only expects one value, while data expects an array. See this bl.ock for a good tutorial on it.
JavaScript
1
105
105
1
const height = 500;2
const width = 960;3
const skierIconSvg = "https://image.flaticon.com/icons/svg/94/94150.svg";4
5
6
const [p1, p2, p3] = [7
[width / 3, 213],8
[(2 * width) / 3, 300],9
[width / 2, 132],10
];11
12
const svg = d3.select('svg');13
14
const line = svg15
.append('line')16
.attr('stroke', 'black');17
18
const connection = svg19
.append('line')20
.attr('stroke', 'green');21
22
const projection = svg23
.append('circle')24
.attr('r', 5)25
.attr('stroke', 'red')26
.attr('fill', 'none');27
28
const g = svg29
.append('g')30
.attr('cursor', 'move')31
.attr('pointer-events', 'all')32
.attr('stroke', 'transparent')33
.attr('stroke-width', 30);34
35
const point = g36
.selectAll('circle')37
.data([p1, p2])38
.enter()39
.append('circle')40
.attr('r', 10)41
.call(42
d343
.drag()44
.subject(([x, y]) => ({45
x,46
y47
}))48
.on('drag', dragged)49
);50
51
const skier = g52
.append('image')53
.attr('id', 'skier')54
.datum(p3)55
.attr('href', skierIconSvg)56
.attr('width', 100)57
.attr('height', 100)58
.attr("transform", "translate(-50, -100)")59
.call(60
d361
.drag()62
.subject(([x, y]) => ({63
x,64
y65
}))66
.on('drag', dragged)67
);68
69
update();70
71
function dragged(d) {72
d[0] = d3.event.x;73
d[1] = d3.event.y;74
update();75
}76
77
function update() {78
const t = (width + height) / distance(p1, p2);79
const l1 = interpolate(p1, p2, t);80
const l2 = interpolate(p2, p1, t);81
const p = interpolate(p1, p2, project(p1, p2, p3));82
connection.attr('x1', p3[0]).attr('y1', p3[1]);83
connection.attr('x2', p[0]).attr('y2', p[1]);84
projection.attr('cx', p[0]).attr('cy', p[1]);85
line.attr('x1', l1[0]).attr('y1', l1[1]);86
line.attr('x2', l2[0]).attr('y2', l2[1]);87
point.attr('cx', (d) => d[0]).attr('cy', (d) => d[1]);88
skier.attr('x', (d) => d[0]).attr('y', (d) => d[1]);89
}90
91
function distance([x1, y1], [x2, y2]) {92
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);93
}94
95
function interpolate([x1, y1], [x2, y2], t) {96
return [x1 + (x2 - x1) * t, y1 + (y2 - y1) * t];97
}98
99
function project([x1, y1], [x2, y2], [x3, y3]) {100
const x21 = x2 - x1,101
y21 = y2 - y1;102
const x31 = x3 - x1,103
y31 = y3 - y1;104
return (x31 * x21 + y31 * y21) / (x21 * x21 + y21 * y21);105
}JavaScript
1
24
24
1
* {2
font-family: 'Amatic SC', cursive;3
text-align: center;4
}5
6
h1 {7
font-size: 50px;8
}9
10
p {11
font-size: 20px;12
}13
14
path {15
fill: none;16
stroke: #000;17
stroke-width: 4px;18
}19
20
circle {21
fill: steelblue;22
stroke: #fff;23
stroke-width: 3px;24
}JavaScript
1
25
25
1
<!DOCTYPE html>2
<html>3
4
<head>5
<meta charset="utf-8" />6
<script src="https://d3js.org/d3.v5.js"></script>7
<script src="https://d3js.org/d3-path.v1.min.js"></script>8
<script src="https://d3js.org/d3-shape.v1.min.js"></script>9
<script src="https://d3js.org/d3-scale.v3.min.js"></script>10
<script src="https://d3js.org/d3-axis.v1.min.js"></script>11
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>12
<script src="https://d3js.org/d3-selection.v1.min.js"></script>13
14
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap" rel="stylesheet" />15
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet" />16
</head>17
18
<body>19
<h1>Forsøk på å lage en tutorial i JavaScript og D3.js</h1>20
<svg width="960" height="500"></svg>21
22
<script src="main.js"></script>23
</body>24
25
</html>