Open the Console and complete the steps below. Refresh the page after you complete each one.
All of your solutions should begin with:
Creating a data array (ex. `const dataset = [1, 2, 3];`)
Selecting the `svg` and storing it (`const svg = d3.select("svg");`)
Binding the data and storing it (ex. `const bars = svg.selectAll("rect").data(dataset));`)
Change the data to any six other values and update the lengths of the bars.
Bind a new dataset, newbardata to the bars, update the bar lengths, and remove any extra bars. const newbardata = [250, 125, 80, 100];
Bind a new dataset, reallynewbardata, to the bars, then add additional bars so each data value has a bar. Make the outline (stroke) of the new bars a different color. const reallynewbardata = [300, 100, 250, 50, 200, 150, 325, 275];
Repeat the previous exercise using .merge() to combine the update and enter selections into one selection and then transition the height of all of the bars to half their current height.
Add text labels inside the bars at the right end with the length of the bar in pixels.
All of your solutions should start with the pattern:
Create a data array
Store the svg selection
Store the data bind in X
Refresh the page before starting the next question.