<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v5.js"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="gdheader">
<table class="headertable">
<tr>
<td colspan="2">Choose Colors for
</td>
<td>
<button name="barGraph" type="button" onclick="barGraph()">Add Chart</button>
</td>
</tr>
<tr>
<td>
Bars
</td>
<td>Selections</td>
</tr>
<tr>
<td>
<label id="test_wrapper1">
<input type="color" id="barColor" value="#FF7F00"> </label>
</td>
<td>
<label id="test_wrapper2">
<input type="color" id="selectionColor" value="#0000FF">
</label>
</td>
</tr>
</table>
</div>
<div id="gdheaderpadding"></div>
<div class="barGraph" id="barGraph"></div>
<table id="table"></table>
<script src="js/script.js">
</script>
</body>
</html>
var selectedObject = [];
function barGraph() {
divWidth = 1080;
//create selection variable for showing selection in table
var selection = "";
//set dimensions of SVG and margins
var margin = {top: 30,right: 200, bottom: 30, left: 100,},
width = divWidth - margin.left - margin.right,
height = 300 - margin.top - margin.bottom,
x = d3.scaleBand().range([0, width - 20]).paddingInner(0.1).paddingOuter(0.1),
y = d3.scaleLinear().range([height, 0]);
//get the bar color
var barColor = document.getElementById('barColor').value;
var dataDesc = "Dummy Data";
//setup the axis
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);
//create the div for the graph
var barGraphdiv = d3.select(".barGraph")
.append("div")
.attr("class", "graph")
.attr("id", "newBarGraph");
// create main svg
var svg = d3.select("#newBarGraph")
.append("svg")
.attr("width", width + margin.left + margin.right - 100)
.attr("height", height + margin.top + margin.bottom - 10)
.append("g")
.attr("transform", "translate (" + margin.left + "," + margin.top + ")");
//load the data
d3.tsv("Dummy.tsv", type).then(function(data) {
// get values from the data for the domains
x.domain(data.map(function(d) {
return d.ID;
}));
y.domain([0, d3.max(data, function(d) {return d.RFU;})]);
var zoom = d3.zoom()
.scaleExtent([1, 8])
.translateExtent([[0, 0],[width, height]])
.extent([[0, 0],[width, height]])
.on("zoom", () => {zoomed();});
//create the x-axis
var gx = svg.append("g")
.attr("class", "axis--x")
.attr("transform", "translate (0, " + height + ")")
.attr('clip-path', 'url(#clip)')
.call(xAxis)
.selectAll("text")
.style("text-anchor", "middle")
.attr("class", "x-axisticks");
svg.append("text")
.attr("tranform", "rotate(0)")
.attr("class", "axis--x")
.attr("x", width)
.attr("y", height)
.attr("dy", "0.5em")
.attr("text-anchor", "end")
.text("ID")
.attr("transform", "rotate(0)");
//create the y-axis
var gy = svg.append("g")
.attr("class", "axis--y")
.call(yAxis);
svg.append("text")
.attr("class", "axis--y")
.attr("tranform", "rotate(-90)")
.attr("y", -10)
.attr("dy", "0.8em")
.attr("dx", "3em")
.attr("text-anchor", "end")
.text("RFU")
.attr("transform", "rotate(-90)");
//create clipPath to clip zoomed bars
svg.append('defs')
.append('clipPath')
.attr('id', 'clip')
.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', width - 15)
.attr('height', height + 20);
//add the data as bars
var bar = svg.append("g")
.attr('class', 'main')
.attr('clip-path', 'url(#clip)')
.selectAll("bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.style("fill", barColor)
.attr("fill-opacity", "0.3")
.attr("x", function(d) {
return x(d.ID);
})
.attr("width", x.bandwidth())
//set initial coords for bars for animation.
.attr("y", height)
.attr("height", 0)
//animate bars to final heights
.transition()
.duration(700)
.attr("y", function(d) {
return y(d.RFU);
})
.attr("height", function(d) {
return height - y(d.RFU);
})
.attr("fill-opacity", "1.0")
.attr("class", "y-data");
//Insert Brush area
var brush = d3.brushX();
svg.append("g")
.attr("class","x brush")
.call(brush)
.selectAll("rect")
.style({
"fill": "#69f",
"fill-opacity": "0.3"
});
//create invisible bars for selections
var invisibleBars = svg.selectAll("bar")
.data(data)
.enter()
.append("rect")
.attr("x", function(d) {
return x(d.ID);
})
.attr("width", x.bandwidth())
.attr("y", -5)
.attr("height", height + 5)
.attr("class", "xmousemap")
.attr("fill-opacity", "0.0")
.on("mouseover", function(d) {
d3.select(this).attr("class", "mouseover");
})
.on("mouseout", function(d) {
d3.select(this).attr("class", "xmousemap");
})
.on("click", function(d) {
var selectionColor = document.getElementById('selectionColor').value;
var obj = { Title: dataDesc, ID: d.ID, Name: d.Name, RFU: d.RFU, barcolor: barColor};
selectedObject.push(obj);
selection += "<tr style= color:" + selectionColor + "> <td>" + d.ID + "</td> <td>" + d.Name + "</td> <td>" + d.RFU + "</td> <td>" + d.SD + "</td> <td>" + d.Rank + "</td> </tr>";
var sel = d3.select(this)
.attr("fill-opacity", "0.2")
.style("fill", selectionColor)
.attr("id", "selectedbars");
document.getElementById("table").innerHTML = "<tr><td colspan = " + "4" + ">Data Selected: </td></tr>" + "<tr><th>ID</th><th>Name</th><th>RFU</th><th>SD</th><th>Rank</th></tr>" + selection;
});
brush.on('brush', function(d){
k = brush.extent();
j = data.filter(function(d){
return k[0] <= d.Name && k[1] >=d.Name;
});
console.log(j);
});
svg.call(zoom);
function zoomed() {
x.range([0, width - 20].map(d => d3.event.transform.applyX(d)));
svg.selectAll(".y-data").attr("x", function(d) {
return x(d.ID);
}).attr("width", x.bandwidth());
svg.selectAll(".xmousemap").attr("x", function(d) {
return x(d.ID);
}).attr("width", x.bandwidth());
svg.selectAll(".mouseover").attr("x", function(d) {
return x(d.ID);
}).attr("width", x.bandwidth());
svg.select(".axis--x").attr("transform", "translate (0, " + height + ")").call(xAxis);
}
});
}
//convert RFU to integers
function type(d) {
d.RFU = +d.RFU;
d.SD = +d.SD;
d.CV = +d.CV;
d.Rank = +d.Rank;
return d;
}
button {
background: darkred;
color: white !important;
border: none;
border-radius: 2px;
padding:4px 10px;
margin:5px;
font-weight: bold !important;
}
#gdheader {
position: fixed;
top: 0;
left: 0;
padding-left: 30px;
padding-right: 30px;
z-index: 999;
width: 100%;
min-width: 800px;
height: 100px;
background: white;
border-bottom: 2px solid DarkRed;
font: 14px Arial, sans-serif;
}
.headertable {
padding: 5px;
margin: 5px;
}
#gdheaderpadding {
height: 120px;
}
h1 {
font: 20px Arial, sans-serif;
font-weight: bold;
color: DarkRed;
margin-left: 30px;
}
#barColor {
// visibility: hidden;
// z-index: 20;
}
#selectionColor {
// visibility: hidden;
}
/*#test_wrapper2 {
background-color: Blue;
height: 20px;
width: 20px;
position: fixed;
z-index: 10;
}*/
.graph {
width: auto;
}
.axis {
font: 10px Arial, sans-serif;
font-weight: bold;
}
.axis--x {
font: 10px Arial, sans-serif;
font-weight: bold;
}
.axis--x path,
.axis--x line {
fill: none;
stroke: #dadada;
shape-rendeering: crispEdges;
}
.axis--y {
font: 10px Arial, sans-serif;
font-weight: bold;
}
.axis--y path,
.axis--y line {
fill: none;
stroke: #dadada;
shape-rendeering: crispEdges;
}
.mouseover {
fill: black;
fill-opacity: 0.2;
}
.selectiontable {
font: 10px Arial, sans-serif;
font-weight: bold;
padding: 5px;
}
th {
padding: 2px 2px;
overflow: hidden;
word-break: normal;
border-color: #ccc;
color: #333;
background-color: #f0f0f0;
text-align: center !important;
}
td {
padding: 0px 10px !important;
}
.barGraph {
padding: 20px;
min-width: 700px;
}
ID Name RFU SD CV Rank
1 Name1 107 32 29 37
2 Name2 24 16 67 78
3 Name3 27 6 23 74
4 Name4 18 1 7 86
5 Name5 29 8 27 69
6 Name6 15540 1544 10 21
7 Name7 31361 6423 20 6
8 Name8 32 7 24 63
9 Name9 45 12 26 49
10 Name10 13 4 32 93
11 Name11 20 5 25 85
12 Name12 41 5 12 52
13 Name13 30 5 15 68
14 Name14 21 4 18 83
15 Name15 33 2 5 58
16 Name16 42 1 3 51
17 Name17 9 10 39
18 Name18 37 2 4 56
19 Name19 13 2 14 93
20 Name20 31 4 12 66