Battle for the DOM

d3 vs react

Danielle Carrick

@DanieC

React Rally Talk

Data Visualizer

Basic Gist

React

d3

What's d3

How does it work?

const update = (data)=>{
  var body = d3.select('body')
  // JOIN new data with old elements, if they exist
  var text = body.selectAll("p").data(data);
  
  // UPDATE old elements as needed
  text.attr("class", "update");
  
  // ENTER - create new elements as needed
  text
    .enter()
    .append("p")
    .attr("class", "enter")
    // UPDATE - update already existing elements 
    .merge(text)
    .text(d => d);
  
  // EXIT - remove old elements as needed
  text.exit().remove();
}


update(['a','b','c'])

update(['a','b','c','d'])

Danielle's Conclusion

Made with Slides.com