-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
60 lines (60 loc) · 2.52 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Conference badge generator</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js" charset="utf-8"></script>
<style>
#vis{line-height:0}
/* feel free to adjust margins to effectively
fill the page with badges */
@page{margin:20mm 10mm}
/* adjust width and height to match your
svg template's width and height */
svg{
border:0.25px dashed #aaaaaa;
width:180mm;
height:55mm;
}
</style>
</head>
<body>
<div id="vis"></div><!-- element in which the badge are generated -->
<script>
d3.xml("./badgeTemplate.svg",function(error,xml){
/* import loaded xml/svg as the DOM node
later this node will be cloned for each
badge */
var importedNode=document.importNode(xml.documentElement,true);
var parentElement=d3.select("#vis").node();
d3.csv("./participants.csv",function(error,data){
data.forEach(function(d,i){/* for each participant */
var elemId="elemId"+i;
importedNode.id=elemId;
/* set node id on the imported node
and append its clone as child to #vis */
parentElement.appendChild(importedNode.cloneNode(true));
/* set name */
d3.selectAll("#"+elemId+" .name").text(d["name"]);
/* set surname */
d3.selectAll("#"+elemId+" .surname").text(d["surname"]);
/* deal with affiliations
1 or 2 lines of affiliation are expected
lines should be separated by "|" */
var afil=d["afil"].split("|");
if(afil.length==2) {// if 2 lines, then fill both
d3.selectAll("#"+elemId+" .afil1").text(afil[0]);
d3.selectAll("#"+elemId+" .afil2").text(afil[1]);
} else if(afil.length==1) {// if 1 line, then fill one remove other
d3.selectAll("#"+elemId+" .afil1").text(d["afil"]);
d3.selectAll("#"+elemId+" .afil2").remove();
} else {// in all other cases log to browser console
console.log(i);
console.log(afil);
}
});
});
});
</script>
</body>
</html>