I am implementing a bar graph in which the as per the moment of the slider the vertical values of rows would change. I'm getting issue in adding a particular range on the Y-axis domain and decreasing the thickness of both the Y and X Axis. for Y-axis I want the data to be added via the array "ydata" but only first two value gets reflected in this case. The value should be "0-9", "20-29", "40-49", "60-69", "80-89" and "100+" My code is feature on this link:
https://digitalxlabs.com/d3-charts/retirement-transition-graph.php
Username: DXLdemo Password: View@098#
Also, here is my code below:
<!DOCTYPE html>
<html lang="en"><head>
<style>
div#slider{
width: 500px;
margin-left: 20%;
height:5px;
margin-top: 4%;
}
svg {
margin-left:8%;
}
.x-class{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:20px;
color::blue;
}
.y-axis{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:20px;
color::grey;
}
.year-bar{ width:120%; float:left; margin-left:-15px; margin-top:20px}
.years{ width:auto; float:left; margin-right:68px; font-size:13px}
.age-bar{
z-index:1;
width:20%;
float:left;
left:20%;
margin-top:35px;
}
.age{
width:auto;
float:left;
margin-right:4px;
font-size:15px;
}
</style>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="jquery-2.1.4.min.js"></script>
<link data-require="jqueryui@1.10.0" data-semver="1.10.0" rel="stylesheet" href="jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@1.10.0" data-semver="1.10.0" src="jquery-ui.js"></script>
<script src="d3.v3.min.js"></script>
</head>
<body>
<div id="slider">
<div class="year-bar">
<span class="years">2000</span>
<span class="years">2010</span>
<span class="years">2020</span>
<span class="years">2030</span>
<span class="years">2040</span>
<span class="years">2050</span>
</div>
</div>
<!--/*<div class="age-bar">
<span class="age">100+</span><br/>
<span class="age">80-89</span><br/>
<span class="age">60-69</span><br/>
<span class="age">40-49</span><br/>
<span class="age">20-29</span><br/>
<span class="age">0-9</span><br/>*/-->
<script>
$(function() {
var extensionMethods = {
pips: function( settings ) {
options = {
first: "number", // "pip" , false
last: "number", // "pip" , false
rest: "pip" // "number" , false
};
$.extend( options, settings );
// get rid of all pips that might already exist.
this.element.addClass('ui-slider-pips').find( '.ui-slider-pip' ).remove();
// we need teh amount of pips to create.
var pips = this.options.max - this.options.min;
// for every stop in the slider, we create a pip.
for( i=0; i<=pips; i++ ) {
// hold a span element for the pip
var s = $('<span class="ui-slider-pip"><span class="ui-slider-line"></span><span class="ui-slider-number">'+i+'</span></span>');
// add a class so css can handle the display
// we'll hide numbers by default in CSS, and show them if set.
// we'll also use CSS to hide the pip altogether.
if( 0 == i ) {
s.addClass('ui-slider-pip-first');
if( "number" == options.first ) { s.addClass('ui-slider-pip-number'); }
if( false == options.first ) { s.addClass('ui-slider-pip-hide'); }
} else if ( pips == i ) {
s.addClass('ui-slider-pip-last');
if( "number" == options.last ) { s.addClass('ui-slider-pip-number'); }
if( false == options.last ) { s.addClass('ui-slider-pip-hide'); }
} else {
if( "number" == options.rest ) { s.addClass('ui-slider-pip-number'); }
if( false == options.rest ) { s.addClass('ui-slider-pip-hide'); }
}
// if it's a horizontal slider we'll set the left offset,
// and the top if it's vertical.
if( this.options.orientation == "horizontal" )
s.css({ left: '' + (100/pips)*i + '%' });
else
s.css({ top: '' + (100/pips)*i + '%' });
// append the span to the slider.
this.element.append( s );
}
}
};
$.extend(true, $['ui']['slider'].prototype, extensionMethods);
$("#slider").slider({
min: 0,
max: 500,
step: 100,
// on slide adjust width of all rects
slide: function(event, ui) {
svg.selectAll("rect")
.attr("width", function (d) {
if(ui.value >=0 && ui.value <= 15){
return (d.rate * d.mid1);
}
else if(ui.value >=15 && ui.value <= 30){
return (d.rate * d.mid2);
}
else if(ui.value >=30 && ui.value <= 45){
return (d.rate * d.mid3);
}
else if(ui.value >=45 && ui.value <= 60){
return (d.rate * d.mid4);
}
else if(ui.value >=60 && ui.value <= 75){
return (d.rate * d.mid5);
}
else if(ui.value >=75 && ui.value <= 90){
return (d.rate * d.mid6);
}
else if(ui.value >=90 && ui.value <= 110){
return (d.rate * d.mid7);
}
else if(ui.value >=110 && ui.value <= 130){
return (d.rate * d.mid8);
}
else if(ui.value >=130 && ui.value <= 150){
return (d.rate * d.mid9);
}
else if(ui.value >=150 && ui.value <= 165){
return (d.rate * d.mid10);
}
else if(ui.value >=165 && ui.value <= 190){
return (d.rate * d.mid11);
}
else if(ui.value >=190 && ui.value <= 205){
return (d.rate * d.mid12);
}
else if(ui.value >=205 && ui.value <= 220){
return (d.rate * d.mid13);
}
else if(ui.value >=220 && ui.value <= 240){
return (d.rate * d.mid14);
}
else if(ui.value >=240 && ui.value <= 260){
return (d.rate * d.mid15);
}
else if(ui.value >=260 && ui.value <= 280){
return (d.rate * d.mid16);
}
else if(ui.value >=280 && ui.value <= 300){
return (d.rate * d.mid17);
}
else if(ui.value >=300 && ui.value <= 315){
return (d.rate * d.mid18);
}
else if(ui.value >=315 && ui.value <= 330){
return (d.rate * d.mid19);
}
else if(ui.value >=330 && ui.value <= 350){
return (d.rate * d.mid20);
}
else if(ui.value >=350 && ui.value <= 375){
return (d.rate * d.mid21);
}
else if(ui.value >=375 && ui.value <= 390){
return (d.rate * d.mid22);
}
else if(ui.value >=390 && ui.value <= 405){
return (d.rate * d.mid23);
}
else if(ui.value >=405 && ui.value <= 420){
return (d.rate * d.mid24);
}
else if(ui.value >=420 && ui.value <= 435){
return (d.rate * d.mid25);
}
else if(ui.value >=435 && ui.value <= 450){
return (d.rate * d.mid26);
}
else if(ui.value >=450 && ui.value <= 465){
return (d.rate * d.mid27);
}
else if(ui.value >=465 && ui.value <= 480){
return (d.rate * d.mid28);
}
else if(ui.value >=480 && ui.value <= 495){
return (d.rate * d.mid29);
}
else if(ui.value >=495 && ui.value <= 510){
return (d.rate * d.mid30);
}
else if(ui.value >=510 && ui.value <= 525){
return (d.rate * d.mid31);
}
/*else{
return Math.min(ui.value*d.rate, d.max);}*/
})
}
});
// create svg
var svg = d3.select("body")
.append("svg")
.attr("width", 740)
.attr("height", 800);
/**/
// add 4 rects
var data = [
{ row:1, rate:0.3, mid1:0, mid2:0, mid3:0, mid4:0, mid5:0, mid6:0, mid7:0, mid8:0, mid9:0, mid10:0, mid11:0, mid12:0, mid13:0, mid14:0, mid15:0, mid16:0, mid17:0, mid18:0, mid19:0, mid20:0, mid21:0, mid22:0, mid23:0, mid24:0, mid25:0, mid26:0, mid27:10, mid28:10, mid29:20, mid30:25, mid31:25},
{ row:2, rate:0.4, mid1:80, mid2:80, mid3:85, mid4:90, mid5:95, mid6:100, mid7:105, mid8:110, mid9:115, mid10:120, mid11:125, mid12:125, mid13:125, mid14:130, mid15:130, mid16:135, mid17:135, mid18:140, mid19:140, mid20:145, mid21:145, mid22:150, mid23:150, mid24:155, mid25:150, mid26:155, mid27:155, mid28:155, mid29:160, mid30:160, mid31:160},
{ row:3, rate:0.5, mid1:130, mid2:140, mid3:150, mid4:170, mid5:190, mid6:200, mid7:210, mid8:210, mid9:215, mid10:215, mid11:215, mid12:220, mid13:220, mid14:225, mid15:225, mid16:230, mid17:235, mid18:235, mid19:230, mid20:230, mid21:235, mid22:230, mid23:235, mid24:240, mid25:230, mid26:235, mid27:230, mid28:235, mid29:230, mid30:235, mid31:240},
{ row:4, rate:0.6, mid1:240, mid2:240, mid3:250, mid4:250, mid5:250, mid6:250, mid7:260, mid8:275, mid9:280, mid10:290, mid11:290, mid12:285, mid13:280, mid14:285, mid15:280, mid16:270, mid17:270, mid18:265, mid19:265, mid20:270, mid21:270, mid22:265, mid23:260, mid24:260, mid25:260, mid26:260, mid27:250, mid28:255, mid29:250, mid30:250, mid31:250},
{ row:5, rate:0.7, mid1:540, mid2:540, mid3:540, mid4:510, mid5:480, mid6:480, mid7:460, mid8:460, mid9:450, mid10:440, mid11:430, mid12:420, mid13:400, mid14:390, mid15:390, mid16:385, mid17:370, mid18:360, mid19:340, mid20:340, mid21:330, mid22:330, mid23:320, mid24:310, mid25:310, mid26:300, mid27:300, mid28:295, mid29:290, mid30:290, mid31:285 },
{ row:6, rate:1.0, mid1:560, mid2:560, mid3:560, mid4:550, mid5:530, mid6:510, mid7:490, mid8:480, mid9:470, mid10:460, mid11:450, mid12:440, mid13:440, mid14:430, mid15:420, mid16:410, mid17:400, mid18:390, mid19:390, mid20:380, mid21:380, mid22:370, mid23:370, mid24:370, mid25:360, mid26:360, mid27:350, mid28:350, mid29:350, mid30:330, mid31:330 },
];
/*var inival = [data[0].min, data[1].min, data[2].min, data[3].min, data[4].min, data[5].min, data[6].min];*/
svg.selectAll("g")
.data(data)
.enter()
.append("rect")
.attr("x", 40)
.attr("y", function(d) {
return d.row * 30;
})
.attr("height", 25)
.attr("width", 10)
.style("fill","blue")
.style("margin-top",25)
.attr("transform", "translate(30,0)");
var ydata = [{"val":"0-9"}, {"val":"20-29"}, {"val":"40-49"}, {"val":"60-69"}, {"val":"80-89"}, {"val":"100+"}];
//add x and y axis
var x = d3.scale.linear()
.range([0, 720]);
/*var y = d3.scale.ordinal()
.range([180, 0]);*/
var y = d3.scale.ordinal()/*.domain(d3.range(ydata.length)).rangePoints([180, 0])*/ .range([180, 0]);
/*y.domain().tickvalues*/
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
.tickFormat(function(d) { return d + "%"; });
/* d3.csv("_/age-group.csv", function(data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
d.open = +d.open; // <=== Add this line in!
});*/
/*d3.csv("_/agegroups.csv", function(error, data) {
data.forEach(function(d) {
d.age = +d.age-groups;
});*/
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(6);
/*.tickValues(ydata.map(function(d){return d.val;}));*/
/*yAxis.tickValues([0-9,20-29,40-49,60-69,80-89,100]);*/
/*yAxis.tickValues(ydata.map(function(d) { return d.val; }));*/
x.domain([0,25]);
/*y.domain(ydata.map(function (d) {return d.val; })); */ /*y.domain(d3.extent(data, function(d) { return d.age;}));*/
/*y.domain([10,100]);*/
/*.tickFormat(function(d,i){return d.ydat[i]});*/
/* y.domain([]);*/
/*y.domain(yAxis);*/
/*y.domain();*/
svg.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(70,230)")
.attr("height",4)
.call(xAxis).append("text")
.attr("transform", "rotate(0)")
.attr("y", 50)
.attr("x",190)
.attr("dx", "-1.5em")
.style("text-anchor", "end")
.style("font-size","15")
.style("color","grey")
.text("Percentage of World Population");
svg.append("g")
.attr("class", "y-axis")
.attr("transform", "translate(70,30)")
.attr("width",4)
.call(yAxis).append("text")
.attr("transform", "rotate(-90)")
.attr("y", -50)
.attr("x",-32)
.attr("dx", "1.5em")
.style("text-anchor", "end")
.style("font-size","15")
.style("color","grey")
.text("Age Range");
});
</script>
</body>
</html>
