Skip to content

Commit 03374c4

Browse files
author
kuivenhoven1
committed
latest changes for d3 js diagram
1 parent f27de43 commit 03374c4

File tree

6 files changed

+254
-91
lines changed

6 files changed

+254
-91
lines changed

‎statsPage/static/testing.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
[{"key": "cdms2", "value": 0}, {"key": "cdutil", "value": 0}, {"key": "cdutil", "values": [{"key": "generateLandSeaMask", "values": 0}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 1}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 2}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 3}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 4}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 5}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 6}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 7}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 8}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 9}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 10}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 11}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 12}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 13}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 14}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 15}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 16}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 17}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 18}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 19}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "climatology", "values": 20}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "departures", "values": 21}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "departures", "values": 22}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "get", "values": 23}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "get", "values": 24}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "get", "values": 25}]}]}]}, {"key": "cdutil", "values": [{"key": "times", "values": [{"key": "Seasons", "values": [{"key": "get", "values": 26}]}]}]}, {"key": "genutil", "value": 0}, {"key": "genutil", "values": [{"key": "area_weights", "values": 0}]}, {"key": "genutil", "values": [{"key": "averager", "values": 0}]}, {"key": "genutil", "values": [{"key": "minmax", "values": 0}]}, {"key": "genutil", "values": [{"key": "picker", "values": 0}]}, {"key": "genutil", "values": [{"key": "StringConstructor", "values": 0}]}, {"key": "pcmdi_metrics_driver", "value": 0}, {"key": "vcs", "value": 0}]
1+
[{"key": "cdms2", "super_sub": "no super_sub", "subfunction": "no subfunction", "value": 1, "main_function": "no function"}, {"key": "cdutil", "super_sub": "no super_sub", "subfunction": "no subfunction", "value": 1, "main_function": "no function"}, {"key": "cdutil", "main_function": "generateLandSeaMask", "super_sub": "no super_sub", "subfunction": "no subfunction", "value": 1}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "climatology"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "departures"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "departures"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "get"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "get"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "get"}, {"key": "cdutil", "main_function": "times", "subfunction": "Seasons", "value": 1, "super_sub": "get"}, {"key": "genutil", "super_sub": "no super_sub", "subfunction": "no subfunction", "value": 1, "main_function": "no function"}, {"key": "genutil", "main_function": "area_weights", "super_sub": "no super_sub", "subfunction": "no subfunction", "value": 1}, {"key": "genutil", "main_function": "averager", "super_sub": "no super_sub", "subfunction": "no subfunction", "value": 1}, {"key": "genutil", "main_function": "minmax", "super_sub": "no super_sub", "subfunction": "no subfunction", "value": 1}, {"key": "genutil", "main_function": "picker", "super_sub": "no super_sub", "subfunction": "no subfunction", "value": 1}, {"key": "genutil", "main_function": "StringConstructor", "super_sub": "no super_sub", "subfunction": "no subfunction", "value": 1}, {"key": "pcmdi_metrics_driver", "super_sub": "no super_sub", "subfunction": "no subfunction", "value": 1, "main_function": "no function"}, {"key": "vcs", "super_sub": "no super_sub", "subfunction": "no subfunction", "value": 1, "main_function": "no function"}]

‎statsPage/templates/base.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@
128128

129129
<div class="jumbotron">
130130
<h1>&nbsp;{% block title %}{% endblock title %} ヽ(´▽`)/</h1>
131+
<span><h2>&nbsp; ۹⌤_⌤۹ &nbsp; ヽ(^。^)丿 &nbsp; ٩(^ᴗ^)۶ &nbsp; (ٛɲ˃ ˑ̣̮ ˂ٛɳ) &nbsp; (*^▽^*) &nbsp; (⌯⌅⌄⌅) &nbsp; (^-^*)/ &nbsp; (o˘◡˘o) &nbsp; (ꐦ ´͈ ᗨ `͈ ) &nbsp;</h2></span>
131132
</div>
132133

133134

‎statsPage/templates/showlog.html

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,8 @@
1616
<script src="https://d3js.org/d3.v4.min.js"></script>
1717
</head>
1818

19-
<!--div class="container">
20-
<div id="feature-carousel" class="carousel slide" data-ride="carousel">
21-
<div class="carousel-inner" role="listbox">
22-
<div class="item active">
23-
<center><h2>Welcome to the UV-CDAT analytics site.</h2></center>
24-
</div>
25-
<div class="item">
26-
<center><h2>Here lives UV-CDAT usage statistical plots.</h2></center>
27-
</div>
28-
% if user.is_authenticated %}
29-
% else %}
30-
<div class="item">
31-
<center><h2>Please login to see the plots.</h2></center>
32-
</div>
33-
% endif %}
34-
</div>
35-
</div>
36-
</div-->
37-
38-
<!--center--><p style="margin-right: 100px; margin-left: 100px; font-size: 20;">
39-
It is important for the developers of UVC-DAT to collect usage data for a multitude of reasons. These reasons range from improving the customer experience to allowing the developers to fine tune which functions are popular and which functions are not. This allows the developers to better prioritize their time and improves the UV-CDAT tool for better functionality and overall user experience. In other words, the developer will know which functions are popular enough to expand and improve upon for the ultimate user experience. Another reason is that it will allow developers to discover patterns when there are bug crashes – thus, developers will be able to fix issues with UCV-DAT faster because they’ll know precisely where the issue lies. These tools within UV-CDAT provide synergistic approaches to climate modeling, allowing researchers to quickly evaluate Earth system science output.
19+
<p id="showlog_par">
20+
It is important for the developers of UV-CDAT to collect usage data for a multitude of reasons. These reasons range from improving the customer experience to allowing the developers to fine tune which functions are popular and which functions are not. This allows the developers to better prioritize their time and improves the UV-CDAT tool for better functionality and overall user experience. In other words, the developer will know which functions are popular enough to expand and improve upon for the ultimate user experience. Another reason is that it will allow developers to discover patterns when there are bug crashes – thus, developers will be able to fix issues with UV-CDAT faster because they’ll know precisely where the issue lies. These tools within UV-CDAT provide synergistic approaches to climate modeling, allowing researchers to quickly evaluate Earth system science output.
4021
</p><!--/center-->
4122
<br><br>
4223

@@ -352,13 +333,4 @@ <h5>Clim_DJF_200mb_wnd_ts_gph</h5>
352333

353334
<br><br>
354335

355-
<!--div class="container">
356-
<center>
357-
<a href="https://uvcdat.llnl.gov/index.html">
358-
<img id="footer_img" src="https://uvcdat.llnl.gov/images/uvcdat.png"></img>
359-
</a>&nbsp;
360-
<a href="https://github.com/UV-CDAT/uvcdat" class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a>
361-
</center>
362-
</div-->
363-
364336
{% endblock content %}

‎statsPage/templates/testing/generated.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<svg width="848" height="496" xmlns="http://www.w3.org/2000/svg" version="1.1">
2+
<g transform="translate(.5,.5)">
3+
<g class="cell" transform="translate(283,218)">
4+
<rect width="560" height="273" style="fill: rgb(191, 105, 105); fill-opacity: 1; stroke: rgb(255, 255, 255);"></rect>
5+
<title>Avatar: 237</title>
6+
<text x="280" y="136.5" dy=".35em" text-anchor="middle" style="font-size: 11px; font-family: Arial, Helvetica;">11.7</text>
7+
</g>
8+
<g class="cell" transform="translate(5,5)">
9+
<rect width="278" height="67" style="fill: rgb(105, 191, 105); fill-opacity: 1; stroke: rgb(255, 255, 255);"></rect>
10+
<title>The Blind Side: 29</title>
11+
<text x="139" y="33.5" dy=".35em" text-anchor="middle" style="font-size: 11px; font-family: Arial, Helvetica;">10.7</text>
12+
</g>
13+
<g class="cell" transform="translate(5,72)">
14+
<rect width="278" height="419" style="fill: rgb(105, 105, 191); fill-opacity: 1; stroke: rgb(255, 255, 255);"></rect>
15+
<title>The Chronicles of Narnia: The Lion, the Witch and the Wardrobe: 180</title>
16+
<text x="139" y="209.5" dy=".35em" text-anchor="middle" style="font-size: 11px; font-family: Arial, Helvetica;">4.1</text>
17+
</g>
18+
<g class="cell" transform="translate(283,5)">
19+
<rect width="560" height="213" style="fill: rgb(191, 105, 105); fill-opacity: 1; stroke: rgb(255, 255, 255);"></rect>
20+
<title>The Dark Knight: 185</title>
21+
<text x="280" y="106.5" dy=".35em" text-anchor="middle" style="font-size: 11px; font-family: Arial, Helvetica;">5.4</text>
22+
</g>
23+
</g>
24+
</svg>

‎statsPage/templates/testing/nested_d3.html

Lines changed: 45 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,13 @@
44

55
{% block content %}
66
{% load staticfiles %}
7+
<link href="{% static 'css/testing/nested_d3.css' %}" rel="stylesheet">
78

89
<html>
910
<head>
1011
<title>Nested D3 Testing Page</title>
1112
</head>
1213

13-
{% for fl in first_l %}
14-
{{fl}}<br>
15-
{% endfor %}
16-
17-
<!--% for k,l in las.items %}
18-
{ for p in l %}
19-
{p}}<br>
20-
% endfor %}
21-
% endfor %}-->
22-
23-
<br><br>
24-
<!--% for o in o_list %}
25-
% for key, value in o.items %}
26-
{key}} &rarr; {value}}
27-
% if not value.vars %}
28-
% for k, v in value.items %}
29-
{k}} &rarr; {v}} &darr;
30-
% if not v.vars %}
31-
% for llave, val in v.items %}
32-
{llave}} &rarr; {val}}<br>
33-
% endfor %}
34-
% endif %}
35-
% endfor %}
36-
% endif %}
37-
% endfor %}
38-
% endfor %}-->
39-
4014
<body>
4115
<div id="chart"></div>
4216

@@ -124,7 +98,6 @@
12498
initialize(root);
12599
accumulate(root);
126100
layout(root);
127-
console.log(root);
128101
display(root);
129102

130103
if (window.parent !== window) {
@@ -157,7 +130,6 @@
157130
// of sibling was laid out in 1×1, we must rescale to fit using absolute
158131
// coordinates. This lets us use a viewport to zoom.
159132
function layout(d) {
160-
//console.log(d);
161133
if (d._children) {
162134
treemap.nodes({_children: d._children});
163135
d._children.forEach(function(c) {
@@ -171,22 +143,31 @@
171143
}
172144
}
173145

146+
var count = 0;
147+
var que = 0;
148+
//if(que < 3){
174149
function display(d) {
175150
grandparent
176151
.datum(d.parent)
177152
.on("click", transition)
178153
.select("text")
179154
.text(name(d));
180155

156+
console.log("here's keys for d: " + Object.keys(d));
157+
console.log("here's values for d: " + Object.values(d));
158+
//console.log("here's depth for d: " + Object.keys(depth));
159+
console.log("here's depth value for d: " + Object.values(d)[6]);
181160
var g1 = svg.insert("g", ".grandparent")
182161
.datum(d)
183162
.attr("class", "depth");
184163

185164
var g = g1.selectAll("g")
186165
.data(d._children)
187166
.enter().append("g");
167+
//console.log("here's g: " + g[0]);
188168

189169
g.filter(function(d) { return d._children; })
170+
//g.filter(function(d) { console.log((d._children).length); return d._children; })
190171
.classed("children", true)
191172
.on("click", transition);
192173

@@ -222,13 +203,22 @@
222203
g.selectAll("rect")
223204
.style("fill", function(d) { return color(d.key); });
224205

206+
//var que = 0;
207+
//if(que < 3){
225208
function transition(d) {
226209
if (transitioning || !d) return;
227210
transitioning = true;
211+
que += 1;
212+
//console.log("the total of que: " + que);
213+
if(que < 3){
214+
//console.log("que is less than 3: " + que);
215+
}
228216

229217
var g2 = display(d),
230-
t1 = g1.transition().duration(750),
231-
t2 = g2.transition().duration(750);
218+
t1 = g1.transition().duration(1000),
219+
t2 = g2.transition().duration(1000);
220+
//t1 = g1.transition().duration(750),
221+
//t2 = g2.transition().duration(750);
232222

233223
// Update the domain only after entering new elements.
234224
x.domain([d.x, d.x + d.dx]);
@@ -237,8 +227,17 @@
237227
// Enable anti-aliasing during the transition.
238228
svg.style("shape-rendering", null);
239229

230+
//var count = 0;
240231
// Draw child nodes on top of parent nodes.
241-
svg.selectAll(".depth").sort(function(a, b) { return a.depth - b.depth; });
232+
svg.selectAll(".depth").sort(function(a, b) {
233+
count += 1;
234+
//console.log("here's your count: " + count);
235+
//var c = a.depth - b.depth;
236+
//console.log("a.depth: " + a.depth);
237+
//console.log("b.depth: " + b.depth);
238+
//console.log("a.depth-b.depth: " + c);
239+
return a.depth - b.depth;
240+
});
242241

243242
// Fade-in entering text.
244243
g2.selectAll("text").style("fill-opacity", 0);
@@ -257,15 +256,17 @@
257256
transitioning = false;
258257
});
259258
}
259+
//}
260260

261261
return g;
262262
}
263+
//}
263264

264265
function text(text) {
265266
text.selectAll("tspan")
266-
.attr("x", function(d) { /*console.log(x);*/return x(d.x) + 6; })
267-
text.attr("x", function(d) { /*console.log(x);*/return x(d.x) + 6; })
268-
.attr("y", function(d) { /*console.log(y);*/return y(d.y) + 6; })
267+
.attr("x", function(d) { return x(d.x) + 6; })
268+
text.attr("x", function(d) { return x(d.x) + 6; })
269+
.attr("y", function(d) { return y(d.y) + 6; })
269270
.style("opacity", function(d) { return this.getComputedTextLength() < x(d.x + d.dx) - x(d.x) ? 1 : 0; });
270271
}
271272

@@ -283,6 +284,8 @@
283284
}
284285

285286
function name(d) {
287+
/*console.log("d.parent value: " + d.parent);
288+
console.log("d.key value: " + d.key);*/
286289
return d.parent
287290
? name(d.parent) + " / " + d.key + " (" + formatNumber(d.value) + ")"
288291
: d.key + " (" + formatNumber(d.value) + ")";
@@ -297,9 +300,13 @@
297300
//d3.json("countries.json", function(err, res) {
298301
d3.json(countries_file, function(err, res) {
299302
if (!err) {
300-
//console.log(res);
301-
var data = d3.nest().key(function(d) { /*console.log(d);*/return d.region; }).key(function(d) { /*console.log(d);*/return d.subregion; }).entries(res);
302-
main({title: "World Population"}, {key: "World", values: data});
303+
var data = d3.nest()
304+
.key(function(d) { return d.key; })
305+
.key(function(d) { return d.main_function; })
306+
.key(function(d) { return d.subfunction; })
307+
.key(function(d) { return d.super_sub; })
308+
.entries(res);
309+
main({title: "<h4>Actions Of UV-CDAT</h4>"}, {key: "Usage", values: data});
303310
}
304311
});
305312
}

0 commit comments

Comments
 (0)