-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·630 lines (538 loc) · 33.3 KB
/
index.html
File metadata and controls
executable file
·630 lines (538 loc) · 33.3 KB
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
<html>
<head>
<link rel="shortcut icon" href="https://www.commerce.gov/sites/all/themes/doc/doc_theme/favicon.ico" type="image/vnd.microsoft.icon" />
<title> TEMPLATE_TITLE </title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />
<link rel="stylesheet" href="css/creative.css" type="text/css">
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/parallax.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> -->
<style type="text/css">
pre:not([class]) {
background-color: white;
}
</style>
<script type="text/javascript">
if (window.hljs && document.readyState && document.readyState === "complete") {
window.setTimeout(function() {
hljs.initHighlighting();
}, 0);
}
</script>
<style>
html, body. div{
width: auto !important;
overflow-x: hidden !important;
}
hr {
width: 100%;
height: 8px;
margin-left: auto;
margin-right: auto;
background-color:white;
color:white;
border: 0 none;
}
#btn {
background: purple;
/*background: #d93434;*/
background-image: -webkit-linear-gradient(top, purple, #820a0a);
background-image: -moz-linear-gradient(top, purple, #820a0a);
background-image: -ms-linear-gradient(top, purple, #820a0a);
background-image: -o-linear-gradient(top, purple, #820a0a);
background-image: linear-gradient(to bottom, purple, #820a0a);
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
#btn:hover {
background: #6387cf;
background-image: -webkit-linear-gradient(top, #6387cf, #3498db);
background-image: -moz-linear-gradient(top, #6387cf, #3498db);
background-image: -ms-linear-gradient(top, #6387cf, #3498db);
background-image: -o-linear-gradient(top, #6387cf, #3498db);
background-image: linear-gradient(to bottom, #6387cf, #3498db);
text-decoration: none;
}
.main-container {
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
code {
color: inherit;
background-color: rgba(0, 0, 0, 0.04);
}
img {
max-width:100%;
height: auto;
}
#woot{
background-color: white;
opacity: 0.9;
color:purple;
padding: 10px;
border-radius: 10px;
font-family: Helvetica;
}
#weight{
font-weight: bold;
}
.main-container {
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
code {
color: inherit;
background-color: rgba(0, 0, 0, 0.04);
}
img {
max-width:100%;
height: auto;
}
</style>
</head>
<body>
<!--NavBar-->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://www.commerce.gov/dataservice/"><img style="max-width:100%; max-height:100%;" src="img/logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#top">Home</a>
</li>
<li>
<a class="page-scroll" href="#story">Visuals</a>
</li>
<li>
<a class="page-scroll" href="#code">Code</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--Cover-->
<section class="scroll backie datacorps " id="top">
<div class="header-content">
<div class="header-content-inner" >
<h2 style="position:absolute;left:15%; top:50%;text-align:left;">
<div id="woot">
<span style="font-size:150%;line-height:1.3;" >
<strong>TEMPLATE_TITLE<br>TEMPLATE_TITLE_1<br>TEMPLATE_TITLE_2</strong><br></span>
<a id = "btn" href="https://github.com/CommerceDataService/TEMPLATE_REPO/zipball/master"> <strong>ZIP File</strong></a>
<a id = "btn" href="https://github.com/CommerceDataService/TEMPLATE_REPO/tarball/master"> <strong>TAR Ball</strong></a>
<a id = "btn" href="https://github.com/CommerceDataService/TEMPLATE_REPO"><strong>GitHub</strong></a>
<p><br>Use TEMPLATE_LANG_1, TEMPLATE_LANG_2,<br>and TEMPLATE_PCK_1, TEMPLATE_PCK_2 <br> to visualize TEMPLATE_SUBJECT</p>
</div>
</h2>
</div>
</div>
</section>
<body>
<!--header-->
<div id='story' class="container-fluid main-container" style="background-color:white;">
<br>
<div class='container'>
<br><br>
<div class="row">
<div class="col-lg-2"style="font-family:Helvetica;text-align:left;background-color:white; border-style: solid;
border-color:lightgrey;border-radius:5px;border-width: 2px;">
<p><span style="font-size:120%;color:purple;">Credits</span>
<small><br><strong>TEMPLATE_OFFICE</strong>
<ul>
<li>TEMPLATE_AUTHOR</li>
</ul>
<strong>Edited by the Commerce Data Service</strong><br>
<ul>
<li>TEMPLATE_EDITOR</li>
</ul>
</small>
</p>
</div>
<div class="col-lg-7">
<p style="font-family:Helvetica;">
<span style="font-size:150%;color:lightgrey;"><strong>TEMPLATE_INTRO:</strong><br></span>
<span style='color:lightgrey'>
DIY meggings typewriter semiotics, humblebrag authentic affogato celiac tousled mumblecore kogi. Mustache bicycle rights brunch, chillwave kombucha irony cred etsy vice waistcoat literally squid four dollar toast. Intelligentsia gluten-free before they sold out godard cold-pressed, +1 ramps try-hard. Selvage master cleanse flannel blog, disrupt asymmetrical tote bag man braid next level. Keytar authentic heirloom, kale chips sartorial before they sold out biodiesel cliche artisan direct trade. Lomo 90's typewriter VHS pour-over, lo-fi franzen distillery craft beer literally forage meggings. Humblebrag asymmetrical try-hard, tote bag mlkshk squid DIY iPhone yr hashtag fanny pack semiotics franzen readymade.
</span>
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid main-container">
<p style="font-family:Helvetica;">
<span style="font-size:150%;color:purple;"><strong>TEMPLATE_NARRATIVE_1</strong><br></span>
Scenester 8-bit gluten-free, selfies man braid you probably haven't heard of them pop-up single-origin coffee microdosing beard. Wayfarers food truck bicycle rights, ramps roof party 3 wolf moon fingerstache neutra DIY hoodie kickstarter vice. Church-key dreamcatcher drinking vinegar, scenester fap actually mixtape fingerstache art party quinoa offal occupy irony bitters. Hoodie normcore green juice heirloom polaroid. 8-bit kogi fashion axe ethical bushwick slow-carb kickstarter tattooed. Keytar bitters single-origin coffee VHS drinking vinegar umami. Ennui polaroid pug kale chips, wayfarers skateboard fap church-key sriracha gentrify gochujang.</p>
<img src="img/TEMPLATE_VIZ_1.jpg">
<p>Truffaut four dollar toast schlitz mlkshk meh single-origin coffee. IPhone quinoa banh mi, mlkshk cornhole shoreditch 8-bit art party fap waistcoat lumbersexual pour-over venmo brooklyn. Gastropub brooklyn kickstarter selfies, quinoa 90's mixtape ramps everyday carry occupy neutra humblebrag swag. Pabst mixtape church-key, sustainable yr single-origin coffee occupy portland asymmetrical plaid ennui. Locavore cray green juice marfa portland photo booth everyday carry freegan tousled synth, leggings brooklyn 90's. Narwhal literally fixie drinking vinegar gluten-free, roof party heirloom blog kinfolk. Narwhal fap keytar, health goth tilde church-key squid shabby chic chicharrones gochujang tote bag vinyl kinfolk.</p>
<p>Asymmetrical lomo 3 wolf moon paleo forage, mixtape fashion axe shoreditch squid pour-over. Yuccie street art you probably haven't heard of them, fixie celiac austin normcore organic 3 wolf moon roof party offal bespoke bicycle rights. Banh mi lomo gochujang tofu, microdosing organic paleo celiac vinyl swag synth cred shoreditch typewriter. Seitan try-hard blog disrupt pinterest. Viral man braid distillery typewriter shabby chic flexitarian ramps. Everyday carry next level church-key fanny pack, kale chips forage twee selvage locavore brunch. Lo-fi letterpress yr pork belly, fixie banjo pop-up asymmetrical intelligentsia YOLO tofu mustache quinoa.</p>
<p>Lumbersexual DIY thundercats kogi beard trust fund, blog everyday carry shabby chic jean shorts salvia sartorial. Cred pork belly hashtag meh helvetica, scenester cornhole photo booth meditation beard roof party pop-up thundercats. Yr wolf fashion axe blue bottle asymmetrical crucifix pop-up, plaid wayfarers. Pug gentrify selfies tote bag, whatever crucifix bespoke try-hard XOXO heirloom vinyl everyday carry flannel pinterest. Bespoke butcher leggings, you probably haven't heard of them bitters craft beer pickled crucifix chia post-ironic. Yuccie plaid you probably haven't heard of them, hoodie kinfolk pabst typewriter four dollar toast. Chambray echo park kinfolk 8-bit microdosing, pork belly shabby chic art party iPhone thundercats vegan you probably haven't heard of them.</p>
<img src="img/TEMPLATE_VIZ_2.png">
</div>
<div class="container-fluid main-container">
<p style="font-family:Helvetica;">
<span style="font-size:150%;color:purple;"><strong>TEMPLATE_NARRATIVE_2</strong><br></span>
Hella cold-pressed thundercats, art party messenger bag man bun health goth chartreuse schlitz lomo helvetica marfa gluten-free. DIY keffiyeh sriracha bushwick taxidermy forage, cardigan keytar fanny pack. Mustache banjo narwhal ramps. Distillery pork belly brooklyn, butcher pickled scenester meggings church-key 3 wolf moon hammock hella mustache cray. Trust fund hoodie selfies, tousled pabst selvage disrupt 90's. Vice banjo post-ironic, swag raw denim retro etsy kitsch single-origin coffee cronut fingerstache meggings marfa. Mlkshk forage aesthetic banjo vinyl, occupy tousled VHS flannel brooklyn bespoke offal.</p>
<img src="img/TEMPLATE_VIZ_3.png">
<p>Helvetica kogi hashtag affogato food truck, gentrify selfies listicle truffaut migas tattooed. Kale chips echo park tousled, bicycle rights waistcoat godard schlitz 3 wolf moon tote bag church-key typewriter semiotics chia messenger bag listicle. Offal church-key fanny pack schlitz 3 wolf moon, art party brooklyn hoodie. Vice viral venmo, swag franzen retro microdosing schlitz mustache occupy knausgaard cronut bespoke blog pork belly. Ethical salvia put a bird on it occupy small batch everyday carry, quinoa messenger bag plaid green juice meggings affogato mixtape raw denim VHS. Cronut vice kale chips bespoke drinking vinegar. Salvia plaid yr truffaut hella.</p>
<p>Hammock letterpress next level direct trade, distillery lomo hashtag health goth 90's salvia chartreuse migas ugh tacos. Put a bird on it pour-over disrupt health goth. Bitters deep v everyday carry distillery, mixtape letterpress microdosing hammock. Tumblr yr hoodie celiac, meggings stumptown jean shorts sustainable aesthetic hella kinfolk. Banh mi banjo bushwick, butcher skateboard brooklyn vice stumptown you probably haven't heard of them. Selvage quinoa sustainable lomo, pitchfork readymade organic trust fund four dollar toast. Brooklyn cold-pressed VHS, fixie leggings master cleanse you probably haven't heard of them tofu.</p>
<p>90's skateboard pug small batch kogi locavore. Cold-pressed gluten-free plaid, flannel lo-fi slow-carb trust fund small batch synth helvetica keffiyeh whatever tofu mumblecore. Fingerstache keffiyeh XOXO banh mi vice shabby chic hella locavore. Wolf locavore cardigan, tattooed salvia pug try-hard echo park yr single-origin coffee migas VHS selfies. Tousled locavore yuccie blog, aesthetic cronut affogato godard XOXO marfa gentrify tacos. Literally brooklyn next level raw denim, cliche 90's franzen. Keffiyeh literally cardigan kale chips cronut.</p>
</div>
<div class="container-fluid main-container">
<p style="font-family:Helvetica;">
<span style="font-size:150%;color:purple;"><strong>TEMPLATE_NARRATIVE_3</strong><br></span>
Asymmetrical seitan kombucha butcher, franzen swag cred salvia echo park man bun etsy tote bag church-key. Squid waistcoat readymade microdosing, man braid venmo actually you probably haven't heard of them bushwick normcore hammock drinking vinegar kogi. Truffaut wolf helvetica venmo, irony flannel cold-pressed pop-up forage polaroid fashion axe four loko. YOLO aesthetic pour-over, plaid keytar forage XOXO hammock shabby chic actually yr shoreditch food truck selfies. Brooklyn helvetica gochujang celiac. Ennui mumblecore locavore lumbersexual sartorial wolf, craft beer disrupt drinking vinegar 3 wolf moon semiotics. Cronut meh VHS, stumptown cray quinoa ennui single-origin coffee tousled.</p>
<p>Green juice 90's mumblecore, pop-up cray yr roof party lomo XOXO cardigan thundercats hammock. Semiotics yuccie austin umami leggings. Tacos tilde ennui, cliche knausgaard sartorial irony normcore. Four dollar toast heirloom pug, swag roof party locavore deep v cold-pressed. Deep v yuccie humblebrag asymmetrical, artisan blog pabst roof party sriracha typewriter chia tattooed biodiesel thundercats retro. Beard hoodie meditation 90's, vegan crucifix keytar yr drinking vinegar. Pork belly banjo artisan microdosing XOXO.</p>
<img src="img/TEMPLATE_VIZ_4.png">
<p>Lomo kickstarter blog, ethical seitan chia microdosing. Microdosing tumblr hella lumbersexual readymade, synth slow-carb. Food truck stumptown VHS cornhole 90's. Intelligentsia cronut tofu, jean shorts knausgaard polaroid irony seitan. Hoodie salvia chambray austin fixie, chicharrones chillwave post-ironic cardigan. Gastropub messenger bag street art drinking vinegar, listicle next level skateboard. IPhone waistcoat everyday carry fap skateboard synth, 3 wolf moon tote bag marfa polaroid gentrify gluten-free yr.</p>
<p>Cardigan kombucha photo booth, stumptown wolf knausgaard tote bag art party intelligentsia four loko. Roof party gluten-free kickstarter bicycle rights, meditation dreamcatcher lo-fi shabby chic. Jean shorts cold-pressed organic umami. Leggings retro actually, pug plaid synth readymade selvage jean shorts cray post-ironic knausgaard polaroid. Beard normcore sartorial celiac lumbersexual mustache. Narwhal distillery selfies, trust fund literally before they sold out actually pinterest beard kogi small batch bespoke cronut banjo hashtag. Vinyl pour-over locavore slow-carb, authentic chartreuse paleo kogi vegan cred normcore echo park sustainable before they sold out.</p>
</div>
<!-- Example Interactive Visualization -->
<div id="network_plot" class="container-fluid main-container" >
<form>
<h4 style="font-family:helvetica"> Choose a week: <input
type="week",
name="choose_week",
min="2015-W01",
max="2015-W40",
value="2015-W02",
placeholder="Choose a week",
onchange="weekly(parseInt(this.value.substring(6,8)))"
></h4>
</form>
<script>
var graph;
function myGraph() {
// Add and remove elements on the graph object
this.addNode = function (obj) {
var radius = 300,
noise = (Math.random() - .5) * radius/10,
circle_x = (Math.round(Math.random())*2 - 1) * radius * Math.random() + w/2 + noise,
circle_y = Math.pow(Math.pow(radius,2) - Math.pow(circle_x - w/2, 2), .5) * (Math.round(Math.random())*2 - 1) + h/2 + noise,
center_x = (Math.random - 0.5) * w + noise * 5 * w/1500,
center_y = h/2 + noise*10,
final_x = (obj.type == 0) ? center_x : circle_x,
final_y = (obj.type == 0) ? center_y : circle_y;
nodes.push({"id": obj.name,
"group": obj.group,
"threat": obj.threat,
'type': d3.svg.symbolTypes[obj.type*3],
'x': final_x,
'y': final_y,
'fixed': ((obj.type == 0) ? true : false)
});
update();
};
this.removeNode = function (id) {
var i = 0;
var n = findNode(id);
while (i < links.length) {
if ((links[i]['source'] == n) || (links[i]['target'] == n)) {
links.splice(i, 1);
}
else i++;
}
nodes.splice(findNodeIndex(id), 1);
update();
};
this.removeLink = function (source, target) {
for (var i = 0; i < links.length; i++) {
if (links[i].source.id == source && links[i].target.id == target) {
links.splice(i, 1);
break;
}
}
update();
};
this.removeallLinks = function () {
links.splice(0, links.length);
update();
};
this.removeAllNodes = function () {
nodes.splice(0, links.length);
update();
};
this.addLink = function (obj) {
links.push({"source": findNode(obj.source), "target": findNode(obj.target), "value": obj.threat});
update();
};
this.freeNode = function (obj) {
// console.log(findNode(obj.name));
findNode(obj.name).fixed = false;
update();
};
var findNode = function (id) {
for (var i in nodes) {
if (nodes[i]["id"] === id) return nodes[i];
}
;
};
var findNodeIndex = function (id) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].id == id) {
return i;
}
}
;
};
// set up the D3 visualisation in the specified element
var w = $("#network_plot").width(),
h = window.innerHeight/1.2,
r = 6;
var color = d3.scale.category20b();
var vis = d3.select("#network_plot")
.append("svg:svg")
.attr("style", "outline: thin solid lightgrey;")
.attr("width", w)
.attr("height", h)
.attr("id", "svg_net")
.attr("pointer-events", "all")
.attr("viewBox", "0 0 " + w + " " + h)
.attr("perserveAspectRatio", "xMinYMid")
.append('svg:g');
// vis.append("rect")
// .attr("width", "100%")
// .attr("height", "100%")
// .attr("fill", "#7f7f7f");
var force = d3.layout.force();
var nodes = force.nodes(),
links = force.links();
var update = function () {
var link = vis.selectAll("line")
.data(links, function (d) {
return d.source.id + "-" + d.target.id;
});
link.enter().append("line")
.attr("id", function (d) {
return d.source.id + "-" + d.target.id;
})
.attr("stroke-width", function (d) {
return d.value / 100;
})
.attr("class", "link");
link.append("title")
.text(function (d) {
return d.value;
});
link.exit().remove();
var node = vis.selectAll("g.node")
.data(nodes, function (d) {
return d.id;
});
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.call(force.drag);
nodeEnter.append("svg:path")
.attr("id", function (d) {
return "Node;" + d.id;
})
.attr("d", d3.svg.symbol()
.size(function(d) { return (Math.pow(d.threat,2) + 5) * 20 * w/1500; })
.type(function(d) { return d.type; }))
.attr("class", "nodeStrokeClass")
.attr("fill", function(d) { return color(d.group); });
nodeEnter.append("svg:text")
.attr("class", "textClass")
.attr("x", 14)
.attr("y", ".31em")
.text(function (d) {
return (d.type == 'circle') ? d.id : '';
});
node.exit().remove();
var padding = 5,
radius=15;
function collide(alpha) {
var quadtree = d3.geom.quadtree(nodes);
return function(d) {
var rb = 2*radius + padding,
nx1 = d.x - rb,
nx2 = d.x + rb,
ny1 = d.y - rb,
ny2 = d.y + rb;
quadtree.visit(function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== d)) {
var x = d.x - quad.point.x,
y = d.y - quad.point.y,
l = Math.sqrt(x * x + y * y);
if (l < rb) {
l = (l - rb) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
});
};
}
var vulnNum = nodes.filter( function(d) { return d.type == 'square'; }).length,
platNum = nodes.filter( function(d) { return d.type == 'circle'; }).length
vis.selectAll(".title")
.remove();
var counter = vis.append("svg:text")
.attr("class", "title")
.attr("x", 10)
.attr("y", 15)
.attr("text-anchor", "left")
.text(function(d) {
return "Vulnerabilities: " + vulnNum + " Platforms: " + platNum;
});
var dayofWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
// Erase last draw of legend
d3.selectAll(".legend")
.remove();
var legend = vis.selectAll(".legend")
// sort color domain to list legend in ascending order
.data(color.domain().sort())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(-10," + i * 20 + ")"; });
legend.append("rect")
.attr("x", w - 18)
.attr("y", 2)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", w - 24)
.attr("y", 11)
.attr("dy", ".35em")
.attr("class", "legendText")
.style("text-anchor", "end")
.text(function(d) { return dayofWeek[d-1]; });
force.on("tick", function () {
node.attr("transform", function (d) {
return "translate(" + Math.max(r, Math.min(w - r, d.x)) + "," + Math.max(r, Math.min(h - r, d.y)) + ")";
});
link.attr("x1", function (d) {
return d.source.x;
})
.attr("y1", function (d) {
return d.source.y;
})
.attr("x2", function (d) {
return d.target.x;
})
.attr("y2", function (d) {
return d.target.y;
});
// node.each(collide(0.5));
});
// Restart the force layout.
force
.gravity(-.001)
.charge(-30)
.friction(0.5)
.linkDistance( function(d) { return d.value * 20 * w/1800 } )
.size([w, h])
.start();
};
// Make it all go
update();
}
function drawGraph(weeknumber) {
graph = new myGraph("#svgdiv");
// Load JSON and iteratively draw that weeks graph
d3.json('img/nvd.json', function(error, json){
if (error) return console.warn(error);
nodes = json.nodes;
links = json.links;
var step = 1;
function nextval(){
step++;
return 20 + (15 + step);
};
weeklynodes = nodes.filter( function(d){ return d.week == weeknumber; });
weeklylinks = links.filter( function(d){ return d.week == weeknumber; });
for (var i = 0; i < weeklynodes.length; i++){
(function(ind){
setTimeout(function(){ graph.addNode(weeklynodes[ind]); keepNodesOnTop(); }, 75 * ind);
})(i);
};
for (var i = 0; i < weeklylinks.length; i++){
(function(ind){
setTimeout(function(){ graph.addLink(weeklylinks[ind]); keepNodesOnTop(); }, 50 * ind + 75 * weeklynodes.length);
})(i);
};
// for (var i = 0; i < weeklynodes.length; i++){
// (function(ind){
// setTimeout(function(){ graph.freeNode(weeklynodes[ind]); keepNodesOnTop(); }, 20 * ind + 50 * weeklylinks.length + 75 * weeklynodes.length);
// })(i);
// };
});
}
// Initialize on Week 2, first non-empty week
var thisweek = 2;
drawGraph(thisweek);
// because of the way the network is created, nodes are created first, and links second,
// so the lines were on top of the nodes, this just reorders the DOM to put the svg:g on top
function keepNodesOnTop() {
$(".nodeStrokeClass").each(function( index ) {
var gnode = this.parentNode;
gnode.parentNode.appendChild(gnode);
});
}
function weekly(newweek){
// $('#svg_net').stop(stopAll=true,goToEnd=true);
d3.select("#svg_net")
.remove();
// myGraph();
drawGraph(newweek);
}
</script>
</div>
<div class="container-fluid main-container">
<p style="font-family:Helvetica;">
<span style="font-size:150%;color:purple;"><strong>TEMPLATE_CONCLUSION</strong><br></span>
Humblebrag williamsburg chambray pork belly neutra authentic, viral mustache twee yr normcore fashion axe kale chips truffaut. Asymmetrical mumblecore cray, kickstarter everyday carry 3 wolf moon health goth ugh pitchfork bicycle rights. Banh mi disrupt put a bird on it ugh beard food truck. Skateboard mlkshk celiac single-origin coffee. Ramps swag venmo disrupt, cliche meggings direct trade selfies gluten-free pop-up selvage affogato irony. Hammock sriracha etsy neutra gluten-free fap. Mixtape 8-bit umami, chambray raw denim keffiyeh selvage cred.</p>
<p>Echo park messenger bag ugh vinyl. Hammock trust fund listicle literally fanny pack photo booth. Whatever helvetica cred, you probably haven't heard of them cold-pressed selvage art party YOLO green juice direct trade franzen. Direct trade butcher bespoke cliche, hella pour-over four loko lumbersexual chicharrones vice neutra kitsch. Pitchfork squid bicycle rights listicle paleo bespoke. Mustache 3 wolf moon lo-fi, meh gochujang vice brunch. Mlkshk farm-to-table pug, meggings pitchfork bespoke four loko man bun disrupt drinking vinegar echo park viral tofu.</p>
<p>Dreamcatcher intelligentsia selfies, post-ironic synth kinfolk waistcoat mixtape humblebrag celiac ennui yuccie bespoke semiotics. Pug keytar ethical disrupt. Tacos tumblr biodiesel, trust fund narwhal 3 wolf moon portland viral normcore four loko brooklyn. Bitters YOLO drinking vinegar listicle, tofu selfies austin iPhone gluten-free literally hashtag. Cliche synth celiac, fashion axe knausgaard dreamcatcher vice lumbersexual. Meditation neutra blog DIY, mlkshk asymmetrical mumblecore pork belly meh. Kinfolk etsy DIY deep v bespoke pabst.</p>
</div>
<!-- Getting Started/Code Notebook Section -->
<div id='code' style="color:black;font-family:Helvetica;" >
<div class="container-fluid main-container">
<p style="font-family:Helvetica"><span style="font-size:200%;color:purple;"><br><strong>TEMPLATE_GETSTARTED</strong></span>
<br>Schlitz hoodie echo park godard, chicharrones gentrify small batch wayfarers gastropub put a bird on it humblebrag microdosing taxidermy drinking vinegar. Health goth scenester tacos actually, ugh tumblr vinyl XOXO ennui meditation try-hard. Narwhal seitan artisan, ugh flannel green juice polaroid pickled drinking vinegar tousled plaid man bun heirloom mixtape. Keytar try-hard jean shorts thundercats meh. Wayfarers banh mi sriracha, bitters intelligentsia messenger bag distillery migas. Fashion axe fixie photo booth gluten-free seitan, meh bicycle rights thundercats post-ironic occupy etsy. Post-ironic chia synth, cronut chillwave tousled kale chips craft beer umami sriracha health goth shoreditch paleo.</p>
<p>Follow along in the Jupyter Notebook below or check out the code files at <a href="https://github.com/CommerceDataService/TEMPLATE_REPO">TEMPLATE_REPO</a>.</p>
<p><a href="./TEMPLATE_NOTEBOOK.ipynb">Download TEMPLATE_NOTEBOOK_TYPE</a></p>
</div>
</div>
<!-- <div>
<iframe src="markdown_or_jupyter_export" marginwidth="0" frameborder = "0" marginheight="0" scrolling="no" width="100%" height="100%" onload="resizeIframe(this)"></iframe>
</div>
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
-->
</body>
</html>