D3 Data Join Data join concept is an important topic that works alongside the D3 selection by enabling you to inject modify and remove elements based on your data sets What is a Data Join Data join allows you to connect your data with the your HTML elements i e a specific data set value may correspond to an elements graphical appearance As the data set changes the corresponding elements can also change relationship between the data and elements Data join makes it straightforward and easy to manipulate elements in the DOM based on your data set How Data Join Works Data join works by mapping the elements in a document to a given data set The document then forms a virtual representation based on the given data set As the data changes so do the elements For example given the following list of numbers 10 20 30 40 50 60 The data set has six items and so it can be mapped to six elements For this example you ll map the list of elements to a list tag i e li DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body style height 50pt ul id list li li li li ul script let dset 10 20 30 40 50 60 d3 select list selectAll li data dset script body html The above example doesn t show much yet however the two li elements are now associated with the first two data set values 1 li 10 2 li 20 You ll now take this further by modifying the methods using attr style text for the first two li tags DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body style height 50pt ul id list li li li li ul script let dset 10 20 30 40 50 60 d3 select list selectAll li data dset text function d return d script body html The text method in the above example is used to get the data value In the above example the d represents 10 for the first element and 20 for the second element The next six data values can be mapped to any elements You can use the data join s enter and selector s append method The enter method gives you access to the remaining data which is currently not mapped only the first two data items are The append method is used to create new elements from the corresponding data In the following example you ll create li tags for the remaining data values DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body style height 80pt ul id list li li li li ul script let dset 10 20 30 40 50 60 d3 select list selectAll li data dset text function d return d enter append li text function d return dynamically created d script body html Another important data join method worth learning is the exit method The exit method processes the data items that have been removed dynamically from the data set d3 selectAll li data 10 20 exit remove This short code sample removes two items from the data set and its corresponding li elements using the exit and remove methods DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body style height 120pt ul id list li li li li ul button onclick remove Remove button script let dset 10 20 30 40 50 60 d3 select list selectAll li data dset text function d return pre existing d enter append li text function d return dynamically created d function remove new data set 3 items dset 10 20 30 d3 selectAll li data 30 30 40 exit remove script body html Data Join Methods The four main methods for data joining are datum data enter exit datum Method The datum method is used to set values for a single element You use it once for the element you ve selected using the selectors For instance you can select an existing element h1 tag using the select method and then set the data using the datum method Once the data is set you can either update change the text of the selected element or add new elements and assign text using the data set by the datum method DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body style height 60pt p Cats like Mice p div Dogs like Cats div script d3 select p datum 10 text function d return Existing P data d d3 select div datum 50 append p text function d return New P data d script body html data Method The data method is used to assign a data set to a collection of HTML elements After you ve selected the element you use the data method to assign the data As demonstrated earlier with the li tag d3 selectAll li data 10 20 30 40 enter Method The enter method outputs the set of data items for which no graphical element exists For instance in the example where you assigned the data set to an existing list of li tags the data set items that didn t get assigned were retrieved using the enter method d3 select list selectAll li data 10 20 30 40 enter append li text function d appended d exit Method The exit method outputs the set of graphic elements for which no data exists e g either not assigned or has been removed d3 selectAll li data 10 20 new data set exit identify the elements with no data remove remove these items Data Function Certain methods such as style and text normally take constant input parameters In the context of data join the methods take anonymous functions as a parameter The anonomous ufnction takes corresponding dadat and the index of the data set assigned using the data method This anonymous funciton is called for each data value bound to the DOM For example text function d i return d Inside this function you can apply any logic to manipulate or access the data These anonymous functions meaning that there is no name associated with the function Other than the data d and index i parameters you can access the current object using the this keyword text function d i console log d data element console log i data index console log this current DOM return d Let s look at a working example DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body style height 90pt p p p p p p script let mydata 3 4 5 6 7 d3 selectAll p data mydata text function d i console log d d console log i i console log this this return Index i Data d this this script body html In the above example the parameter d gives you your data element i gives you the index of the data and this is a references to the current DOM element For the above code this is a HTMLParagraphElement since you selected p tags Data Types Just to note in the simple examples earlier a basic array of numbers was used however you can also use more complicated data structure for example array of objects key value pairs let mydata text test color blue y 20 text abc color red y 100 DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body style height 90pt p p p p script let mydata text test color blue y 20 text abc color red y 100 d3 selectAll p data mydata text function d i this style color d color return d text script body html
he datum method is used to set values for a single element You use it once for the element you ve selected using the selectors For instance you can select an existing element h1 tag using the select method and then set the data using the datum method Once the data is set you can either update change the text of the selected element or add new elements and assign text using the data set by the datum method DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body style height 60pt p Cats like Mice p div Dogs like Cats div script d3 select p datum 10 text function d return Existing P data d d3 select div datum 50 append p text function d return New P data d script body html data Method The data method is used to assign a data set to a collection of HTML elements After you ve selected the element you use the data method to assign the data As demonstrated earlier with the li tag d3 selectAll li data 10 20 30 40 enter Method The enter method outputs the set of data items for which no graphical element exists For instance in the example where you assigned the data set to an existing list of li tags the data set items that didn t get assigned were retrieved using the enter method d3 select list selectAll li data 10 20 30 40 enter append li text function d appended d exit Method The exit method outputs the set of graphic elements for which no data exists e g either not assigned or has been removed d3 selectAll li data 10 20 new data set exit identify the elements with no data remove remove these items Data Function Certain methods such as style and text normally take constant input parameters In the context of data join the methods take anonymous functions as a parameter The anonomous ufnction takes corresponding dadat and the index of the data set assigned using the data method This anonymous funciton is called for each data value bound to the DOM For example text function d i return d Inside this function you can apply any logic to manipulate or access the data These anonymous functions meaning that there is no name associated with the function Other than the data d and index i parameters you can access the current object using the this keyword text function d i console log d data element console log i data index console log this current DOM return d Let s look at a working example DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body style height 90pt p p p p p p script let mydata 3 4 5 6 7 d3 selectAll p data mydata text function d i console log d d console log i i console log this this return Index i Data d this this script body html In the above example the parameter d gives you your data element i gives you the index of the data and this is a references to the current DOM element For the above code this is a HTMLParagraphElement since you selected p tags Data Types Just to note in the simple examples earlier a basic array of numbers was used however you can also use more complicated data structure for example array of objects key value pairs let mydata text test color blue y 20 text abc color red y 100 DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body style height 90pt p p p p script let mydata text test color blue y 20 text abc color red y 100 d3 selectAll p data mydata text function d i this style color d color return d text script body html