I am trying learn to transition between multiple charts using buttons. Here, i want to transition between bar and scatter chart (and may be add a line chart button as well). I have been able to show respective charts by the click of the button. But, i am not able to figure out how to exit one chart when the button for the other chart is clicked and vice-versa. Following is screenshot of the interactive figure that i have created. Here, we can see that both charts show together.
Following is the data (data.csv) i am using to create the interactive chart:
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Scatter to Bar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="container" class="container">
<h1>Transition from one chart to other</h1>
<div id="main" role="main">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" id="bar" class="btn btn-default">Bar</button>
<button type="button" id="scatter" class="btn btn-default">Scatter</button>
</div>
<div id="vis"></div>
</div>
</div>
<script src="d3.v6.js"></script>
<script src="transition.js"></script>
</body>
</html>
And the D3.js code:
//load data----
async function createApp(){
const dataset= await d3.csv('data.csv')
//create dimensions---
let dimensions={
width: 800,
height:600,
margins: {
left: 50,
right: 20,
top:20,
bottom: 50,
},
};
//bound dimensions
dimensions.boundedwidth=dimensions.width-
dimensions.margins.left-
dimensions.margins.right;
dimensions.boundedheight=dimensions.height-
dimensions.margins.top-
dimensions.margins.bottom;
//Draw canvas----
wrapper=d3.select("#vis")
.append("svg")
.attr("width", dimensions.width)
.attr("height", dimensions.height);
bounds=wrapper.append("g")
.style("transform", `translate(${
dimensions.margins.left
}px, ${
dimensions.margins.top
}px)`);
//create scales------
const xScatterscale= d3.scaleLinear()
.range([0, dimensions.boundedwidth])
.nice()
const yScatterscale= d3.scaleLinear()
.range([dimensions.boundedheight, 0])
.nice()
const xBarscale= d3.scaleBand()
.range([0, dimensions.boundedwidth])
.padding(0.2)
const yBarscale=d3.scaleLinear()
.range([dimensions.boundedheight, 0])
.nice()
//Draw perpherals--axes-------
//create axis generators
const xAxisgeneratorscatter= d3.axisBottom()
.scale(xScatterscale)
.ticks(8)
const yAxisgeneratorscatter= d3.axisLeft()
.scale(yScatterscale)
.ticks(9)
const xAxisgeneratorbar=d3.axisBottom()
.scale(xBarscale)
const yAxisgeneratorbar=d3.axisLeft()
.scale(yBarscale)
const xAxis= bounds.append("g")
.attr("class", "x-axis")
.style("transform", `translateY(${
dimensions.boundedheight
}px)`)
const yAxis=bounds.append("g")
.attr("class", "y-axis")
//binding data to empty request-----
const requests= bounds.append("g")
.attr("class", "request")
const chartgroups= requests.selectAll(".request")
.data(dataset)
.enter().append("g")
let duration = 750
const updateTransition = d3.transition().duration(duration)
scatterplot()
//create functions to draw data scatter plot----
function scatterplot(){
const xAccessorscatter= d=> +d.risk
const yAccessorscatter= d=> +d.return
xScatterscale.domain([0, d3.max(dataset, xAccessorscatter)+0.05])
yScatterscale.domain([0, d3.max(dataset, yAccessorscatter)+0.02])
xAxis.call(xAxisgeneratorscatter)
yAxis.call(yAxisgeneratorscatter)
const newscattergroup= chartgroups.append("circle")
.attr("cx", d=>xScatterscale(xAccessorscatter(d)))
.attr("cy", dimensions.boundedheight)
.attr("r", 0)
const scattergroups= newscattergroup.transition(updateTransition)
scattergroups
.attr("cx", d=>xScatterscale(xAccessorscatter(d)))
.attr("cy", d=>yScatterscale(yAccessorscatter(d)))
.attr("r", 5)
.attr("fill", "cornflowerblue")
}
//create functions to draw data bar plot----
function plotbar(){
const xAccessorbar = d=> d.id
const yAccessorbar = d=> +d.equity
xBarscale
.domain(dataset.map(xAccessorbar))
yBarscale
.domain([0, d3.max(dataset, yAccessorbar)+0.1])
xAxis.call(xAxisgeneratorbar)
yAxis.call(yAxisgeneratorbar)
const newbarsgroups= chartgroups.append("rect")
.attr("x", d=> xBarscale(d.id))
.attr("height", 0)
.attr("y", dimensions.boundedheight)
.attr("width", xBarscale.bandwidth())
const t= newbarsgroups
.transition()
.duration(duration)
t
.attr("x", d=> xBarscale(d.id))
.attr("y", d=> yBarscale(d.equity))
.attr("width", xBarscale.bandwidth())
.attr("height", d=>dimensions.boundedheight- yBarscale(yAccessorbar(d)))
.attr("fill", "cornflowerblue")
}
d3.select("#scatter").on("click", function () {
scatterplot()
});
d3.select("#bar").on("click", function () {
plotbar()
});
}
createApp()
I am new to d3.js and still trying to figure out the Enter, Update, Exit trinity. I have found some examples where button is has been used to transition/update bar charts with new data. However, i am struggling to figure out how to exit one chart when the other chart gets drawn and vice versa on the click of the button.
Any suggestions on how to accomplish this will be highly appreciated.
Thanks a lot!