d3

Data Binding

D3 allows you to bind data to the DOM (Document Object Model), and then apply data-driven transformations to the document. In this code sample, we select paragraph elements and bind them to an array of numbers, setting their text content to the bound data.

const data = [1, 2, 3, 4];
const p = d3.select('body').selectAll('p').data(data).text(d => d);

Creating and Manipulating SVG

D3 can create and manipulate SVG elements for complex visualizations. This code sample creates an SVG element and appends a blue circle to it.

const svg = d3.select('body').append('svg').attr('width', 100).attr('height', 100);
svg.append('circle').attr('cx', 50).attr('cy', 50).attr('r', 40).style('fill', 'blue');

Dynamic Properties and Transitions

D3 makes it easy to apply dynamic styles and transitions to elements. Here, all circles in the document are transitioned to a red fill color over 750 milliseconds.

d3.selectAll('circle').transition().duration(750).style('fill', 'red');

Data-Driven Document Transformations

D3 can load external data sources like CSV files and use them to drive document transformations. In this example, data from a CSV file is used to create and append paragraph elements to the body of the document.

d3.csv('data.csv').then(data => {
  d3.select('body').selectAll('p').data(data).enter().append('p').text(d => d.value);
});

Interactivity and Event Handling

D3 provides powerful event handling for interactive visualizations. This code sample adds a click event listener to all paragraph elements, changing their background color to yellow when clicked.

d3.select('body').selectAll('p').on('click', function(event, d) {
  d3.select(this).style('background-color', 'yellow');
});