Transforming the Visualization

To go from a static chart to an interactive chart, it is important to use the D3 Data Join principle.

Transforming in D3

The D3 data join principle means that you can link your data to elements using .enter(), .merge() and .exit(). We do this so that you can, for example, filter within a graph on certain values, see other types of values or see a completely different visualization form.

.enter()

When data is available but no associated DOM elements are present yet, we use .enter(). So enter is used to add an element such as a circle to the DOM for each value (Source)[https://vizhub.com/curran/7f4137a77b564607ae2791ab1e49cf7e?edit=files&file=fruitBowl.js].

Suppose we have a list of several bananas that we want to show on our website, then we use the .enter() to create an element (for example a rectangle) for each banana in the list:

const svg = select('svg').attr('width', 960).attr('height', 700);
const listFruit = ["banana", "banana", "banana", "banana"];

const bananas = svg.selectAll('rect').data(listFruit)
  .enter()
  .append('rect')
    .attr('x', 20)
    .attr('y', 20)
    .attr('class', 'bananas')
    .attr('fill', 'yellow');

.merge()

The update pattern is that there are enough DOM elements on the page for the same number of data points.

Coming back to our banana list: When we eat 1 banana from the banana list but put an apple back in its place because we just bought it, then we update the list by means of .merge().

.exit().remove()

When there are more DOM elements on the page than there are data points, we use .exit().remove() to remove the other DOM elements.