-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
117 lines (104 loc) · 4.02 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<title>MathJax + D3 Arithmetic Visualization Experiment</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=AM_HTMLorMML-full"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
</head>
<body>
<h1>Addition</h1>
<div class="arithmetic">
`3 + 6 = 9`
</div>
<hr/>
<h1>Subtraction</h1>
<div class="arithmetic">
`8 - 4 = 4`
</div>
<hr/>
<h1>Multiplication</h1>
<div class="arithmetic">
`3 xx 2 = 6`
</div>
<hr/>
<h1>Division</h1>
<div class="arithmetic">
`6 -: 2 = 3`
</div>
<script type="text/javascript">
hub = MathJax.Hub;
hub.Queue(
function() {
// Find all arithmetic statements
arithmethicDivs = d3.selectAll("div.arithmetic");
arithmethicDivs.each(function () {
d3.select(this).append("div").attr("class", "arithmeticSVG");
var arithmeticSVG = d3.select(this).select(".arithmeticSVG");
// Locate the parent node of the raw arithmetic jax
var arithmeticStatementNode = d3.select(d3.select(this).select("mn")[0][0].parentNode);
// Get the elements of the arithmetic as a D3 selection
var arithmeticStatement = d3.selectAll(arithmeticStatementNode[0][0].childNodes);
// Loop the arithmetic elements and visualize
arithmeticStatement.each(function () {
var nodeName = this.nodeName;
if (nodeName === "mn" ) {
var number = this.innerHTML;
var svgWidth = 150;
var svgHeight = 250;
var svgArea = svgWidth * svgHeight;
// Calculate the largest area a circle can have while still
// fitting them all in the box
var circleMaxArea = Math.sqrt(svgArea / number);
var circleRadius = circleMaxArea / 6;
var circleSize = circleRadius * 3;
arithmeticSVG
.append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight)
.call(function(svg) {
xPosition = circleSize;
yPosition = circleSize;
yLimit = svgHeight - circleSize;
for(i = 0; i < number; i++) {
this.append("circle")
.attr({
"cx": xPosition,
"cy": yPosition,
"r": circleRadius,
"stroke": "green",
"stroke-width": "1",
"fill": "green"
})
if(yPosition + circleRadius < yLimit) {
xPosition = xPosition + 0;
yPosition = yPosition + circleSize;
} else {
yPosition = circleSize;
xPosition = xPosition + circleSize;
}
}
});
} else if (nodeName === "mo") {
var svgWidth = 50;
var svgHeight = 250;
arithmeticSVG
.append("svg")
.attr("height", svgHeight)
.attr("width", svgWidth)
.append("text")
.attr({
"x": 0,
"y": svgHeight / 2,
"fill": "black",
"font-size": svgWidth
})
.text(this.innerHTML);
}
});
});
}
);
</script>
</body>
</html>