How to use updateTransition method in Playwright Internal

1async function drawLines() {
2
3    const dataset = await d3.json("./my_weather_data.json"); 
4 
5    const width = 600;
6    let dimensions = {
7      width: width,
8      height: width * 0.6,
9      margin: {
10        top: 20,
11        right: 30,
12        bottom: 20,
13        left: 30,
14      }
15    }; 
16
17    dimensions.boundedWidth = dimensions.width
18      - dimensions.margin.left
19      - dimensions.margin.right;
20    dimensions.boundedHeight = dimensions.height
21      - dimensions.margin.top
22      - dimensions.margin.bottom; 
23
24    // 3. Draw canvas
25
26    const wrapper = d3.select("#wrapper")
27      .append("svg")
28        .attr("width", dimensions.width)
29        .attr("height", dimensions.height);
30
31    const bounds = wrapper.append("g")
32        .style("transform", `translate(${dimensions.margin.left}px,${dimensions.margin.top}px)`);
33
34    // init static elements
35    bounds.append("path")
36        .attr("class", "line"); 
37    bounds.append("g")
38        .attr("class", "y-axis")
39        //style("transform", `translateX(${dimensions.margin.left}px)`)
40        //.append("text")
41        //.attr("class", "y-axis-label")
42        //.attr("x", dimensions.boundedWidth / 2)
43        //.attr("y", dimensions.margin.bottom - 10);
44
45    const drawLineChart = metric => {
46        const dateParser = d3.timeParse("%Y-%m-%d");
47        
48        //Accessor
49        const yAccessor = d => d[metric];
50        const xAccessor = d => dateParser(d.date); 
51
52        const updateTransition = d3.transition().duration(600);
53
54        /*
55        const xScaler = d3.scaleLinear()
56            .domain(d3.extent(dataset, metricAccessor))
57            .range([0, dimensions.boundedWidth])
58            .nice(); 
59        
60        
61        
62        const binsGen = d3.bin()
63            .domain(xScaler.domain())
64            .value(metricAccessor)
65            .thresholds(12);
66
67        const bins = binsGen(dataset);
68        console.log(bins);
69        */ 
70
71        const xScaler = d3.scaleTime()
72                            .domain(d3.extent(dataset, xAccessor))
73                            .range([0, dimensions.boundedWidth]);
74
75        const yScaler = d3.scaleLinear()
76            .domain(d3.extent(dataset, yAccessor))
77            .range([dimensions.boundedHeight, 0]); 
78
79        const lineGenerator = d3.line()
80                                .x(d => xScaler(xAccessor(d)))
81                                .y(d => yScaler(yAccessor(d)));
82        
83        
84        let line = bounds.select(".line")
85                            .transition(updateTransition)
86                            .attr("d", lineGenerator(dataset))
87                            .attr("fill", "none")
88                            .attr("stroke", "#af9999")
89                            .attr("stroke-width", 2); 
90
91        
92        const yAxisGenerator = d3.axisLeft()
93							    .scale(yScaler);
94        
95
96        const xAxisGenerator = d3.axisBottom()
97                                    .scale(xScaler);
98
99        const yAxis = bounds.select(".y-axis")
100                            .transition(updateTransition)
101                            .call(yAxisGenerator); 
102
103        const xAxis = bounds.append("g")
104                            .call(xAxisGenerator)
105                            .style("transform", `translateY(${dimensions.boundedHeight}px)`);
106
107        
108        
109
110        /*
111        const oldLine = line.exit(); 
112        oldLine.remove(); 
113    
114        const newLine = line.enter().append("path")
115                                    .attr("class", "line"); 
116        
117        line = newLine.merge(line); 
118
119        */ 
120        
121        
122        
123        
124        /*
125        let binGroups = bounds.select(".bins").selectAll(".bin").data(bins); 
126
127        const oldBinGroups = binGroups.exit(); 
128        oldBinGroups.selectAll("rect")
129            .style("fill", "orangered")
130            .transition(exitTransition)
131            .attr("y", dimensions.boundedHeight)
132            .attr('height', 0); 
133        oldBinGroups.selectAll("text")
134            .transition(exitTransition)
135            .attr("y", dimensions.boundedHeight); 
136
137        oldBinGroups.transition(exitTransition).remove(); 
138
139        const newBinGroups = binGroups.enter().append("g")
140            .attr("class", "bin"); 
141
142        newBinGroups.append("rect"); 
143        newBinGroups.append("text"); 
144
145        binGroups = newBinGroups.merge(binGroups); 
146
147        const barPadding = 1; 
148
149        const barRect = binGroups.select("rect")
150            .transition(updateTransition)
151            .attr("x", d => xScaler(d.x0) + barPadding / 2)
152            .attr("y", d => yScaler(yAccessor(d)))
153            .attr("width", d => d3.max([0, xScaler(d.x1) - xScaler(d.x0) - barPadding]))
154            .attr("height", d => dimensions.boundedHeight - yScaler(yAccessor(d)))
155            .transition()
156            .style("fill","cornflowerblue"); 
157
158
159        const barText = binGroups.select("text")
160            .transition(updateTransition)
161            .attr("x", d => xScaler(d.x0) + (xScaler(d.x1) - xScaler(d.x0)) / 2)
162            .attr("y", d => yScaler(yAccessor(d)) - 5)
163            .text(d => yAccessor(d) || ""); 
164        */
165
166        /*
167        const mean = d3.mean(dataset, metricAccessor);
168        console.log(mean);
169        const meanLine = bounds.selectAll(".mean")
170            .transition(updateTransition)
171            .attr("x1", xScaler(mean))
172            .attr("x2", xScaler(mean))
173            .attr("y1", -15)
174            .attr("y2", dimensions.boundedHeight); 
175        */ 
176
177        /*
178        const xAxisGen = d3.axisBottom()
179            .scale(xScaler);
180        const xAxis = bounds.select("x-axis")
181            .transition(updateTransition)
182            .call(xAxisGen)
183            .style("transform", `translateY(${dimensions.boundedHeight}px)`);
184        */
185
186
187    }
188
189 
190    const metrics = [
191        "windSpeed",
192        "moonPhase",
193        "dewPoint",
194        "humidity",
195        "uvIndex",
196        "windBearing",
197        "temperatureMin",
198        "temperatureMax"
199    ]; 
200    let mIndex = 0; 
201
202    drawLineChart(metrics[mIndex]);
203    const button = d3.select("body")
204        .append("button")
205        .text("Change Metric"); 
206
207    button.node().addEventListener("click", onClick); 
208
209    function onClick() {
210        mIndex = (mIndex + 1) % metrics.length; 
211        drawLineChart(metrics[mIndex]); 
212        console.log(mIndex); 
213    }; 
214
215}
216
217drawLines(); 
218

Source: bar.js

async function drawLines() {

    const dataset = await d3.json("./my_weather_data.json"); 
 
    const width = 600;
    let dimensions = {
      width: width,
      height: width * 0.6,
      margin: {
        top: 20,
        right: 30,
        bottom: 20,
        left: 30,
      }
    }; 

    dimensions.boundedWidth = dimensions.width
      - dimensions.margin.left
      - dimensions.margin.right;
    dimensions.boundedHeight = dimensions.height
      - dimensions.margin.top
      - dimensions.margin.bottom; 

    // 3. Draw canvas

    const wrapper = d3.select("#wrapper")
      .append("svg")
        .attr("width", dimensions.width)
        .attr("height", dimensions.height);

    const bounds = wrapper.append("g")
        .style("transform", `translate(${dimensions.margin.left}px,${dimensions.margin.top}px)`);

    // init static elements
    bounds.append("path")
        .attr("class", "line"); 
    bounds.append("g")
        .attr("class", "y-axis")
        //style("transform", `translateX(${dimensions.margin.left}px)`)
        //.append("text")
        //.attr("class", "y-axis-label")
        //.attr("x", dimensions.boundedWidth / 2)
        //.attr("y", dimensions.margin.bottom - 10);

    const drawLineChart = metric => {
        const dateParser = d3.timeParse("%Y-%m-%d");
        
        //Accessor
        const yAccessor = d => d[metric];
        const xAccessor = d => dateParser(d.date); 

        const updateTransition = d3.transition().duration(600);

        /*
        const xScaler = d3.scaleLinear()
            .domain(d3.extent(dataset, metricAccessor))
            .range([0, dimensions.boundedWidth])
            .nice(); 
        
        
        
        const binsGen = d3.bin()
            .domain(xScaler.domain())
            .value(metricAccessor)
            .thresholds(12);

        const bins = binsGen(dataset);
        console.log(bins);
        */ 

        const xScaler = d3.scaleTime()
                            .domain(d3.extent(dataset, xAccessor))
                            .range([0, dimensions.boundedWidth]);

        const yScaler = d3.scaleLinear()
            .domain(d3.extent(dataset, yAccessor))
            .range([dimensions.boundedHeight, 0]); 

        const lineGenerator = d3.line()
                                .x(d => xScaler(xAccessor(d)))
                                .y(d => yScaler(yAccessor(d)));
        
        
        let line = bounds.select(".line")
                            .transition(updateTransition)
                            .attr("d", lineGenerator(dataset))
                            .attr("fill", "none")
                            .attr("stroke", "#af9999")
                            .attr("stroke-width", 2); 

        
        const yAxisGenerator = d3.axisLeft()
							    .scale(yScaler);
        

        const xAxisGenerator = d3.axisBottom()
                                    .scale(xScaler);

        const yAxis = bounds.select(".y-axis")
                            .transition(updateTransition)
                            .call(yAxisGenerator); 

        const xAxis = bounds.append("g")
                            .call(xAxisGenerator)
                            .style("transform", `translateY(${dimensions.boundedHeight}px)`);

        
        

        /*
        const oldLine = line.exit(); 
        oldLine.remove(); 
    
        const newLine = line.enter().append("path")
                                    .attr("class", "line"); 
        
        line = newLine.merge(line); 

        */ 
        
        
        
        
        /*
        let binGroups = bounds.select(".bins").selectAll(".bin").data(bins); 

        const oldBinGroups = binGroups.exit(); 
        oldBinGroups.selectAll("rect")
            .style("fill", "orangered")
            .transition(exitTransition)
            .attr("y", dimensions.boundedHeight)
            .attr('height', 0); 
        oldBinGroups.selectAll("text")
            .transition(exitTransition)
            .attr("y", dimensions.boundedHeight); 

        oldBinGroups.transition(exitTransition).remove(); 

        const newBinGroups = binGroups.enter().append("g")
            .attr("class", "bin"); 

        newBinGroups.append("rect"); 
        newBinGroups.append("text"); 

        binGroups = newBinGroups.merge(binGroups); 

        const barPadding = 1; 

        const barRect = binGroups.select("rect")
            .transition(updateTransition)
            .attr("x", d => xScaler(d.x0) + barPadding / 2)
            .attr("y", d => yScaler(yAccessor(d)))
            .attr("width", d => d3.max([0, xScaler(d.x1) - xScaler(d.x0) - barPadding]))
            .attr("height", d => dimensions.boundedHeight - yScaler(yAccessor(d)))
            .transition()
            .style("fill","cornflowerblue"); 


        const barText = binGroups.select("text")
            .transition(updateTransition)
            .attr("x", d => xScaler(d.x0) + (xScaler(d.x1) - xScaler(d.x0)) / 2)
            .attr("y", d => yScaler(yAccessor(d)) - 5)
            .text(d => yAccessor(d) || ""); 
        */

        /*
        const mean = d3.mean(dataset, metricAccessor);
        console.log(mean);
        const meanLine = bounds.selectAll(".mean")
            .transition(updateTransition)
            .attr("x1", xScaler(mean))
            .attr("x2", xScaler(mean))
            .attr("y1", -15)
            .attr("y2", dimensions.boundedHeight); 
        */ 

        /*
        const xAxisGen = d3.axisBottom()
            .scale(xScaler);
        const xAxis = bounds.select("x-axis")
            .transition(updateTransition)
            .call(xAxisGen)
            .style("transform", `translateY(${dimensions.boundedHeight}px)`);
        */


    }

 
    const metrics = [
        "windSpeed",
        "moonPhase",
        "dewPoint",
        "humidity",
        "uvIndex",
        "windBearing",
        "temperatureMin",
        "temperatureMax"
    ]; 
    let mIndex = 0; 

    drawLineChart(metrics[mIndex]);
    const button = d3.select("body")
        .append("button")
        .text("Change Metric"); 

    button.node().addEventListener("click", onClick); 

    function onClick() {
        mIndex = (mIndex + 1) % metrics.length; 
        drawLineChart(metrics[mIndex]); 
        console.log(mIndex); 
    }; 

}

drawLines(); 

1//load data----
2
3
4async function createApp(){
5    const dataset= await d3.csv('data.csv')
6
7    console.log(dataset)
8   
9    //create dimensions---
10    let dimensions={
11        width: 800,
12        height:600,
13        margins: {
14            left: 50,
15            right: 20,
16            top:20,
17            bottom: 50,
18        },
19    };
20
21    //bound dimensions
22    dimensions.boundedwidth=dimensions.width-
23        dimensions.margins.left-
24        dimensions.margins.right;
25    dimensions.boundedheight=dimensions.height-
26        dimensions.margins.top-
27        dimensions.margins.bottom;
28
29
30    //Draw canvas----
31    wrapper=d3.select("#vis")
32        .append("svg")
33        .attr("width", dimensions.width)
34        .attr("height", dimensions.height);
35
36    bounds=wrapper.append("g")
37        .style("transform", `translate(${
38            dimensions.margins.left
39        }px, ${
40            dimensions.margins.top
41        }px)`);
42        
43    //create scales------
44    const xScatterscale= d3.scaleLinear()
45        .range([0, dimensions.boundedwidth])
46        .nice()        
47
48    const yScatterscale= d3.scaleLinear()
49        .range([dimensions.boundedheight, 0])
50        .nice()       
51
52
53    const xBarscale= d3.scaleBand()
54        .range([0, dimensions.boundedwidth])
55        .padding(0.2)
56    
57    const yBarscale=d3.scaleLinear()
58        .range([dimensions.boundedheight, 0])
59        .nice()
60
61    //Draw perpherals--axes-------
62    //create axis generators
63    const xAxisgeneratorscatter= d3.axisBottom()
64        .scale(xScatterscale)
65        .ticks(8)      
66
67    const yAxisgeneratorscatter= d3.axisLeft()
68        .scale(yScatterscale)
69        .ticks(9)
70      
71
72    const xAxisgeneratorbar=d3.axisBottom()
73        .scale(xBarscale)
74
75    const yAxisgeneratorbar=d3.axisLeft()
76        .scale(yBarscale)
77
78//creating a group element which contains all the things related to x-axis like axis and the labels
79    bounds.append("g")
80        .attr("class", "x-axis")
81            .style("transform", `translateY(${
82                dimensions.boundedheight
83            }px)`)  
84        .append("text")
85            .attr("class", "x-axis-label")
86            .attr("x", dimensions.boundedwidth/2)
87            .attr("y", dimensions.margins.bottom-10)
88            .attr("fill", "black")
89            .style("font-size", "1.4em")
90            
91//creating a group element which contains all the things related to y-axis like axis and the labels
92    bounds.append("g")
93        .attr("class", "y-axis")
94        .append("text")
95            .attr("class", "y-axis-label")
96            .attr("x", -dimensions.boundedheight/2)
97            .attr("y", -dimensions.margins.left+10)
98            .attr("fill", "black")
99            .style("font-size", "1.4em")
100            .style("transform", "rotate(-90deg)")
101            .style("text-anchor", "middle")  
102    
103        
104
105   //binding data to empty request----- 
106    const requests= bounds.append("g")
107            .attr("class", "request")
108
109    const chartgroups= requests.selectAll(".request")
110                .data(dataset)
111                .enter().append("g")
112
113    let duration = 750           
114
115    //const updateTransition = d3.transition().duration(duration)  
116
117    const updateTransition = (t) => {
118        return t.duration(duration)
119    }
120
121    var previousChartType = "scatter";
122     
123    scatterplot();
124   
125    
126    //create functions to draw data scatter plot----
127    function scatterplot(){
128
129        const xAccessorscatter= d=> +d.risk
130        const yAccessorscatter= d=> +d.return
131
132        xScatterscale.domain([0, d3.max(dataset, xAccessorscatter)+0.05])
133        yScatterscale.domain([0, d3.max(dataset, yAccessorscatter)+0.02])
134
135        const xAxis=bounds.select(".x-axis")
136            .transition()
137            .call(updateTransition)
138            .call(xAxisgeneratorscatter)   
139            
140            
141        const xAxislabel= xAxis.select(".x-axis-label")
142                    .transition()
143                    .call(updateTransition)
144                    .text("Risk")
145
146        const yAxis= bounds.select(".y-axis")
147            .transition()
148            .call(updateTransition)
149            .call(yAxisgeneratorscatter)
150
151
152        const yAxislabel= yAxis.select(".y-axis-label")
153            .transition()
154            .call(updateTransition)
155            .text("Return")
156
157        const newscattergroup= chartgroups.append("circle")
158            .attr("cx", d=>xScatterscale(xAccessorscatter(d)))
159            .attr("cy", dimensions.boundedheight)
160            .attr("r", 0)
161
162        const scattergroups= newscattergroup
163                .transition().duration(previousChartType === "bar" ? duration : 0)
164                // .call(updateTransition)
165                    .attr("cx", d=>xScatterscale(xAccessorscatter(d)))
166                    .attr("cy", d=>yScatterscale(yAccessorscatter(d)))
167                    .attr("r", 5)
168                    .attr("fill", "red")     
169                    
170        previousChartType = "scatter";
171} 
172
173    //create functions to draw data bar plot----
174    function plotbar(){
175
176        const xAccessorbar = d=> d.id
177        const yAccessorbar = d=> +d.equity
178
179        xBarscale
180            .domain(dataset.map(xAccessorbar))
181            
182        yBarscale
183            .domain([0, d3.max(dataset, yAccessorbar)+0.1])
184      
185        const xAxis=bounds.select(".x-axis")
186            .transition()
187            .call(updateTransition)
188            .call(xAxisgeneratorbar)
189
190        const xAxislabel=xAxis.select(".x-axis-label")
191                    .transition()
192                    .call(updateTransition)
193                    .text("id")
194
195        const yAxis=bounds.select(".y-axis")
196                .transition()
197                .call(updateTransition)
198                .call(yAxisgeneratorbar)
199
200        const yAxislabel=yAxis.select(".y-axis-label")
201                .transition()
202                .call(updateTransition)
203                .text("Equity")
204
205        const newbarsgroups= chartgroups.append("rect")
206            .attr("x", d=> xBarscale(d.id))
207            .attr("height", 0)
208            .attr("y", dimensions.boundedheight)
209            .attr("width", xBarscale.bandwidth())
210
211        const t= newbarsgroups
212                .transition().duration(previousChartType === "scatter" ? duration : 0)
213                //.call(updateTransition)
214                    .attr("x", d=> xBarscale(d.id))
215                    .attr("y", d=> yBarscale(d.equity))
216                    .attr("width", xBarscale.bandwidth())
217                    .attr("height", d=>dimensions.boundedheight- yBarscale(yAccessorbar(d)))
218                    .attr("fill", "cornflowerblue")
219     
220        
221        const barText= chartgroups.filter(yAccessorbar)
222            .append("text")
223            .attr("x", d=>xBarscale(d.id)+(xBarscale.bandwidth())/2)
224            .attr("y", dimensions.boundedheight)
225            .transition().duration(previousChartType === "scatter" ? duration : 0)
226            // .call(updateTransition)
227                .attr("x", d=>xBarscale(d.id)+(xBarscale.bandwidth())/2)
228                .attr("y", d=>yBarscale(yAccessorbar(d))-5)
229                .text(yAccessorbar)
230                .style("text-anchor", "middle")
231                .attr("fill", "black")
232                .style("font-size", "12px")
233                .style("font-family", "sans-serif")       
234                
235        previousChartType = "bar";
236
237    }
238 
239        d3.select("#scatter").on("click", function () {
240            chartgroups
241            .selectAll("rect")
242            .attr("fill-opacity", 1)
243            .transition()
244            .duration(duration)
245            .attr("y", dimensions.boundedheight)
246            .attr("height", 0)
247            .attr("fill-opacity", 0)
248            .remove();
249
250            chartgroups
251            .select("text")
252            .transition()
253            .duration(duration)
254            .attr("fill", "white")
255            .remove();
256    
257            scatterplot()
258                      
259          });
260
261        
262        d3.select("#bar").on("click", function () {
263            chartgroups
264                 .selectAll("circle")
265                 .attr("fill-opacity", 1)
266                .transition()
267                .duration(duration)
268                .attr("fill-opacity", 0)
269                .remove();
270                
271            plotbar()
272          
273          });
274
275}
276
277createApp()

Source: transition.js

//load data----


async function createApp(){
    const dataset= await d3.csv('data.csv')

    console.log(dataset)
   
    //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)

//creating a group element which contains all the things related to x-axis like axis and the labels
    bounds.append("g")
        .attr("class", "x-axis")
            .style("transform", `translateY(${
                dimensions.boundedheight
            }px)`)  
        .append("text")
            .attr("class", "x-axis-label")
            .attr("x", dimensions.boundedwidth/2)
            .attr("y", dimensions.margins.bottom-10)
            .attr("fill", "black")
            .style("font-size", "1.4em")
            
//creating a group element which contains all the things related to y-axis like axis and the labels
    bounds.append("g")
        .attr("class", "y-axis")
        .append("text")
            .attr("class", "y-axis-label")
            .attr("x", -dimensions.boundedheight/2)
            .attr("y", -dimensions.margins.left+10)
            .attr("fill", "black")
            .style("font-size", "1.4em")
            .style("transform", "rotate(-90deg)")
            .style("text-anchor", "middle")  
    
        

   //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)  

    const updateTransition = (t) => {
        return t.duration(duration)
    }

    var previousChartType = "scatter";
     
    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])

        const xAxis=bounds.select(".x-axis")
            .transition()
            .call(updateTransition)
            .call(xAxisgeneratorscatter)   
            
            
        const xAxislabel= xAxis.select(".x-axis-label")
                    .transition()
                    .call(updateTransition)
                    .text("Risk")

        const yAxis= bounds.select(".y-axis")
            .transition()
            .call(updateTransition)
            .call(yAxisgeneratorscatter)


        const yAxislabel= yAxis.select(".y-axis-label")
            .transition()
            .call(updateTransition)
            .text("Return")

        const newscattergroup= chartgroups.append("circle")
            .attr("cx", d=>xScatterscale(xAccessorscatter(d)))
            .attr("cy", dimensions.boundedheight)
            .attr("r", 0)

        const scattergroups= newscattergroup
                .transition().duration(previousChartType === "bar" ? duration : 0)
                // .call(updateTransition)
                    .attr("cx", d=>xScatterscale(xAccessorscatter(d)))
                    .attr("cy", d=>yScatterscale(yAccessorscatter(d)))
                    .attr("r", 5)
                    .attr("fill", "red")     
                    
        previousChartType = "scatter";
} 

    //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])
      
        const xAxis=bounds.select(".x-axis")
            .transition()
            .call(updateTransition)
            .call(xAxisgeneratorbar)

        const xAxislabel=xAxis.select(".x-axis-label")
                    .transition()
                    .call(updateTransition)
                    .text("id")

        const yAxis=bounds.select(".y-axis")
                .transition()
                .call(updateTransition)
                .call(yAxisgeneratorbar)

        const yAxislabel=yAxis.select(".y-axis-label")
                .transition()
                .call(updateTransition)
                .text("Equity")

        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(previousChartType === "scatter" ? duration : 0)
                //.call(updateTransition)
                    .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")
     
        
        const barText= chartgroups.filter(yAccessorbar)
            .append("text")
            .attr("x", d=>xBarscale(d.id)+(xBarscale.bandwidth())/2)
            .attr("y", dimensions.boundedheight)
            .transition().duration(previousChartType === "scatter" ? duration : 0)
            // .call(updateTransition)
                .attr("x", d=>xBarscale(d.id)+(xBarscale.bandwidth())/2)
                .attr("y", d=>yBarscale(yAccessorbar(d))-5)
                .text(yAccessorbar)
                .style("text-anchor", "middle")
                .attr("fill", "black")
                .style("font-size", "12px")
                .style("font-family", "sans-serif")       
                
        previousChartType = "bar";

    }
 
        d3.select("#scatter").on("click", function () {
            chartgroups
            .selectAll("rect")
            .attr("fill-opacity", 1)
            .transition()
            .duration(duration)
            .attr("y", dimensions.boundedheight)
            .attr("height", 0)
            .attr("fill-opacity", 0)
            .remove();

            chartgroups
            .select("text")
            .transition()
            .duration(duration)
            .attr("fill", "white")
            .remove();
    
            scatterplot()
                      
          });

        
        d3.select("#bar").on("click", function () {
            chartgroups
                 .selectAll("circle")
                 .attr("fill-opacity", 1)
                .transition()
                .duration(duration)
                .attr("fill-opacity", 0)
                .remove();
                
            plotbar()
          
          });

}

createApp()

1async function drawBars() {
2  // 1. Access data
3  const dataset = await d3.json("./../../my_weather_data.json");
4
5  // 2. Create chart dimensions
6
7  const width = 500;
8  let dimensions = {
9    width: width,
10    height: width * 0.6,
11    margin: {
12      top: 30,
13      right: 10,
14      bottom: 50,
15      left: 50,
16    },
17  };
18  dimensions.boundedWidth =
19    dimensions.width - dimensions.margin.left - dimensions.margin.right;
20  dimensions.boundedHeight =
21    dimensions.height - dimensions.margin.top - dimensions.margin.bottom;
22
23  // 3. Draw canvas
24
25  const wrapper = d3
26    .select("#wrapper")
27    .append("svg")
28    .attr("width", dimensions.width)
29    .attr("height", dimensions.height);
30
31  const bounds = wrapper
32    .append("g")
33    .style(
34      "transform",
35      `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`
36    );
37
38  // init static elements
39  bounds.append("g").attr("class", "bins");
40  bounds.append("line").attr("class", "mean");
41  bounds
42    .append("g")
43    .attr("class", "x-axis")
44    .style("transform", `translateY(${dimensions.boundedHeight}px)`)
45    .append("text")
46    .attr("class", "x-axis-label")
47    .attr("x", dimensions.boundedWidth / 2)
48    .attr("y", dimensions.margin.bottom - 10);
49
50  const drawHistogram = (metric) => {
51    const metricAccessor = (d) => d[metric];
52    const yAccessor = (d) => d.length;
53
54    // 4. Create scales
55
56    const xScale = d3
57      .scaleLinear()
58      .domain(d3.extent(dataset, metricAccessor))
59      .range([0, dimensions.boundedWidth])
60      .nice();
61
62    const binsGenerator = d3
63      .bin()
64      .domain(xScale.domain())
65      .value(metricAccessor)
66      .thresholds(12);
67
68    const bins = binsGenerator(dataset);
69
70    const yScale = d3
71      .scaleLinear()
72      .domain([0, d3.max(bins, yAccessor)])
73      .range([dimensions.boundedHeight, 0])
74      .nice();
75
76    // 5. Draw data
77    /* animate the bars when they leaving */
78    const exitTransition = d3.transition().duration(600);
79    const updateTransition = exitTransition.transition().duration(600);
80
81    /* the animation was out of sync with the labels again!
82      by doing so we can make a transition on the root document that can be used in multiple places.
83      */
84    /* const updateTransition = d3
85      .transition()
86      .duration(600)
87      .ease(d3.easeBounceIn);
88    console.log(updateTransition); */
89    /* expand the _groups array and see that this transition is indeed targeting
90     * the root <html> element.
91     */
92
93    const barPadding = 1;
94
95    let binGroups = bounds.select(".bins").selectAll(".bin").data(bins);
96
97    const oldBinGroups = binGroups.exit();
98    oldBinGroups
99      .selectAll("rect")
100      .style("fill", "orangered")
101      .transition(exitTransition)
102      .attr("y", dimensions.boundedHeight)
103      .attr("height", 0);
104
105    oldBinGroups
106      .selectAll("text")
107      .transition(exitTransition)
108      .attr("y", dimensions.boundedHeight);
109
110    oldBinGroups.transition(exitTransition).remove();
111
112    const newBinGroups = binGroups.enter().append("g").attr("class", "bin");
113
114    newBinGroups
115      .append("rect")
116      .attr("height", 0)
117      .attr("x", (d) => xScale(d.x0) + barPadding)
118      .attr("y", dimensions.boundedHeight)
119      .attr("width", (d) =>
120        d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding])
121      )
122      /* we using .style() instead if .attr() because we need to fill the value to be an inline style
123       * instead of an SVG attribute in order to override the CSS styles in styles.css  */
124      .style("fill", "yellowgreen");
125
126    newBinGroups
127      .append("text")
128      /* set the label's initial position to prevent them from flying in from the left */
129      .attr("x", (d) => xScale(d.x0) + (xScale(d.x1) - xScale(d.x0)) / 2)
130      .attr("y", dimensions.boundedHeight);
131
132    // update binGroups to include new points
133    binGroups = newBinGroups.merge(binGroups);
134
135    const barRects = binGroups
136      .select("rect")
137      /* we can use the .transition() methode on the d3 selection object
138       * to transform the selection object into a d3 transition object.
139       */
140      //.transition() /* now we have two additional keys: _id and _name */
141      /*  see also the __proto__ of the transition object,
142       * which contains d3-specific methods
143       * and the nested __proto__: Object contains native object methods such as toString().
144       * we can see also some methods are ingerited form d3 selection object such as call() and each() */
145
146      /* slow things down */
147      //.duration(600)
148      /* specify a timing func = CSS's transition-timing-func  to give the animation some life */
149      // .ease(d3.easeBounceOut)
150
151      /* update: to use the updateTransition instead of creating a new on */
152      .transition(updateTransition)
153      .attr("x", (d) => xScale(d.x0) + barPadding)
154      .attr("y", (d) => yScale(yAccessor(d)))
155      .attr("height", (d) => dimensions.boundedHeight - yScale(yAccessor(d)))
156      .attr("width", (d) =>
157        d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding])
158      )
159      .transition()
160      .style("fill", "cornflowerblue");
161    //console.log(barRects);
162
163    const barText = binGroups
164      .select("text")
165      /* adding another transition to make the text transition with the bars */
166      //.transition()
167      //.duration(600)
168      /* update: to use the updateTransition instead of creating a new on */
169      .transition(updateTransition)
170      .attr("x", (d) => xScale(d.x0) + (xScale(d.x1) - xScale(d.x0)) / 2)
171      .attr("y", (d) => yScale(yAccessor(d)) - 5)
172      .text((d) => yAccessor(d) || "");
173
174    const mean = d3.mean(dataset, metricAccessor);
175
176    const meanLine = bounds
177      .selectAll(".mean")
178      /* use the updateTransition*/
179      .transition(updateTransition)
180      .attr("x1", xScale(mean))
181      .attr("x2", xScale(mean))
182      .attr("y1", -20)
183      .attr("y2", dimensions.boundedHeight);
184
185    // 6. Draw peripherals
186
187    const xAxisGenerator = d3.axisBottom().scale(xScale);
188
189    const xAxis = bounds
190      .select(".x-axis")
191      /* update: use the updateTransition*/
192      .transition(updateTransition)
193      .call(xAxisGenerator);
194
195    const xAxisLabel = xAxis.select(".x-axis-label").text(metric);
196  };
197
198  const metrics = [
199    "windSpeed",
200    "moonPhase",
201    "dewPoint",
202    "humidity",
203    "uvIndex",
204    "windBearing",
205    "temperatureMin",
206    "temperatureMax",
207  ];
208  let selectedMetricIndex = 0;
209  drawHistogram(metrics[selectedMetricIndex]);
210
211  const button = d3.select("body").append("button").text("Change metric");
212
213  button.node().addEventListener("click", onClick);
214  function onClick() {
215    selectedMetricIndex = (selectedMetricIndex + 1) % metrics.length;
216    drawHistogram(metrics[selectedMetricIndex]);
217  }
218}
219drawBars();
220

Source: updating-bars.js

async function drawBars() {
  // 1. Access data
  const dataset = await d3.json("./../../my_weather_data.json");

  // 2. Create chart dimensions

  const width = 500;
  let dimensions = {
    width: width,
    height: width * 0.6,
    margin: {
      top: 30,
      right: 10,
      bottom: 50,
      left: 50,
    },
  };
  dimensions.boundedWidth =
    dimensions.width - dimensions.margin.left - dimensions.margin.right;
  dimensions.boundedHeight =
    dimensions.height - dimensions.margin.top - dimensions.margin.bottom;

  // 3. Draw canvas

  const wrapper = d3
    .select("#wrapper")
    .append("svg")
    .attr("width", dimensions.width)
    .attr("height", dimensions.height);

  const bounds = wrapper
    .append("g")
    .style(
      "transform",
      `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`
    );

  // init static elements
  bounds.append("g").attr("class", "bins");
  bounds.append("line").attr("class", "mean");
  bounds
    .append("g")
    .attr("class", "x-axis")
    .style("transform", `translateY(${dimensions.boundedHeight}px)`)
    .append("text")
    .attr("class", "x-axis-label")
    .attr("x", dimensions.boundedWidth / 2)
    .attr("y", dimensions.margin.bottom - 10);

  const drawHistogram = (metric) => {
    const metricAccessor = (d) => d[metric];
    const yAccessor = (d) => d.length;

    // 4. Create scales

    const xScale = d3
      .scaleLinear()
      .domain(d3.extent(dataset, metricAccessor))
      .range([0, dimensions.boundedWidth])
      .nice();

    const binsGenerator = d3
      .bin()
      .domain(xScale.domain())
      .value(metricAccessor)
      .thresholds(12);

    const bins = binsGenerator(dataset);

    const yScale = d3
      .scaleLinear()
      .domain([0, d3.max(bins, yAccessor)])
      .range([dimensions.boundedHeight, 0])
      .nice();

    // 5. Draw data
    /* animate the bars when they leaving */
    const exitTransition = d3.transition().duration(600);
    const updateTransition = exitTransition.transition().duration(600);

    /* the animation was out of sync with the labels again!
      by doing so we can make a transition on the root document that can be used in multiple places.
      */
    /* const updateTransition = d3
      .transition()
      .duration(600)
      .ease(d3.easeBounceIn);
    console.log(updateTransition); */
    /* expand the _groups array and see that this transition is indeed targeting
     * the root <html> element.
     */

    const barPadding = 1;

    let binGroups = bounds.select(".bins").selectAll(".bin").data(bins);

    const oldBinGroups = binGroups.exit();
    oldBinGroups
      .selectAll("rect")
      .style("fill", "orangered")
      .transition(exitTransition)
      .attr("y", dimensions.boundedHeight)
      .attr("height", 0);

    oldBinGroups
      .selectAll("text")
      .transition(exitTransition)
      .attr("y", dimensions.boundedHeight);

    oldBinGroups.transition(exitTransition).remove();

    const newBinGroups = binGroups.enter().append("g").attr("class", "bin");

    newBinGroups
      .append("rect")
      .attr("height", 0)
      .attr("x", (d) => xScale(d.x0) + barPadding)
      .attr("y", dimensions.boundedHeight)
      .attr("width", (d) =>
        d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding])
      )
      /* we using .style() instead if .attr() because we need to fill the value to be an inline style
       * instead of an SVG attribute in order to override the CSS styles in styles.css  */
      .style("fill", "yellowgreen");

    newBinGroups
      .append("text")
      /* set the label's initial position to prevent them from flying in from the left */
      .attr("x", (d) => xScale(d.x0) + (xScale(d.x1) - xScale(d.x0)) / 2)
      .attr("y", dimensions.boundedHeight);

    // update binGroups to include new points
    binGroups = newBinGroups.merge(binGroups);

    const barRects = binGroups
      .select("rect")
      /* we can use the .transition() methode on the d3 selection object
       * to transform the selection object into a d3 transition object.
       */
      //.transition() /* now we have two additional keys: _id and _name */
      /*  see also the __proto__ of the transition object,
       * which contains d3-specific methods
       * and the nested __proto__: Object contains native object methods such as toString().
       * we can see also some methods are ingerited form d3 selection object such as call() and each() */

      /* slow things down */
      //.duration(600)
      /* specify a timing func = CSS's transition-timing-func  to give the animation some life */
      // .ease(d3.easeBounceOut)

      /* update: to use the updateTransition instead of creating a new on */
      .transition(updateTransition)
      .attr("x", (d) => xScale(d.x0) + barPadding)
      .attr("y", (d) => yScale(yAccessor(d)))
      .attr("height", (d) => dimensions.boundedHeight - yScale(yAccessor(d)))
      .attr("width", (d) =>
        d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding])
      )
      .transition()
      .style("fill", "cornflowerblue");
    //console.log(barRects);

    const barText = binGroups
      .select("text")
      /* adding another transition to make the text transition with the bars */
      //.transition()
      //.duration(600)
      /* update: to use the updateTransition instead of creating a new on */
      .transition(updateTransition)
      .attr("x", (d) => xScale(d.x0) + (xScale(d.x1) - xScale(d.x0)) / 2)
      .attr("y", (d) => yScale(yAccessor(d)) - 5)
      .text((d) => yAccessor(d) || "");

    const mean = d3.mean(dataset, metricAccessor);

    const meanLine = bounds
      .selectAll(".mean")
      /* use the updateTransition*/
      .transition(updateTransition)
      .attr("x1", xScale(mean))
      .attr("x2", xScale(mean))
      .attr("y1", -20)
      .attr("y2", dimensions.boundedHeight);

    // 6. Draw peripherals

    const xAxisGenerator = d3.axisBottom().scale(xScale);

    const xAxis = bounds
      .select(".x-axis")
      /* update: use the updateTransition*/
      .transition(updateTransition)
      .call(xAxisGenerator);

    const xAxisLabel = xAxis.select(".x-axis-label").text(metric);
  };

  const metrics = [
    "windSpeed",
    "moonPhase",
    "dewPoint",
    "humidity",
    "uvIndex",
    "windBearing",
    "temperatureMin",
    "temperatureMax",
  ];
  let selectedMetricIndex = 0;
  drawHistogram(metrics[selectedMetricIndex]);

  const button = d3.select("body").append("button").text("Change metric");

  button.node().addEventListener("click", onClick);
  function onClick() {
    selectedMetricIndex = (selectedMetricIndex + 1) % metrics.length;
    drawHistogram(metrics[selectedMetricIndex]);
  }
}
drawBars();