-
Notifications
You must be signed in to change notification settings - Fork 0
/
Datable.html
135 lines (127 loc) · 6.34 KB
/
Datable.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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!-- EMAIL : [email protected] -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Datable Candidates</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- COPY THESE HEADERS -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/d3.3.5.5.min.js"></script>
<script type="text/javascript" src="./keshif.js" charset="utf-8"></script>
<link rel="stylesheet" href="./keshif.css" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- TO HERE -->
<script type="text/javascript">
// Copy this section
google.setOnLoadCallback(function(){
browser = new kshf.Browser({
domID: "#datable_demo", // This is the DOM id, might be different for your page.
itemName: "Datable Candidates",
barChartWidth: 100,
leftPanelLabelWidth: 230,
middlePanelLabelWidth: 230,
source: {
gdocId: '1y83VOWlGV4GThxp1xQlDH4Sz74bmja-EibflTfqnySU',
tables: "Form_Responses_1"
},
summaries: [
// { name: "When was the last time you committed code?" },
{ name: "Experience Level", value: "What's your experience level?" },
{ name: "Degrees earned", value: 'What Degrees have you earned?', catSplit: ", " },
{ name: "Data Science Techniques", value: "What Data Science techniques have you worked with?", catSplit: ", " },
{ name: "Languages and Libraries", value: "What languages & libraries do you use?", catSplit: ", " },
{ name: "Community and Engagement",
description: "My description",
value: function(){
var r=[];
if(this["Have you managed teams before?"]==="Yes")
r.push("Managed teams before");
if(this["Have you ever presented your work at an event?"]==="Yes")
r.push("Presented at an event");
if(this["Startup and/or Business Experience?"]==="Yes")
r.push("Startup and/or Business Experience");
if(this["Have you accepted or would you accept freelance work?"]==="Yes")
r.push("Accepted/ would accept freelance work");
if(this["Are you a US Citizen?"]==="Yes")
r.push("US Citizen");
if(this["Are you a community organizer?"]==="Yes")
r.push("Community Organizer");
if(this["Have you ever founded a startup, or joined a startup in the early stages, that achieved market traction or better?"]==="Yes")
r.push("Found/Jound an early-stage startup");
if(this["Have you ever been involved with BD, sales, or managed a client relationship?"]==="Yes")
r.push("BD/ sales / management in client relationships");
if(this["Do you volunteer for others' community events?"]==="Yes")
r.push("Volunteered at community events");
if(this["Have you provided successful introductions to another community organizer?"]==="Yes")
r.push("Provided introductions to another community organizer");
if(this[""]==="Yes") r.push("");
return r;
} },
{ name: "Security Clearance", value: 'Do you have a Security Clearance?', collapsed: true, panel: 'middle' },
{ name: "Experience in Sectors", value: 'What sectors have you worked in?', collapsed: true, catSplit: ", " },
{ name: "When was the last time you committed code?", panel: "middle", collapsed: true },
{ name: "Data Community DC Events Attended", catSplit: ", ", panel: 'middle', collapsed: true },
],
recordDisplay: {
sortColWidth: 45,
textSearch: "Describe yourself in one sentence.",
recordView: function(){
var major = this["Describe yourself in one sentence."];
if(major===null) major = "-";
var minor = this["Please describe three data science or data related projects you've worked on in the last three years. These can be features of larger projects, consulting projects, classified work described generally, or open source contributions."];
return "<div>" +
"<div class='col-md-3'>" +
"<div class='major'>" + major + "</div>"+
((minor!==null)?("<div class='minor'>"+minor+"</div>"):"")+
"</div>"+
"<div class='col-md-3'>" +
"<div class='_contact'> CONTACT </div>" +
"</div>" +
"</div>";
},
onDOM: function(d){
d3.select(d.DOM.record).select("._contact").on("click",
function(){
// This is where you customize the link and redirect, etc.
alert(d.data.id);
});
}
}
});
});
</script>
<style id="kshfStyle">
/* Custom CSS style, contact button, etc */
/* You will need to copy these probably, and change as appropriate */
/*#demo_Browser {
max-width: 850px;
max-height: 600px;
}*/
.minor{
font-weight: 300;
font-size: 0.8em;
}
._contact{
display: inline-block;
background-color: #27aae0;
border-radius: 10px;
color: white;
padding: 2px 5px;
font-size: 0.7em;
font-weight: 300;
cursor: pointer;
}
#datable_demo{
height: 700px;
}
</style>
</head>
<body>
<div class="contents">
<div id="datable_demo"></div>
</div>
</body>
</html>