'D3 Update scaleBand axis and line
I'm new using D3JS and I've been trying to show on a graph coefficients (as dots) from regressions with their confidence interval (as a line), having the name of the coefficients on the y-axis.
I've implemented a dropdown menu to change the regression for which I want to display the coefficients. From one regression to another, the number of coefficient might not be the same therefore I also want to update the y-axis at the same time.
For the moment, my code displays the default chart well but when I switch to another regression, the lines (i.e., confidence intervals) are not displayed. Furthermore, when I then switch back to the default regression while 2 coefficients have their lines, the third one hasn't.
This is where I initiate the variables:
var allCountries = d3.map(data, function(d){return(d.country);}).keys();
// Give name of coefficients as y-line
var allCoef = d3.map(data, function(d){return(d.coefficient_name);}).keys();
var y = d3.scaleBand()
.range([ height, 0 ])
.padding(.4);
var yaxis = svg.append("g")
.attr("class", "y axis");
And this is the update function
function updateGraph(selectedGroup) {
// Filter the data
var filterData = data.filter(function(d){return d.country==selectedGroup;})
y.domain(filterData.map(function(d) { return d.coefficient_name; }));
// Create variables
var dots = svg.selectAll('circle')
.data(filterData);
var ci = svg.selectAll('line')
.data(filterData);
yaxis
.transition()
.duration(500)
.call(d3.axisLeft(y).tickSize(0)).select(".domain").remove();
// Update variables
dots
.enter()
.append('circle')
.merge(dots)
.transition()
.duration(1000)
.attr("cx", function(d) { return((d.coefficient_value)*50) ;}) // Update x position with coef value
.attr("cy", function(d) { return(y(d.coefficient_name) + y.bandwidth()/2 );})
.attr("r", 10 )
.style("fill", "#69b3a2");
ci
.enter()
.append('line')
.merge(ci)
.transition()
.duration(1000)
.attr("x1", function(d) { return(d.coefficient_value*50-1.95*d.coefficient_se*25);}) // Update x position with coef value
.attr("x2", function(d) { return(d.coefficient_value*50+1.95*d.coefficient_se*25);}) // Update x position with coef value
.attr("y1", function(d, i) { return(y(d.coefficient_name) + y.bandwidth()/2 );})
.attr("y2", function(d) { return(y(d.coefficient_name) + y.bandwidth()/2 );})
.attr("stroke", "black")
.style("width", 40);
// If less coefficients in the new dataset, we delete the ones we don't use anymore
dots
.exit()
.remove();
ci
.exit()
.remove();
}
Finally this is how my data look like
country,independent_var,coefficient_name,coefficient_value,coefficient_se
US,indep_var1,female,2,0.5
US,indep_var1,income,3,0.2
US,indep_var1,status,3,0.2
Australia,indep_var1,female,5,0.2
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
