Skip to content

Instantly share code, notes, and snippets.

@hepplerj

hepplerj/index.html

Last active August 29, 2015 14:21
Download ZIP
Chinese Text
Raw
index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chinese Input</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="./bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="visualization.js"></script>
</head>
<body>
<div id="main">
<h2>Chinese Input &#8212; IN DEVELOPMENT</h2>
<div id="chart"></div>
<h4>Trials</h4>
<!-- TODO: Adapt this so it's programmatically generated -->
<div class="filter_options">
<p>Session 1 Trial 2: <input id="session1trial2seg1" type="checkbox" onclick="segmentHighlight('#Session1Trial2Seg1')" unchecked> <span class="segment">xiama1yinjunjiu1</span></input></p>
<p>Session 2 Trial 1: <input id="session2trial1seg1" type="checkbox" onclick="segmentHighlight('#Session2Trial1Seg1')" unchecked> <span class="segment">xiamayinjunjiu1</span></input></p>
<p>Session 2 Trial 2: <input id="session2trial2seg1" type="checkbox" onclick="segmentHighlight('#Session2Trial2Seg1')" unchecked> <span class="segment">xiamayinjunjiu2</span></input></p>
<p>Session 5 Trial 1: <input id="session5trial1seg1" type="checkbox" onclick="segmentHighlight('#Session5Trial1Seg1')" unchecked> <span class="segment">xiama_yinjunjiu_</span></input></p>
<p>Session 6 Trial 1: <input id="session6trial1seg1" type="checkbox" onclick="segmentHighlight('#Session6Trial1Seg1')" unchecked> <span class="segment">xiama_yinjunjiu_</span></input></p>
<p>Session 6 Trial 2: <input id="session6trial2seg1" type="checkbox" onclick="segmentHighlight('#Session6Trial2Seg1')" unchecked> <span class="segment">xia1ma1yinliao_*junz1*jiu1</span></input></p>
<!-- <button id="unselect-all" onmouseover="this.style.cursor='pointer'">Unselect All Segments</button><button id="select-all" disabled="disabled" onmouseover="this.style.cursor='pointer'">Select All Segments</button> -->
</div>
</div>
</body>
</html>
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Lato:300,400);
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
background: #ffffff;
}
b {
font-weight: 900;
}
#main {
margin: 0 auto;
width: 960px;
}
/*#chart {
position: relative;
}*/
.segment {
border: 1px dashed #ccc;
padding: 2px;
margin: 2px;
}
.segment:hover {
border: 1px solid #333
}
.outline {
fill: none;
stroke: #888888;
stroke-width: 1px;
}
.hidden {
display: none;
visibility: hidden;
pointer-events: none;
}
.tooltip {
color: #222;
background: #fff;
padding: .5em;
text-shadow: #f5f5f5 0 1px 0;
border-radius: 10px;
border-color: #a6a6a6;
border-width: 1px;
border-style: solid;
box-shadow: 0px 0px 2px 0px #a6a6a6;
opacity: 0.9;
position: absolute;
width: 225px;
display: block;
}
.tooltip h5 {
font-size: 1.05rem;
}
.tooltip p {
font-size: 0.80rem;
}
table {
border: none;
margin: 0;
padding: 0;
border-spacing: 0;
width: 100%;
}
td {
text-align: right;
padding: 2px 0!important;
}
tr {
margin: 0;
background-color: white;
}
.node {
fill: #fff;
stroke: steelblue;
stroke-width: 2.5px;
font: 10px sans-serif;
}
.node text {
color: #333;
}
.link {
fill: none;
stroke: #888888;
stroke-weight: 1px;
stroke-opacity: 0.5;
}
.highlighted {
fill: none;
stroke: crimson;
stroke-opacity: 1;
}
.suppressed {
stroke: #f2f2f2;
}
.legend {
font-size: 12px;
}
rect {
stroke-width: 2;
}
.highlight {
stroke: red;
stroke-weight: 4px;
stroke-opacity: 1.0;
}
.row {
padding-top: 50px;
}
.col-md-3 {
background: rgba(250,255,255,0.5);
border-left: 1px solid #333;
height: 100%;
}
#english {
padding: 1em;
background: rgba(250,255,255,1);
border-bottom: 1px solid #ccc;
}
#chinese {
padding: 1em;
background: rgba(250,255,255,1);
border-bottom: 1px solid #ccc;
}
#source {
color: brown;
}
/* Filters */
#accordion {
position: fixed;
width: 20%;
right: 1;
}
.panel-body {
background: rgba(250,255,255,0.5);
}
.panel-default > .panel-heading{
/*background: #fff;*/
}
.panel-heading {
padding: 0;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.panel-group .panel {
border-radius: 0;
}
.panel-group {
margin-bottom: 0;
}
.panel-title a {
color: #333;
text-align: left;
width: 100%;
display: block;
padding: 10px 15px;
font-size: 14px;
outline: none;
}
.panel-title a:hover, .panel-title a:focus, .panel-title a:active {
text-decoration: none;
outline: none;
}
.panel-options {
padding: 5px;
}
.legend circle {
fill: none;
stroke: #ccc;
}
.legend text {
fill: #777;
font: 10px sans-serif;
text-anchor: middle;
}
button[disabled=disabled] {
display: none;
}
button[disabled=disabled] {
color: #555 !important;
opacity: 0.4;
}
.settings button[disabled=disabled] {
display: none;
}
Raw
tang_seg1.json
{
"nodes":[
{
"token": "x",
"type": "initial",
"uniq": "1",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "ia",
"type": "final",
"uniq": "2",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "1",
"type": "selection",
"uniq": "3",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "m",
"type": "initial",
"uniq": "4",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "a",
"type": "final",
"uniq": "5",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "1",
"type": "selection",
"uniq": "6",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "y",
"type": "initial",
"uniq": "7",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "in",
"type": "final",
"uniq": "8",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "l",
"type": "initial",
"uniq": "9",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "iao",
"type": "final",
"uniq": "10",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "_",
"type": "selection",
"uniq": "11",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "*",
"type": "productive-delete",
"uniq": "12",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "j",
"type": "initial",
"uniq": "13",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "un",
"type": "final",
"uniq": "14",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "z",
"type": "initial",
"uniq": "15",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "1",
"type": "selection",
"uniq": "16",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "*",
"type": "productive-delete",
"uniq": "17",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "j",
"type": "initial",
"uniq": "18",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "iu",
"type": "final",
"uniq": "19",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
},
{
"token": "1",
"type": "selection",
"uniq": "20",
"age_group": "18-30",
"dialect": "cantonese",
"gender": "female",
"operating_system": "mac",
"input_method": "apple",
"trial": "2",
"chinese": "",
"english": ""
}
],
"links":[
{
"source": 0,
"target": 1,
"session": 1,
"trial": 2,
"segment": 1
},
{
"source": 0,
"target": 1,
"session": 2,
"trial": 1,
"segment": 1
},
{
"source": 0,
"target": 1,
"session": 2,
"trial": 2,
"segment": 1
},
{
"source": 0,
"target": 1,
"session": 5,
"trial": 1,
"segment": 1
},
{
"source": 0,
"target": 1,
"session": 6,
"trial": 1,
"segment": 1
},
{
"source": 0,
"target": 1,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 1,
"target": 3,
"session": 1,
"trial": 2,
"segment": 1
},
{
"source": 1,
"target": 3,
"session": 2,
"trial": 1,
"segment": 1
},
{
"source": 1,
"target": 3,
"session": 2,
"trial": 2,
"segment": 1
},
{
"source": 1,
"target": 3,
"session": 5,
"trial": 1,
"segment": 1
},
{
"source": 1,
"target": 3,
"session": 6,
"trial": 1,
"segment": 1
},
{
"source": 1,
"target": 2,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 2,
"target": 3,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 3,
"target": 4,
"session": 1,
"trial": 2,
"segment": 1
},
{
"source": 3,
"target": 4,
"session": 2,
"trial": 1,
"segment": 1
},
{
"source": 3,
"target": 4,
"session": 2,
"trial": 2,
"segment": 1
},
{
"source": 3,
"target": 4,
"session": 5,
"trial": 1,
"segment": 1
},
{
"source": 3,
"target": 4,
"session": 6,
"trial": 1,
"segment": 1
},
{
"source": 3,
"target": 4,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 4,
"target": 5,
"session": 1,
"trial": 2,
"segment": 1
},
{
"source": 4,
"target": 6,
"session": 2,
"trial": 1,
"segment": 1
},
{
"source": 4,
"target": 6,
"session": 2,
"trial": 2,
"segment": 1
},
{
"source": 4,
"target": 5,
"session": 5,
"trial": 1,
"segment": 1
},
{
"source": 4,
"target": 5,
"session": 6,
"trial": 1,
"segment": 1
},
{
"source": 4,
"target": 5,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 5,
"target": 6,
"session": 1,
"trial": 2,
"segment": 1
},
{
"source": 5,
"target": 6,
"session": 5,
"trial": 1,
"segment": 1
},
{
"source": 5,
"target": 6,
"session": 6,
"trial": 1,
"segment": 1
},
{
"source": 5,
"target": 6,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 6,
"target": 7,
"session": 1,
"trial": 2,
"segment": 1
},
{
"source": 6,
"target": 7,
"session": 2,
"trial": 1,
"segment": 1
},
{
"source": 6,
"target": 7,
"session": 2,
"trial": 2,
"segment": 1
},
{
"source": 6,
"target": 7,
"session": 5,
"trial": 1,
"segment": 1
},
{
"source": 6,
"target": 7,
"session": 6,
"trial": 1,
"segment": 1
},
{
"source": 6,
"target": 7,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 7,
"target": 12,
"session": 1,
"trial": 2,
"segment": 1
},
{
"source": 7,
"target": 12,
"session": 2,
"trial": 1,
"segment": 1
},
{
"source": 7,
"target": 12,
"session": 2,
"trial": 2,
"segment": 1
},
{
"source": 7,
"target": 12,
"session": 5,
"trial": 1,
"segment": 1
},
{
"source": 7,
"target": 12,
"session": 6,
"trial": 1,
"segment": 1
},
{
"source": 7,
"target": 8,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 8,
"target": 9,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 9,
"target": 10,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 10,
"target": 11,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 11,
"target": 12,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 12,
"target": 13,
"session": 1,
"trial": 2,
"segment": 1
},
{
"source": 12,
"target": 13,
"session": 2,
"trial": 1,
"segment": 1
},
{
"source": 12,
"target": 13,
"session": 2,
"trial": 2,
"segment": 1
},
{
"source": 12,
"target": 13,
"session": 5,
"trial": 1,
"segment": 1
},
{
"source": 12,
"target": 13,
"session": 6,
"trial": 1,
"segment": 1
},
{
"source": 12,
"target": 13,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 13,
"target": 14,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 14,
"target": 15,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 15,
"target": 16,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 16,
"target": 17,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 13,
"target": 17,
"session": 1,
"trial": 2,
"segment": 1
},
{
"source": 13,
"target": 17,
"session": 2,
"trial": 1,
"segment": 1
},
{
"source": 13,
"target": 17,
"session": 2,
"trial": 2,
"segment": 1
},
{
"source": 13,
"target": 17,
"session": 5,
"trial": 1,
"segment": 1
},
{
"source": 13,
"target": 17,
"session": 6,
"trial": 1,
"segment": 1
},
{
"source": 17,
"target": 18,
"session": 1,
"trial": 2,
"segment": 1
},
{
"source": 17,
"target": 18,
"session": 2,
"trial": 1,
"segment": 1
},
{
"source": 17,
"target": 18,
"session": 2,
"trial": 2,
"segment": 1
},
{
"source": 17,
"target": 18,
"session": 5,
"trial": 1,
"segment": 1
},
{
"source": 17,
"target": 18,
"session": 6,
"trial": 1,
"segment": 1
},
{
"source": 17,
"target": 18,
"session": 6,
"trial": 2,
"segment": 1
},
{
"source": 18,
"target": 19,
"session": 1,
"trial": 2,
"segment": 1
},
{
"source": 18,
"target": 19,
"session": 2,
"trial": 1,
"segment": 1
},
{
"source": 18,
"target": 19,
"session": 2,
"trial": 2,
"segment": 1
},
{
"source": 18,
"target": 19,
"session": 5,
"trial": 1,
"segment": 1
},
{
"source": 18,
"target": 19,
"session": 6,
"trial": 1,
"segment": 1
},
{
"source": 18,
"target": 19,
"session": 6,
"trial": 2,
"segment": 1
}
]
}
Raw
visualization.js
queue()
.defer(d3.json, "tang_seg1.json")
.await(function(error, graph) {
arcDiagram(graph);
});
var width = 960,
height = 200,
margin = 20,
pad = margin / 2,
padding = 10,
radius = 6,
yfixed = pad + radius;
// Legend variables
var legend_x = 0,
legend_y = 5,
legend_width = 175,
legend_height = 620,
legend_margin = 20
key_y = 40,
key_x = 16,
mapped_y = legend_y + legend_height - 90;
var color = d3.scale.category20();
// Tooltip
var tooltip = d3.select("body").append("div")
.classed("tooltip", true)
.classed("hidden", true);
// Main
//-----------------------------------------------------
function arcDiagram(graph) {
var radius = d3.scale.sqrt()
.domain([0, 20])
.range([0, 15]);
var svg = d3.select("#chart").append("svg")
.attr("id", "arc")
.attr("width", width)
.attr("height", height);
// create plot within svg
var plot = svg.append("g")
.attr("id", "plot")
.attr("transform", "translate(" + padding + ", " + padding + ")");
// count the paths
graph.links.forEach(function(d,i) {
var pathCount = 0;
for (var j = 0; j < i; j++) {
var otherPath = graph.links[j];
if (otherPath.source === d.source && otherPath.target === d.target) {
pathCount++;
}
}
d.pathCount = pathCount;
});
// // Create the unique identifiers for the links
// graph.links.forEach(function(d,i) {
// });
// fix graph links to map to objects
graph.links.forEach(function(d,i) {
d.source = isNaN(d.source) ? d.source : graph.nodes[d.source];
d.target = isNaN(d.target) ? d.target : graph.nodes[d.target];
d.sessions = ("Session" + d.session + "Trial" + d.trial + "Seg" + d.segment)
});
linearLayout(graph.nodes);
drawLinks(graph.links);
drawNodes(graph.nodes);
}
// layout nodes linearly
function linearLayout(nodes) {
nodes.sort(function(a,b) {
return a.uniq - b.uniq;
});
var xscale = d3.scale.linear()
.domain([0, nodes.length - 1])
.range([radius, width - margin - radius]);
nodes.forEach(function(d, i) {
d.x = xscale(i);
d.y = yfixed;
});
}
function drawNodes(nodes) {
var gnodes = d3.select("#plot").selectAll("g.node")
.data(nodes);
var nodeEnter = gnodes.enter()
.append('g')
.attr("class","gnode");
nodeEnter.append("circle")
.attr("class", "node")
.attr("id", function(d, i) { return d.name; })
.attr("cx", function(d, i) { return d.x; })
.attr("cy", function(d, i) { return d.y; })
.attr("r", 14)
.style("stroke", function(d, i) { return color(d.type); });
// Handling mouseover functions
nodeEnter.selectAll(".node")
.on("mousemove", function(d, i) {
var mouse = d3.mouse(d3.select("body").node());
tooltip
.classed("hidden", false)
.attr("class", "tooltip")
.attr("style", "left:" + (mouse[0] + 20) + "px; top:" + (mouse[1] - 50) + "px")
.html(tooltipText(d));
});
// .on("mouseover", nodeOver);
nodeEnter.append("text")
.style("text-anchor", "middle")
.attr("dx", function(d) { return d.x; })
.attr("dy", function(d) { return d.y + 5; })
.text(function(d) { return d.token; });
// d3.select("#trial2")
// .on("mouseover", trialOver);
}
function drawLinks(links) {
var radians = d3.scale.linear()
.range([Math.PI / 2, 3 * Math.PI / 2]);
var arc = d3.svg.line.radial()
.interpolate("basis")
.tension(0)
.angle(function(d) { return radians(d); });
d3.select("#plot").selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.classed("highlighted", false)
.attr("id", function(d) { return d.sessions})
.style("stroke-width", function(d) { return (2 + d.pathCount); })
.attr("transform", function(d,i) {
var xshift = d.source.x + (d.target.x - d.source.x) / 2;
var yshift = yfixed;
return "translate(" + xshift + ", " + yshift + ")";
})
.attr("d", function(d,i) {
var xdist = Math.abs(d.source.x - d.target.x);
arc.radius(xdist / 2);
var points = d3.range(0, Math.ceil(xdist / 3));
radians.domain([0, points.length - 1]);
return arc(points);
})
// .call(transition);
// .on("mouseover", edgeOver);
}
// Draw legend
//-----------------------------------------------------
function drawLegend(d) {
var legend = svg.append("g")
.attr("class", "legend");
var key = legend.append("g")
// Initial
key.append("circle")
.attr("id", "legend_initial")
.attr("cx", legend_x + key_x)
.attr("cy", legend_y + key_y + 5)
.attr("r", 5)
.style("fill", "blue");
key.append("text")
.attr("class", "legendText")
.attr("id", "legend_initial_label")
.attr("x", legend_x + key_x + 10 )
.attr("y", legend_y + 10 + key_y )
.text("Initial");
// Selection
key.append("circle")
.attr("id", "legend_selection")
.attr("cx", function () { return legend_x + key_x })
.attr("cy", function () { return legend_y + legend_margin + key_y + 5 })
.attr("r", 5)
.style("fill", "lightblue");
key.append("text")
.attr("class", "legendText")
.attr("id", "legend_selection_label")
.attr("x", legend_x + key_x + 10)
.attr("y", legend_y + legend_margin + 10 + key_y)
.text("Selection");
// Final
key.append("circle")
.attr("id", "legend_final")
.attr("cx", legend_x + key_x)
.attr("cy", legend_y + 2 * legend_margin + key_y + 5)
.attr("r", 5)
.style("fill", "orange");
key.append("text")
.attr("class", "legendText")
.attr("id", "legend_final_label")
.attr("x", legend_x + key_x + 10)
.attr("y", legend_y + 2 * legend_margin + 10 + key_y)
.text("Final");
// Delete
key.append("circle")
.attr("id", "legend_delete")
.attr("cx", legend_x + key_x)
.attr("cy", legend_y + 3 * legend_margin + key_y + 5)
.attr("r", 5)
.style("fill", "gold");
key.append("text")
.attr("class", "legendText")
.attr("id", "legend_delete_label")
.attr("x", legend_x + key_x + 10)
.attr("y", legend_y + 3 * legend_margin + 10 + key_y)
.text("Delete");
}
function tooltipText(d) {
return "<h5>Information for " + d.token + "</h5>" +
"<table>" +
"<tr>" +
"<td class='field'>Token: </td>" +
"<td>" + d.token + "</td>" +
"</tr>" +
"<tr>" +
"<td class='field'>Dialect: </td>" +
"<td>" + d.dialect + "</td>" +
"</tr>" +
"<tr>" +
"<td class='field'>IME: </td>" +
"<td>" + d.input_method + "</td>" +
"</tr>" +
"<tr>" +
"<td class='field'>Operating System: </td>" +
"<td>" + d.operating_system + "</td>" +
"</tr>" +
"<tr>" +
"<td class='field'>Trial: </td>" +
"<td>" + d.trial + "</td>" +
"</tr>" +
"</table>";
}
function segmentHighlight(streamHighlight) {
if(d3.selectAll("path").filter(streamHighlight).classed("highlighted") == true){
// d3.selectAll("path").filter(this !== streamHighlight).classed("suppressed", false)
d3.selectAll("path").filter(streamHighlight).classed("highlighted", false)
} else {
// d3.selectAll("path").filter(this !== streamHighlight).classed("suppressed", true)
d3.selectAll("path").filter(streamHighlight).classed("highlighted", true)
}
}
// function resetHighlight() {
// d3.selectAll("path").style("display","block");
// }
function nodeOver(d,i) {
d3.selectAll("path").style("stroke", function (p) {return p.source == d || p.target == d ? "#17becf" : "#888888"})
}
function edgeOver(d) {
d3.selectAll("path").style("stroke", function(p) {return p == d ? "#17becf" : "#888888"})
}
function transition(path) {
path.transition()
.duration(2500)
.attrTween("stroke-dasharray", tweenDash)
.each("end", function() { d3.select(this).call(transition); });
}
function tweenDash() {
var l = this.getTotalLength(),
i = d3.interpolateString("0," + l, l + "," + l);
return function(t) { return i(t); };
}
// Checkbox functions
// d3.select("#unselect-all").on("click", unselectAll());
// d3.select("#select-all").on("click", selectAll());
// function unselectAll() {
// console.log("unselected")
// d3.selectAll("#select-all").attr("disabled", null);
// d3.selectAll("#unselect-all").attr("disabled", "disabled");
// d3.selectAll("input").property('checked', false);
// }
// function selectAll() {
// console.log("selected")
// d3.selectAll("#select-all").attr("disabled", "disabled");
// d3.selectAll("#unselect-all").attr("disabled", null);
// d3.selectAll("input").property('checked', true);
// }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment