D3 v4 - Group barChart

+ + +

+ + + +

+ + + + + + + + \ No newline at end of file From d50d7ad26f36ac00d024e9402299f20e47351329 Mon Sep 17 00:00:00 2001 From: nvtNgan Date: Sun, 21 Aug 2016 17:11:38 +0700 Subject: [PATCH 28/80] Add files via upload --- scripts/summary.js | 696 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 696 insertions(+) create mode 100644 scripts/summary.js diff --git a/scripts/summary.js b/scripts/summary.js new file mode 100644 index 0000000..46d470e --- /dev/null +++ b/scripts/summary.js @@ -0,0 +1,696 @@ +var margin = {top: 50, right: 50, bottom: 100, left: 50}; +var width = (window.innerWidth +|| document.documentElement.clientWidth +|| document.body.clientWidth) - margin.left; +var height = (window.innerHeight +|| document.documentElement.clientHeight +|| document.body.clientHeight) - margin.top; + +//--------------------------put list of smaple here--------------------------------- +var filelist =[{name: "vis",list:[30,51,100]},{name: "imdb",list:[79,102,125,171]}]; +//---------------------------------------------------------------------------------- + +var seriesNames = ["Betweenness edge", "Modularity Q"]; +var numSeries = seriesNames.length; +var numSamples = 3; +var data = []; +var changeChartMode="stacked", + containerWidth = width-margin.right, + containerHeight = height-margin.bottom, + paddingBetweenLegendSeries = 5, + legendSeriesBoxX = 0, + legendSeriesBoxY = 0, + legendSeriesBoxWidth = 15, + legendSeriesBoxHeight = 15, + legendSeriesHeight = legendSeriesBoxHeight + paddingBetweenLegendSeries, + legendSeriesLabelX = -5, + legendSeriesLabelY = legendSeriesBoxHeight / 2, + legendMargin = 20, + legendX = containerWidth - legendSeriesBoxWidth - legendMargin, + legendY = legendMargin + maxStackY = 0, + stackedBarWidth = 0; +var colorLegend = d3.scaleOrdinal(d3.schemeCategory10); +var svg =d3.select("#chart") + .attr("width",width) + .attr("height",height); + + +var mainArea = svg.append("g") + .attr("class", "main-area") + .attr("width",containerWidth) + .attr("height",containerHeight) + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + +var xScale = d3.scaleLinear() + .range([0, width-margin.right]); + +var yScale = d3.scaleLinear() + .range([height-margin.bottom, 0]); +var barScale = d3.scaleLinear() + .range([0,height-margin.bottom]); + +var xAxis = mainArea.append("g") + .attr("class", "axis axis--x") + .attr("transform", "translate(" + [0,height-margin.bottom] + ")"); + +var yAxis = mainArea.append("g") + .attr("class", "axis axis--x"); + + +var legendSeries = svg.append("g") + .attr("class", "legend") + .attr("transform", "translate(" + legendX + "," + legendY + ")") + .selectAll("g").data(seriesNames.reverse()) + .enter().append("g") + .attr("class", function(d){return d}) + .attr("transform", function (d, i) { return "translate(0," + (i * legendSeriesHeight) + ")"; }); + +legendSeries.append("rect") + .attr("class", "series-box") + .attr("x", legendSeriesBoxX) + .attr("y", legendSeriesBoxY) + .attr("width", legendSeriesBoxWidth) + .attr("height", legendSeriesBoxHeight) + .attr("fill",function(d){return colorLegend(d);}); + +legendSeries.append("text") + .attr("class", "series-label") + .attr("x", legendSeriesLabelX) + .attr("y", legendSeriesLabelY) + .text(String); + +var layersArea = mainArea.append("g") + .attr("class", "layers") + .attr("width",width-margin.right) + .attr("height",height-margin.bottom); + +var layers; + +d3.selectAll(".js-stacked-chart-container input").on("change", changeChartMode); + +d3.queue().defer(updateData,"vis").awaitAll(function(error, results) { + if (error) throw error; + console.log(results); + }); +/*var xAxis = d3.svg.axis() + .scale(xScale) //binsScale) + .ticks(numSamples) + .orient("bottom"); + +var yAxis = d3.svg.axis() + .scale(yScale) + .orient("left");*/ + +function updateData(value) { + data = []; + layersArea.selectAll("g").remove().transition(); + var list_o = filelist.filter(function(n,i){ + if (n.name==value){ + return n; + } + }) + var list=[]; + list_o[0].list.forEach(function(e){ + list.push(value+e+".json"); + }); + var min_v=d3.min(list_o[0].list); + var max_v=d3.max(list_o[0].list); + var min_d=max_v-min_v; + for (var tm=1;tm data_temp.values[1].value[1] ? maxStackY : data_temp.values[1].value[1]); + yScale.domain([0, maxStackY]); + barScale.domain([0, maxStackY]); + var t = d3.transition() + .duration(750); + var old_layer = layersArea.selectAll(".layer").data(data).enter(); + old_layer.selectAll("rect").attr("y", function(d){return (yScale(d.value[1]));}) + .attr("height", function(d){return (barScale(d.value[1]-d.value[0]));}) + .transition(t); + data.push(data_temp); + + //new_layers.remove(); + // JOIN new data with old elements. + var new_layers = layersArea.selectAll(".layer").data([data_temp],function(d){return d;}); + + + // UPDATE old elements not present in new data. + /* new_layers.exit() + .attr("y", function(d){console.log("d[1]: "+d[1]+ "f: "+ yScale(d[1]));return (yScale(d[1]));}) + .attr("height", function(d){return (barScale(d[1]-d[0]));}) + .transition(t);*/ + // ENTER new elements present in new data. + var newer = new_layers.enter().append("g") + .attr("class", function(d){return d.id;}); + + + var layerss = newer + .selectAll("rect") + .data(function (d) { return d.values; }) + .enter().append("rect"); + + layerss + .attr("class",function(d){return d.key; }) + .attr("x", function(d){return (xScale(e)-stackedBarWidth/2);}) + .attr("y", function(d){return (yScale(d.value[1]));}) + .attr("width", stackedBarWidth) + .attr("height", function(d){return (barScale(d.value[1]-d.value[0]));}) + .attr("fill",function(d){return colorLegend(d.key);}); + //layerss.exit().remove(); + layerss.merge(new_layers); + yAxis.call(d3.axisLeft(yScale)); + + }); +} + +function bar_graph(){ + layersArea = mainArea.append("g") + .attr("class", "layers"); + layers = layersArea.selectAll(".layer") + .data(data) + .enter().append("g") + .attr("class", function (d) { return "layer " + seriesClass(d.name); }); + + layers.selectAll("rect").data(function (d) { return d.values; }) + .enter().append("rect") + .attr("x", stackedBarX) + .attr("y", height) + .attr("width", stackedBarWidth) + .attr("height", 0) + .call(transitionStackedBars) + ; + +} + +function findnei(a,key,av){ + var nei=[]; + if (key[1])//virtual node + { + if (a[a[2]][a[0]]>0){//virtual node next + a[a[2]][a[0]] -=av; + a[a[0]][a[2]] -=av; + nei.push(key); + }else{ + nei.push([a[0],false,a[2]]); + } + }else{ + for (var i=0;i0){ + if (a[key[0]][i]>av) + nei.push([i,true,key[0]]);// virtual node + else + nei.push([i,false,key[0]]); + a[key[0]][i]-=av; + a[i][key[0]]-=av; + } + } + } + return nei; +} + +function init(m,n){ + var ar= []; + for (var i = 0; i < m; i++) { + var art=[]; + for (var j = 0; j < n; j++) { + art.push(0); + } + ar.push(art); + } + return ar; + } + +function init_empty(m){ + var ar= []; + for (var i = 0; i < m; i++) { + var art=[]; + ar.push(art); + } + return ar; + } + +function a_array(ee){ + var a = init(ee.nodes.length,ee.nodes.length); + ee.links.forEach(function(e){ + var ii=0; + var jj=0; + ee.nodes.filter(function(n,i){ + if (e.source==n.id) + ii=i; + else + if (e.target==n.id) + jj=i; + }); + a[ii][jj]=e.value; + a[jj][ii]=e.value; + }); + return a; +} + +function a_array_av(ee){ + var a = init_empty(ee.nodes.length); + var sum = 0; + var m = ee.links.length; + ee.links.forEach(function(e){ + var ii=0; + var jj=0; + ee.nodes.filter(function(n,i){ + if (e.source==n.id) + ii=i; + else + if (e.target==n.id) + jj=i; + }); + sum = sum + (e.value); + a[ii].push({nei: jj,val: e.value}); + a[jj].push({nei: ii,val: e.value}); + + }); + return [a,sum/m]; +} + + + +function calculate_m(ee){ + var sum = 0; + var m = ee.links.length; + ee.links.forEach(function(e){ + var ii=0; + var jj=0; + ee.nodes.filter(function(n,i){ + if (e.source==n.id) + ii=i; + else + if (e.target==n.id) + jj=i; + }); + sum = sum+e.value; + + }); + return [sum]; +} + +function a_array_ext(arr,av){ + var l = arr.length; + for (var iii=0;iii1) + { + arr[iii][jjj].nei = arr.length; + arr[iii][jjj].val = av; + arr.push([{nei: iii, val: av},{nei: nei,val: av}]); + for (var z = 2; z av: "+av); + while (step.length!=graph.links.length){ + var alink_oc = copyA(alink_o); + //document.write("
old array size: "+alink_o[3][0].nei); + var alink_fix = a_array_ext(alink_oc,av); // add virtual nodes + //document.write("
old array size: "+alink_o[3][0].nei); + var alink = alink_fix[0]; //fixed + // calculate + var ebs=init(num_n,num_n); + var max_ebs=[0,0,0]; + for (var s = 0; s < num_n; s++) { + var S=[]; + var Leaf=[]; + var Pathu=[]; + var Pathd=[]; + var d=[]; + var w=[]; + d[s]=0; + w[s]=1; + var Q=[]; + Q.push(s); + while (Q.length!=0){ + var i = Q.shift(); + S.push(i); + var l=Q.length; + //document.write("
"+i+": "); + alink[i].forEach(function(e){ + var j = e.nei; + if (d[j]==null){ + d[j]=d[i]+1; + w[j]=w[i]; + Q.push(j); + + if (i"+" - "+e.nei+": "+"d :"+d[e.nei]+"w :"+w[e.nei]); + }); + if (Q.length ==l&&(i!=s)&&(i"+" - "+i+" - w:"+w[i]); + + document.write("
"+" --- u"); + if(Pathu[i]!=null) + Pathu[i].forEach(function(e){document.write("- "+e);}); + document.write("
"+" --- d"); + if(Pathd[i]!=null) + Pathd[i].forEach(function(e){document.write("- "+e);}); + };*/ + var eb=init(num_n,num_n); + //Leaf + while(Leaf.length!=0){ + var t=Leaf.pop(); + //document.write("
"+" -Leaf "+t); + while (Pathu[t].length!=0){ + var i = Pathu[t].pop(); + eb[i][t] = w[i]/w[t]; + //eb[t][i] = w[i]/w[t]; + ebs[i][t] += w[i]/w[t]; + //ebs[t][i] += w[i]/w[t]; + if (ebs[i][t]>max_ebs[0]){ + max_ebs[0]=ebs[i][t]; + max_ebs[1]=i; + max_ebs[2]=t; + } + } + } + //document.write("
"+" ----- "); + //document.write("
"+S); + //cont + while (S.length!=0){ + var j = S.pop(); + if (j -- "+j); + var sumb=1; + while (Pathd[j].length!=0){ + var jj = Pathd[j].pop(); + sumb+=eb[j][jj]; + } + if (Pathu[j]!=null) + { + while (Pathu[j].length!=0){ + var i = Pathu[j].pop(); + eb[i][j]=w[i]/w[j]*sumb; + //eb[j][i]=w[i]/w[j]*sumb; + ebs[i][j]+=w[i]/w[j]*sumb; + //ebs[j][i]+=w[i]/w[j]*sumb; + if (ebs[i][j]>max_ebs[0]){ + max_ebs[0]=ebs[i][j]; + max_ebs[1]=i; + max_ebs[2]=j; + //document.write("
"+"max "+ max_ebs); + } + } + } + } + } + } + } + if (max_ebs[0]!=0){ + step.push([max_ebs[1],max_ebs[2]]); + av = av*num_l; + //document.write("
"+"max "+ max_ebs[0]); + for (var i =0;i"+"-- "+ alink_o[max_ebs[1]][i].nei); + if (alink_o[max_ebs[1]][i].nei== max_ebs[2]){ + av = av - alink_o[max_ebs[1]][i].val; + num_l--; + av = av/num_l; + alink_o[max_ebs[1]].splice(i,1); + break; + } + } + + for (var i =0;i"+"--- "+ alink_o[max_ebs[2]][i].nei); + if (alink_o[max_ebs[2]][i].nei== max_ebs[1]){ + alink_o[max_ebs[2]].splice(i,1); + break; + } + } + } + //document.write("----step: "+ step+" av"+av+"
"); + } + return step; +} + +function Q_init(A,m,a_e){ + var n = A.length; + var Q = 0; + for (var i = 0;i new group + //Q + Q_t += delta_Q(grouping[g1][0],grouping[g2][0],m,A,a_e); + Q.push(Q_t); + //move + grouping.splice(g1,1,grouping[g1].concat(grouping[g2])); + grouping.splice(g2,1); + var hi_t=[]; + hi_t.push(hi[g1]); + hi_t.push(hi[g2]); + hi[g1]={name: li,children: hi_t,depth: lv, Q: Q_t}; + hi.splice(g2,1); + //document.write("case 1 "+g1+" "+g2+" "+JSON.stringify(hi)+"
"); + }else{ + // 1 element + 1 group -> new group + var li_t= li; + if (g2==-1){// li[1] is new element + li_t[0]=li_t[1]; + }else{ + g1=g2; + } + //Q + Q_t += delta_Q(grouping[g1][0],li[0],m,A,a_e); + Q.push(Q_t); + //move + grouping[g1].push(li[0]); + hi[g1]={name: li,children: [hi[g1]], depth: lv, Q:Q_t}; + hi[g1].children.push({name: graph.nodes[li_t[0]].name!=null?graph.nodes[li_t[0]].name:graph.nodes[li_t[0]].id , depth: 0}); + //document.write("case 2 "+JSON.stringify(hi)+"
"); + } + }else{ + if (g1==-1) + { + lv++; + //Q + Q_t += delta_Q(li[0],li[1],m,A,a_e); + Q.push(Q_t); + //move + grouping.push(li); + hi.push({name: li,children: [{name: graph.nodes[li[0]].name!=null?graph.nodes[li[0]].name:graph.nodes[li[0]].id, depth: 0},{name: graph.nodes[li[1]].name!=null?graph.nodes[li[1]].name:graph.nodes[li[1]].id, depth: 0}], depth: lv, Q: Q_t}); + //document.write("case 3 "+JSON.stringify(hi)+"
"); + } + } + } + if (hi.length==1){ + return [hi[0],Q]; + } + else{ + hi[0]={name: "join all",children: [hi[0]],depth: lv+1, Q: Q_t}; + while (grouping.length != 1){ + Q_t += delta_Q(grouping[0][0],grouping[1][0],m,A,a_e); + grouping.splice(0,1,grouping[0].concat(grouping[1])); + grouping.splice(1,1); + hi[0].children.push(hi[1]); + hi.splice(1,1); + } + + Q.push(Q_t); + return [hi[0],Q]; + } +} + From c5f2f24138df7878916b4a2c5e38443c7627fe8d Mon Sep 17 00:00:00 2001 From: nvtNgan Date: Mon, 22 Aug 2016 17:03:41 +0700 Subject: [PATCH 29/80] update feature - update graph - update save file - update animation and none animation --- scripts/summary.js | 173 ++++++++++++++++++++++++++++++++++----------- 1 file changed, 130 insertions(+), 43 deletions(-) diff --git a/scripts/summary.js b/scripts/summary.js index 46d470e..8d0dca2 100644 --- a/scripts/summary.js +++ b/scripts/summary.js @@ -1,4 +1,4 @@ -var margin = {top: 50, right: 50, bottom: 100, left: 50}; +var margin = {top: 50, right: 50, bottom: 100, left: 100}; var width = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) - margin.left; @@ -14,27 +14,49 @@ var seriesNames = ["Betweenness edge", "Modularity Q"]; var numSeries = seriesNames.length; var numSamples = 3; var data = []; -var changeChartMode="stacked", +var chartMode="stacked", + name_file = filelist[0].name, + mtitle = {top: 10, right: margin.right, bottom: 10, left: margin.left}, + stitle = {width: (width-margin.right), height: (30+mtitle.top+mtitle.bottom)}, containerWidth = width-margin.right, - containerHeight = height-margin.bottom, + containerHeight = height-margin.bottom-stitle.height, + //-----Legend ----------------- paddingBetweenLegendSeries = 5, legendSeriesBoxX = 0, legendSeriesBoxY = 0, legendSeriesBoxWidth = 15, legendSeriesBoxHeight = 15, legendSeriesHeight = legendSeriesBoxHeight + paddingBetweenLegendSeries, - legendSeriesLabelX = -5, - legendSeriesLabelY = legendSeriesBoxHeight / 2, - legendMargin = 20, - legendX = containerWidth - legendSeriesBoxWidth - legendMargin, - legendY = legendMargin + legendSeriesLabelX = legendSeriesBoxWidth+5, + legendSeriesLabelY = legendSeriesHeight / 2, + legendMargin = {x:30,y:10}, + //legendX = containerWidth - legendSeriesBoxWidth - legendMargin, + //legendY = legendMargin, + legendX = legendMargin.x+margin.left, + legendY = legendMargin.y+margin.top, + legendSeriesMax = legendSeriesHeight*seriesNames.length, + legendScale_per = legendSeriesMax/containerHeight, maxStackY = 0, - stackedBarWidth = 0; + stackedBarWidth = 0, + animation_time = 4000, + animation_time_per = 20; var colorLegend = d3.scaleOrdinal(d3.schemeCategory10); + var svg =d3.select("#chart") .attr("width",width) .attr("height",height); +var titleArea = svg.append("g") + .attr("class", "title") + .attr("width",stitle.width) + .attr("height",stitle.height) + .attr("transform", "translate(" + mtitle.left + "," + mtitle.top + ")"); + +var title_text = titleArea + .append("text") + .attr("x",stitle.width/2) + .attr("y",stitle.height/2) + .text("Computing time for betweenness edge and Modularity - VIS"); var mainArea = svg.append("g") .attr("class", "main-area") @@ -57,6 +79,15 @@ var xAxis = mainArea.append("g") var yAxis = mainArea.append("g") .attr("class", "axis axis--x"); +svg.append("text") + .attr("class","graph-title") + .attr("transform", "translate("+ [margin.left/2, margin.top+containerHeight/2] +")rotate(-90)") // text is drawn off the screen top left, move down and out and rotate + .text("Computing Time - ms"); + +svg.append("text") + .attr("class","graph-title") + .attr("transform", "translate("+ [margin.left+containerWidth/2, margin.top+height-margin.bottom/2-10] +")") // text is drawn off the screen top left, move down and out and rotate + .text("Computing Time - ms"); var legendSeries = svg.append("g") .attr("class", "legend") @@ -87,7 +118,8 @@ var layersArea = mainArea.append("g") var layers; -d3.selectAll(".js-stacked-chart-container input").on("change", changeChartMode); +d3.selectAll(".joint-toggle input").on("change", changeChartMode); +d3.select("#save_button").attr("onclick", "save_file()"); d3.queue().defer(updateData,"vis").awaitAll(function(error, results) { if (error) throw error; @@ -103,8 +135,8 @@ var yAxis = d3.svg.axis() .orient("left");*/ function updateData(value) { - data = []; - layersArea.selectAll("g").remove().transition(); + name_file=value; + title_text.text("Computing time for betweenness edge and Modularity - "+value.toUpperCase()) var list_o = filelist.filter(function(n,i){ if (n.name==value){ return n; @@ -116,7 +148,7 @@ function updateData(value) { }); var min_v=d3.min(list_o[0].list); var max_v=d3.max(list_o[0].list); - var min_d=max_v-min_v; + var min_d=list_o[0].list[0]; for (var tm=1;tm data_temp.values[1].value[1] ? maxStackY : data_temp.values[1].value[1]); - yScale.domain([0, maxStackY]); - barScale.domain([0, maxStackY]); - var t = d3.transition() - .duration(750); + + yScale.domain([0, maxStackY*(1+legendScale_per)]); + barScale.domain([0, maxStackY*(1+legendScale_per)]); + var old_layer = layersArea.selectAll(".layer").data(data).enter(); - old_layer.selectAll("rect").attr("y", function(d){return (yScale(d.value[1]));}) - .attr("height", function(d){return (barScale(d.value[1]-d.value[0]));}) - .transition(t); + old_layer.selectAll("rect").call(transition_animation); data.push(data_temp); //new_layers.remove(); @@ -194,34 +249,66 @@ function read_json(value,e,count){ layerss .attr("class",function(d){return d.key; }) .attr("x", function(d){return (xScale(e)-stackedBarWidth/2);}) - .attr("y", function(d){return (yScale(d.value[1]));}) + .attr("y", height-margin.bottom) .attr("width", stackedBarWidth) - .attr("height", function(d){return (barScale(d.value[1]-d.value[0]));}) - .attr("fill",function(d){return colorLegend(d.key);}); + .attr("height", 0) + .attr("fill",function(d){return colorLegend(d.key);}) + .call(transition_animation); //layerss.exit().remove(); layerss.merge(new_layers); - yAxis.call(d3.axisLeft(yScale)); + yAxis.call(transition_axis); }); } -function bar_graph(){ - layersArea = mainArea.append("g") - .attr("class", "layers"); - layers = layersArea.selectAll(".layer") - .data(data) - .enter().append("g") - .attr("class", function (d) { return "layer " + seriesClass(d.name); }); - - layers.selectAll("rect").data(function (d) { return d.values; }) - .enter().append("rect") - .attr("x", stackedBarX) - .attr("y", height) - .attr("width", stackedBarWidth) - .attr("height", 0) - .call(transitionStackedBars) - ; +function transition_animation (selection){ + selection.transition() + .duration(animation_time) + .delay(function (d,i) { return i * animation_time_per; }) + .attr("y", function(d){return (yScale(d.value[1]));}) + .attr("height", function(d){return (barScale(d.value[1]-d.value[0]));}); +} + +function transition_axis (selection){ + selection.transition() + .duration(animation_time) + .delay(function (d,i) { return i * animation_time_per; }) + .call(d3.axisLeft(yScale)); +} + +function changeChartMode() { + console.log(this.name); + if (this.name==="animate"){ + if (this.value==="yes") + { + animation_time=4000; + animation_time_per=20; + }else{ + animation_time=0; + animation_time_per=0; + } + }else{ + chartMode = this.value; + if (chartMode === "stacked") { + //stackBars(); + } + else { + //groupBars(); + } + } +} + +function save_file() { + console.log(data); + try { + var isFileSaverSupported = !!new Blob; + var json_S = JSON.stringify(data); + var file = new Blob([json_S],{type: "application/json"}); + saveAs(file,name_file+"_time.json"); + } catch (e) { + console.log("file save error: "+e); + } } function findnei(a,key,av){ From adcfe2c85d7aad0470a4e72658c0911fd4ef495a Mon Sep 17 00:00:00 2001 From: nvtNgan Date: Mon, 22 Aug 2016 17:03:57 +0700 Subject: [PATCH 30/80] Update summary.html --- summary.html | 152 ++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 137 insertions(+), 15 deletions(-) diff --git a/summary.html b/summary.html index 0b50cc5..4f262af 100644 --- a/summary.html +++ b/summary.html @@ -35,6 +35,25 @@ .stacked-chart .clickable { cursor: pointer; } +.stacked-chart .title{ + position: :absolute; +} +.stacked-chart .title text{ + font: 20px sans-serif; + font-weight: bold; + fill: firebrick ; + text-anchor: middle; + alignment-baseline: central; + +} + +.stacked-chart .graph-title{ + font: 15px sans-serif; + font-weight: bold; + text-anchor: middle; + fill: steelblue; + alignment-baseline: middle; +} .stacked-chart-container .tooltip { position: absolute; @@ -148,26 +167,128 @@ .stacked-chart .series-label { fill: black; - text-anchor: end; + text-anchor: start; alignment-baseline: central; } - +label { + padding:0.4em 2em 0.4em 0; +} - +.button_s1 { + text-align:centre; + float: right; + color:#000; + background-color:#FFF; + border-radius:10px; + display:inline-block; + border:solid 1px #CCC; + cursor:pointer; + margin:0px 0; + padding:0.2em 1em; + border-right-color:white; + border-right:solid 1px #CCC; + font-size:0.8em; +} +.button_s1:hover { + border:solid 1px #a0d5dc !important; + background:#f1fdfe; +} + +.toggle-btn-grp { + margin:0px 0; +} + +.toggle-btn { + text-align:centre; + margin:5px 2px; + padding:0.4em 3em; + color:#000; + background-color:#FFF; + border-radius:10px; + display:inline-block; + border:solid 1px #CCC; + cursor:pointer; +} + +.toggle-btn-grp.joint-toggle .toggle-btn { + margin:0px 0; + padding:0.4em 2em; + border-radius:0; + border-right-color:white; +} +.toggle-btn-grp.joint-toggle .toggle-btn:first-child { + margin-left:2px; + border-radius: 10px 0px 0px 10px; + border-right:solid 1px #CCC; +} +.toggle-btn-grp.joint-toggle .toggle-btn:last-child { + margin-right:2px; + border-radius: 0px 10px 10px 0px; + border-right:solid 1px #CCC; +} +.toggle-btn:hover { + border:solid 1px #a0d5dc !important; + background:#f1fdfe; +} + +.toggle-btn.success { + background:lightgreen; + border:solid 1px green !important; +} + + +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; +} + + + -

- - +

+ +

+ Animation + StayStill +

+ Stacked + Grouped +

+ + + +