D3 - RowinRuizendaal/frontend-data GitHub Wiki

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

Some examples using enter and exit:

<div id="content">
  <div></div>
  <div></div>
  <div></div>
</div>
<!--Some HTML structure-->

const data = [ 30, 10, 50, 100, 90]
// Some example data in an array

d3.select('#content')
  .selectAll('div')
  .data(data)
// D3 data  

In this example, Data is the same length as the selection.

However, what happens if the array has more (or less) elements than the selection?

• if the array is longer than the selection there’s a shortfall of DOM elements and we need to add elements
• if the array is shorter than the selection there’s a surplus of DOM elements and we need to remove elements

D3 can help in adding and removing DOM elements using two functions .enter and .exit.

Enter identifies any DOM elements that need to be added when the joined array is longer than the selection. it is defined on an update selection

d3.select('#content')
   .selectAll('div')
   .data(data)
   .enter();

// D3 with enter   

Enter returns an enter selection which basically represents the elements that need to be added. it's usually followed by .append which adds elements to the dom.

d3.select('#content')
  .selectAll('div')
  .data(Data)
  .enter()
  .append('div');

.exit returns an exit selection which consists of the elements that need to be removed from the DOM. It is usually followed by .remove

d3.select('#content')
  .selectAll('div')
  .data(Data)
  .exit()
  .remove();

<div id="content">
  <div></div>
  <div></div>
  <div></div>
</div>
<!--HTML STRUCTURE BEING DELETED-->

const myData = ['A'];

When the code is executed the surplus elements are being removed.

    // Bars
    svg.selectAll('myRect')
        .data(receiveddata)
        .enter()
        .append('rect')
        .attr('class', 'balk')
        .attr('x', x(0))
        .attr('y', function (d) {
            return y(d.areadesc);
        })
        .attr('width', function (d) {
            return x(d.pricePerHour);
        })
        .attr('height', y.bandwidth())
        .attr('fill', '#69b3a2')


    //update
    const bars = selectAll('.balk').data(receiveddata)

    bars
        .attr('x', x(0))
        .attr('y', function (d) {
            return y(d.areadesc);
        })
        .attr('width', function (d) {
            return x(d.pricePerHour);
        })
        .attr('height', y.bandwidth())



    //EXIT
    bars.exit()
        .remove()

using the .attr you can add attributes to elements.

    const svg = select('.multi-select')
        .append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .attr('class', 'graph')
        .append('g')
        .attr('transform',
            'translate(' + margin.left + ',' + margin.top + ')')