Skip to content

Instantly share code, notes, and snippets.

@pragyandas

pragyandas/index.html

Last active August 29, 2015 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pragyandas/6af4113bdb9127260ce1 to your computer and use it in GitHub Desktop.
Save pragyandas/6af4113bdb9127260ce1 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Legend Paging
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Legend Paging</title>
<style>
body {
font: 10px sans-serif;
}
.axis {
shape-rendering: crispEdges;
}
.x.axis line {
stroke: lightgrey;
}
.y.axis line{
stroke:lightgrey;
}
.y.axis path {
fill: #666;
stroke: #000;
}
.axis path {
fill: #666;
stroke: #000;
}
</style>
</head>
<body>
<div id="chart" style="height:300px;width:600px;">
</div>
<script src="http://d3js.org/d3.v3.min.js">
</script>
<script type="text/javascript">
var data = {
series: [{
name: "< 5 Years",
data: [2704659, 2027307, 1208495, 894368, 3157759]
},
{
name: "5-13 Years",
data: [4704659, 6027307, 808495, 1094368, 2157759]
},
{
name: "14-20 Years",
data: [1104659, 8027307, 1008495, 394368, 1157759]
},
{
name: "21-40 Years",
data: [1404659, 2027307, 4208495, 6027307, 5157759]
},
{
name: "21-25 Years",
data: [1404659, 2027307, 4208495, 6027307, 5157759]
},
{
name: "26-30 Years",
data: [1404659, 2027307, 4208495, 6027307, 5157759]
},
{
name: "31-35 Years",
data: [1404659, 2027307, 4208495, 6027307, 5157759]
},
{
name: "36-40 Years",
data: [1404659, 2027307, 4208495, 6027307, 5157759]
},
{
name: "41-45 Years",
data: [3405659, 4027307, 5208495, 6027307, 7157759]
},
{
name: "46-50 Years",
data: [7404659, 6027307, 5208495, 4027307, 3157759]
},
{
name: "51-55 Years",
data: [3404659, 5027307, 7208495, 9027307, 1157759]
}
,
{
name: "56-60 Years",
data: [1404659, 2027307, 3208495, 4027307, 5157759]
},
{
name: "61-65 Years",
data: [5404659, 4427307, 3208495, 2027307, 1157759]
},
{
name: ">65 Years",
data: [1404659, 9027307, 4208495, 10027307, 5157759]
}],
categories: [
{
name: 'CA',
longName: 'California',
},
{
name: "TX",
longName: 'Texas',
},
{
name: 'NY',
longName: 'New York',
},
{
name: "FL",
longName: 'Florida',
},
{
name: "NJ",
longName: 'New Jersey',
}]
}
var color=d3.scale.category20();
var colors=[];
for(var i=0;i<20;i++){
colors.push(color(i));
}
var returnArray = [];
var canvasWidth = document.getElementById('chart').offsetWidth,
canvasHeight = document.getElementById('chart').offsetHeight;
var margin = { top: 80, right: 100, bottom: 60, left: 50 },
width = canvasWidth - margin.left - margin.right,
height = canvasHeight - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], 0.1, 0.2);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = colors;
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom")
.tickSize(-height, 0, 0);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"))
.tickSize(-width, 0, 0);
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x0.domain(data.categories.map(function (d) { return d.name; }));
x1.domain(data.series.map(function (d) { return d.name })).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data.series,function(d){ return d3.max(d.data,function(e){return e;});})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var state = svg.selectAll(".state")
.data(data.categories)
.enter().append("g")
.attr("class", "state")
.attr("transform", function (d) { return "translate(" + x0(d.name) + ",0)"; });
var bars = state.selectAll("rect")
.data(function (d, i) {
var rArray = [];
for (var x = 0; x < data.series.length; x++) {
rArray.push({ name: data.series[x].name, data: data.series[x].data, index: i, seriesLongName: data.series[x].longName });
}
return rArray;
})
.enter().append("rect")
.attr('class', 'bar')
.attr("width", x1.rangeBand())
.attr("x", function (d) { return x1(d.name); })
.attr("y", height)
.attr("height", 0)
.style("fill", function (d, i) { return colors[i]; })
;
bars.transition()
.attr('y', function (d) { return y(d.data[d.index]); })
.attr('height', function (d) { return height - y(d.data[d.index]); })
.delay(function (d, i) {
return i * 50;
}).ease('elastic');
/******************************************************************************************************/
/***********************************************LEGEND*************************************************/
/******************************************************************************************************/
var legendCount = data.series.length;
var legendWidth=10; var legendSpacing=6;
var netLegendHeight=(legendWidth+legendSpacing)*legendCount;
var legendPerPage,totalPages,pageNo;
if(netLegendHeight/height > 1){
legendPerPage=Math.floor(height/(legendWidth+legendSpacing));
totalPages=Math.ceil(legendCount/legendPerPage);
pageNo=1;
var startIndex=(pageNo-1)*legendPerPage;
var endIndex=startIndex+legendPerPage;
var seriesSubset=[],colorSubset=[];
for(var i=0;i<data.series.length;i++){
if(i>=startIndex && i<endIndex){
seriesSubset.push(data.series[i]);
colorSubset.push(colors[i]);
}
}
DrawLegendSubset(seriesSubset,colorSubset,legendPerPage,pageNo,totalPages);
}
function DrawLegendSubset(seriesSubset,colorSubset,legendPerPage,pageNo,totalPages){
var legend = svg.selectAll("g.legendg")
.data(seriesSubset)
.enter().append("g")
.attr('class','legendg')
.attr("transform", function (d, i) { return "translate(" + (width-40) + ","+ i*(legendWidth+legendSpacing) +")"; });
legend.append("rect")
.attr("x", 45)
.attr("width", legendWidth)
.attr("height", legendWidth)
.attr("class", "legend")
.style('fill',function(d,i){return colorSubset[i];});
legend.append("text")
.attr("x", 60)
.attr("y", 6)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function (d) { return d.name; });
var pageText = svg.append("g")
.attr('class','pageNo')
.attr("transform", "translate(" + (width+7.5) + ","+ (legendPerPage+1)*(legendWidth+legendSpacing) +")");
pageText.append('text').text(pageNo+'/'+totalPages)
.attr('dx','.25em');
var prevtriangle = svg.append("g")
.attr('class','prev')
.attr("transform", "translate(" + (width+5) + ","+ (legendPerPage+1.5)*(legendWidth+legendSpacing) +")")
.on('click',prevLegend)
.style('cursor','pointer');
var nexttriangle = svg.append("g")
.attr('class','next')
.attr("transform", "translate(" + (width+20) + ","+ (legendPerPage+1.5)*(legendWidth+legendSpacing) +")")
.on('click',nextLegend)
.style('cursor','pointer');
nexttriangle.append('polygon')
.style('stroke','#000')
.style('fill','#000')
.attr('points','0,0, 10,0, 5,5');
prevtriangle.append('polygon')
.style('stroke','#000')
.style('fill','#000')
.attr('points','0,5, 10,5, 5,0');
if(pageNo==totalPages){
nexttriangle.style('opacity','0.5')
nexttriangle.on('click','')
.style('cursor','');
}
else if(pageNo==1){
prevtriangle.style('opacity','0.5')
prevtriangle.on('click','')
.style('cursor','');
}
}
function prevLegend(){
pageNo--;
svg.selectAll("g.legendg").remove();
svg.select('.pageNo').remove();
svg.select('.prev').remove();
svg.select('.next').remove();
var startIndex=(pageNo-1)*legendPerPage;
var endIndex=startIndex+legendPerPage;
var seriesSubset=[],colorSubset=[];
for(var i=0;i<data.series.length;i++){
if(i>=startIndex && i<endIndex){
seriesSubset.push(data.series[i]);
colorSubset.push(colors[i]);
}
}
DrawLegendSubset(seriesSubset,colorSubset,legendPerPage,pageNo,totalPages);
}
function nextLegend(){
pageNo++;
svg.selectAll("g.legendg").remove();
svg.select('.pageNo').remove();
svg.select('.prev').remove();
svg.select('.next').remove();
var startIndex=(pageNo-1)*legendPerPage;
var endIndex=startIndex+legendPerPage;
var seriesSubset=[],colorSubset=[];
for(var i=0;i<data.series.length;i++){
if(i>=startIndex && i<endIndex){
seriesSubset.push(data.series[i]);
colorSubset.push(colors[i]);
}
}
DrawLegendSubset(seriesSubset,colorSubset,legendPerPage,pageNo,totalPages);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment