|
<html> |
|
<head> |
|
<title>Brush Example</title> |
|
<style type="text/css"> |
|
.graphholder |
|
{ |
|
margin-left: auto; |
|
margin-right: auto; |
|
} |
|
|
|
.backgroundlines{ |
|
fill:none; |
|
stroke:#ddd; |
|
shape-rendering: crispEdges; |
|
} |
|
.foregroundlines{ |
|
fill:none; |
|
stroke:steelblue; |
|
|
|
} |
|
.dimension |
|
{ |
|
fill:none; |
|
stroke:black; |
|
|
|
|
|
} |
|
.dimension text |
|
{ |
|
fill:black; |
|
stroke:none; |
|
stroke-width:1px; |
|
font-size: 12px; |
|
|
|
} |
|
.brusher .background |
|
{ |
|
visibility:visible !important; |
|
fill:none; |
|
stroke:none; |
|
|
|
} |
|
.brusher .extent |
|
{ |
|
visibility: visible !important; |
|
fill:#333; |
|
opacity: 0.5; |
|
stroke:white; |
|
stroke-width:1px; |
|
} |
|
|
|
|
|
.selectionTable |
|
{ |
|
background: white; |
|
border-radius: 3px; |
|
border-collapse: collapse; |
|
height: 15; |
|
margin: auto; |
|
max-width: 600px; |
|
padding: 5px; |
|
width: 100%; |
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); |
|
animation: float 5s infinite; |
|
} |
|
|
|
table |
|
{ |
|
display: table; |
|
/*border-collapse: separate;*/ |
|
border-spacing: 2px; |
|
border-color: grey; |
|
} |
|
|
|
.selectionTable th.text-left |
|
{ |
|
text-align: left; |
|
} |
|
|
|
.selectionTable th:first-child |
|
{ |
|
border-top-left-radius: 3px; |
|
} |
|
|
|
.selectionTable th |
|
{ |
|
color: #D5DDE5; |
|
background: #1b1e24; |
|
border-bottom: 4px solid #9ea7af; |
|
border-right: 1px solid #343a45; |
|
font-size: 18px; |
|
font-weight: 100; |
|
padding: 20px; |
|
text-align: left; |
|
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); |
|
vertical-align: middle; |
|
} |
|
tr { |
|
border-top: 1px solid #C1C3D1; |
|
border-bottom-: 1px solid #C1C3D1; |
|
color: #666B85; |
|
font-size: 16px; |
|
font-weight: normal; |
|
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); |
|
} |
|
|
|
tr { |
|
display: table-row; |
|
vertical-align: inherit; |
|
border-color: inherit; |
|
} |
|
tr:hover td { |
|
background:#4E5066; |
|
color:#FFFFFF; |
|
border-top: 1px solid #22262e; |
|
border-bottom: 1px solid #22262e; |
|
} |
|
|
|
tr:first-child { |
|
border-top:none; |
|
} |
|
|
|
tr:last-child { |
|
border-bottom:none; |
|
} |
|
|
|
tr:nth-child(odd) td { |
|
background:#EBEBEB; |
|
} |
|
|
|
tr:nth-child(odd):hover td { |
|
background:#4E5066; |
|
} |
|
|
|
tr:last-child td:first-child { |
|
border-bottom-left-radius:3px; |
|
} |
|
|
|
tr:last-child td:last-child { |
|
border-bottom-right-radius:3px; |
|
} |
|
|
|
td { |
|
background:#FFFFFF; |
|
padding:20px; |
|
text-align:left; |
|
vertical-align:middle; |
|
font-weight:300; |
|
font-size:18px; |
|
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); |
|
border-right: 1px solid #C1C3D1; |
|
} |
|
|
|
td:last-child { |
|
border-right: 0px; |
|
} |
|
|
|
th.text-left { |
|
text-align: left; |
|
} |
|
|
|
th.text-center { |
|
text-align: center; |
|
} |
|
|
|
th.text-right { |
|
text-align: right; |
|
} |
|
|
|
td.text-left { |
|
text-align: left; |
|
} |
|
|
|
td.text-center { |
|
text-align: center; |
|
} |
|
|
|
td.text-right { |
|
text-align: right; |
|
} |
|
</style> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> |
|
|
|
<script type="text/javascript"> |
|
/////////// data variable declaration |
|
var globaldata,axis; |
|
var dimensions; |
|
var filtereddataset; |
|
var xscale; |
|
if (!Array.prototype.find) { |
|
Object.defineProperty(Array.prototype, 'find', { |
|
value: function(predicate) { |
|
'use strict'; |
|
if (this == null) { |
|
throw new TypeError('Array.prototype.find called on null or undefined'); |
|
} |
|
if (typeof predicate !== 'function') { |
|
throw new TypeError('predicate must be a function'); |
|
} |
|
var list = Object(this); |
|
var length = list.length >>> 0; |
|
var thisArg = arguments[1]; |
|
var value; |
|
|
|
for (var i = 0; i < length; i++) { |
|
value = list[i]; |
|
if (predicate.call(thisArg, value, i, list)) { |
|
return value; |
|
} |
|
} |
|
return undefined; |
|
} |
|
}); |
|
} |
|
window.onload=function(){ |
|
margin={left:50,right:50,top:50,bottom:20} |
|
var height=600-margin.top-margin.bottom; |
|
var width=1100-margin.left-margin.right; |
|
var dimensionalscale={}; |
|
xscale=d3.scale.ordinal().rangePoints([0,width],.1); |
|
var dimensionalaxis={}; |
|
var table; |
|
// Declaring lIne generator |
|
var line =d3.svg.line(); |
|
|
|
// Declaring the brush |
|
//var brush=d3.svg.brush(); |
|
|
|
var svg=d3.select("body").append("div").attr("class","graphholder").style("height",(height+margin.bottom+margin.top)+"px") |
|
.style("width",(width+margin.left+margin.right)+"px").append("svg") |
|
.style("height",(height+margin.bottom+margin.top)+"px") |
|
.style("width",(width+margin.left+margin.right)+"px"); |
|
|
|
graph=svg.append("g").style("transform","translate("+margin.left+"px,"+margin.top+"px)"); |
|
|
|
graph.append("rect").style({"width":width+"px","height":height+"px",fill:"none"}) |
|
|
|
|
|
|
|
|
|
///// getting data |
|
d3.csv("cars.csv",function(error, data){ |
|
if(!!error) |
|
{ |
|
console.warn(error); |
|
} |
|
globaldata=data; |
|
dimensions=Object.keys(data[0]).filter(function(d){return d!="Name"}).map(function(d){return {name:d} }); |
|
console.log(dimensions); |
|
console.log("--------------------------------------") |
|
xscale.domain(dimensions.map(function(d){return d.name})); |
|
console.log(xscale.domain()); |
|
console.log(dimensions.map(function(d,i){return xscale(d.name)})) |
|
|
|
//// Creating a seperate scale for each if the dimensions |
|
|
|
|
|
dimensions.forEach(function(d,i){ |
|
dimensionalscale[d.name]=d3.scale.linear().range([height,0]); |
|
}); |
|
|
|
// Table declaration |
|
// Table Headers will be added after extracting |
|
table=d3.select("body").append("table").attr("class","selectionTable"); |
|
tableheaders=table.append("tr").attr("class","tableheading").selectAll("th").data(["Name"].concat(dimensions.map(function(d){return d.name}))).enter() |
|
.append("th").text(function(d){return d}); |
|
|
|
// Filling the domain values for each of the dimension in dimensional scales |
|
|
|
dimensions.forEach(function(d,i){ |
|
dimensionalscale[d.name].domain(d3.extent(data.map(function(b,i){return +b[d.name]}))); |
|
}); |
|
//globaldata=dimensionalscale; |
|
//console.log(dimensionalscale); |
|
|
|
// Creating axis for each dimension |
|
dimensions.forEach(function(d){ |
|
dimensionalaxis[d.name]=d3.svg.axis().scale(dimensionalscale[d.name]).orient("left"); |
|
}) |
|
axis=dimensionalaxis; |
|
|
|
// Plotting circles with data |
|
|
|
/* graph.append("g").attr("class","tuples").selectAll("circles").data(data) |
|
.enter().append("g").each(function(d,i){ |
|
thisvalue=this; |
|
d3.select(thisvalue).selectAll("circles").data(dimensions.map(function(d){return d.name;})).enter().append("circle").attr("r",3) |
|
.attr("cx",function(c){ return xscale(c) }) |
|
.attr("cy",function(c){return dimensionalscale[c]( d[c])}) |
|
.style("fill","blue"); |
|
});*/ |
|
|
|
// Background Lines |
|
graph.append("g").attr("class","bacground").selectAll("backgroundlines").data(data).enter().append("path").attr("class","backgroundlines") |
|
.attr("d",function(d){return LineGen(d) } ); |
|
|
|
//foreground lines |
|
graph.append("g").attr("class","foreground").selectAll("backgroundlines").data(data).enter().append("path").attr("class","foregroundlines") |
|
.style("display","none") |
|
.attr("d", function(d){return LineGen(d) }); |
|
|
|
|
|
console.log("----- at trrouble Location----------------") |
|
console.log(dimensions); |
|
|
|
|
|
/// Positioning the coordinates |
|
graph.append("g").attr("class","dimensionalaxis").selectAll("axis").data(dimensions).enter() |
|
.append("g").attr("class", "dimension") |
|
.each(function(b){ |
|
// Postioning the axis |
|
d3.select(this).append("g").attr("transform", "translate("+xscale(b.name)+"," + 0 + ")") |
|
.call( dimensionalaxis[b.name]); |
|
|
|
// Creating the lables |
|
d3.select(this).append("g").attr("transform","translate(0,"+(-margin.top>>2)+" )") |
|
.attr("class","lebleGroup").append("text").style({"font-family":"calibri","font-size":"13px","stroke":"1px","text-anchor":"middle"}) |
|
.attr("x",xscale(b.name)) |
|
.text(b.name) |
|
// Creating the brushes |
|
var brush=d3.svg.brush(); |
|
|
|
// assigning brush to corresponding dimensional object |
|
b.brush=brush; |
|
dimensions.find(function(d){return d.name==b.name}).brush=b.brush; |
|
|
|
//initiating status to false |
|
b.active=true; |
|
dimensions.find(function(d){return d.name==b.name}).active=b.active; |
|
|
|
//console.log(dimensions.find(function(d){return d.name==b.name})); |
|
//console.log(dimensions.find(function(d){return d.name==b.name}).brush.extent()) |
|
brush.y(dimensionalscale[b.name]) |
|
//.on("brushmove",brushmove); |
|
.on("brush",function(){ |
|
var extent=brush.extent(); |
|
// assigning local and grobal varaible of dimension |
|
b.active=!brush.empty()?true:false; |
|
|
|
dimensions.find(function(d){return d.name==b.name}).active=b.active; |
|
|
|
|
|
// Displaying lines which are selected |
|
if(!!dimensions.filter(function(d){return d.active }).length){ |
|
d3.selectAll(".foregroundlines").each(function(d){ |
|
|
|
d3.select(this) |
|
.style("display", function(c){ |
|
return dimensions.filter(function(cond){return cond.active}).every(function(dimension) |
|
{ |
|
return (c[dimension.name]>=dimension.brush.extent()[0] && c[dimension.name]<=dimension.brush.extent()[1])? true: false |
|
})?"block":"none"; |
|
})}); |
|
} |
|
else |
|
{ |
|
|
|
d3.selectAll(".foregroundlines").style("display","none") |
|
} |
|
|
|
|
|
}) |
|
// for filtering out table results |
|
.on("brushend",function(){ |
|
var extent=brush.extent(); |
|
|
|
// assigning local and grobal varaible of dimension |
|
b.active=!brush.empty()?true:false; |
|
dimensions.find(function(d){return d.name==b.name}).active=b.active; |
|
|
|
dataset=data.filter(function(dr){ return dimensions.filter(function(cond){return cond.active}).every(function(dimension){ |
|
return (dr[dimension.name]>=dimension.brush.extent()[0] && dr[dimension.name]<=dimension.brush.extent()[1])? true: false |
|
})}); |
|
|
|
|
|
//clearing the rows before |
|
table.selectAll(".filteredData").remove(); |
|
//Appending new data |
|
if(!!dimensions.filter(function(cond){return cond.active}).length){ |
|
table.selectAll("tr:not(.tableheading)").data(dataset).enter().append("tr").attr("class","filteredData").each(function(dr){ |
|
d3.select(this).selectAll("td").data(["Name"].concat(dimensions.map(function(d){return d.name}))).enter().append("td").text(function(dm){return dr[dm]}); |
|
}); |
|
} |
|
|
|
}) |
|
|
|
d3.select(this).append("g").attr("class","brusher") |
|
.attr("transform","translate("+(xscale(b.name)-(30>>1))+",0)") |
|
.call(brush) |
|
.call(brush.event) |
|
.selectAll("rect").attr("width","30px"); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
});// End of Ajax data load function |
|
|
|
|
|
function LineGen(DataRow) |
|
{ |
|
return line( dimensions.map(function(p){ return [ xscale(p.name), dimensionalscale[p.name](DataRow[p.name]) ] })) |
|
} |
|
|
|
|
|
|
|
}/* end of onload functifon*/ |
|
</script> |
|
</head> |
|
<body> |
|
</body> |
|
</html> |