How to get started with D3 and React

"highTemperature" : "lowTemperature" }.

Animating with transitionsFinally, D3 makes animating transitions easy.

We could change text color to red.

d3.

select(this.

ref.

descr) .

transition() .

style("background-color", "red");render(<p ref="descr"></p>)We can modify the animation to happen after 1 second using .

duration(1000).

We can also use functions together with transitions.

For example, we can make our elements to appear in a staggered transition.

The following example from the D3 documentation makes circles appear one at a time, using a delay() function that takes dataPoint and iteration as parameters, and returns the iteration multiplied by 10.

Iteration refers to the position of the datapoint in the list of data.

d3.

selectAll("circle").

transition() .

duration(750) .

delay(function(dataPoint, iteration) => iteration * 10) .

attr("r", (dataPoint) => Math.

sqrt(d * scale))Our first chartLet’s create a new component.

Create a new file, called BarChart.

js.

Modify App.

js to look like this.

import React from Reactimport BarChart from '.

/BarChart'const App = () => { return ( <BarChart /> )}Paste the following boilerplate into BarChart.

js.

Call npm start to start the app.

import React, { Component } from 'react'import * as d3 from 'd3'class BarChart extends Component { componentDidMount() { const data = [ 2, 4, 2, 6, 8 ] this.

drawBarChart(data) } drawBarChart(data) {} render() { return <div ref="canvas"></div> }}export default BarChartWe have a set of dummy data, which we pass to the drawing function as a parameter.

From now on, we’ll be working inside drawBarChart().

First, select the div with the reference canvas.

Inside drawBarChart(), we append a svg element inside the div we referenced.

We set the svg to have a with of 600, a height of 400 and a black border.

You should see this empty box appear on the page.

const svgCanvas = d3.

select(this.

refs.

canvas) .

append(“svg”) .

attr(“width”, 600) .

attr(“height”, 400) .

style(“border”, “1px solid black”)An empty SVG element with a black border.

Next, we need some bars on our bar chart.

We select all rect elements, or rectangles, of the svg.

Then we append the data to the rectangles and use enter to step into the data.

For each data in the element, we append a rectangle with a width of 40 and the height of the datapoint value multiplied by 20.

svgCanvas.

selectAll(“rect”) .

data(data).

enter() .

append(“rect”) .

attr(“width”, 40) .

attr(“height”, (datapoint) => datapoint * 20) .

attr(“fill”, “orange”)After appending the rectangles with data to the SVG.

Wait, why does it look like we only have one rectangle?.Since we didn’t specify where on the svg the rectangle should appear, they all piled up at 0, 0.

Let’s add the x and y positions to them.

Let’s also refactor the code to keep the canvas width, height and the scale of the bars in variables.

drawBarChart(data) {const canvasHeight = 400const canvasWidth = 600const scale = 20const svgCanvas = d3.

select(this.

refs.

canvas) .

append(“svg”) .

attr(“width”, canvasWidth) .

attr(“height”, canvasHeight) .

style(“border”, “1px solid black”)svgCanvas.

selectAll(“rect”) .

data(data).

enter() .

append(“rect”) .

attr(“width”, 40) .

attr(“height”, (datapoint) => datapoint * scale) .

attr(“fill”, “orange”) .

attr(“x”, (datapoint, iteration) => iteration * 45) .

attr(“y”, (datapoint) => canvasHeight — datapoint * scale)}Now we set the position x to the iteration multiplied by 45, which is 5 wider than the column width, leaving a small gap between the columns.

The y position is a bit trickier.

We set it to the canvas height minus the height of the bar, which is the datapoint value multiplied by 20.

Now our chart looks like this.

After setting the x and y positions of the rectangles.

To give our bars a final touch, let’s add the data point values to the bars.

We append some text elements to the svg and set their x-attribute 10 units greater than each bars starting point.

We set the y-attribute to be 10 units less than the starting point of the bar.

svgCanvas.

selectAll(“text”) .

data(data).

enter() .

append(“text”) .

attr(“x”, (dataPoint, i) => i * 45 + 10) .

attr(“y”, (dataPoint, i) => canvasHeight – dataPoint * scale – 10) .

text(dataPoint => dataPoint)Adding text labels to our bars.

Now the texts sit just above the bars.

You can continue working with the chart, adding styles (using .

attr("class", "bar") and adding a CSS file.

You can also add an axis to the chart and add a tooltip when mousing over the bar.

Get creative and enjoy!Working with D3 can seem difficult in the beginning.

Once you get the basics down it becomes a powerful tool to express and visualize data.

I recommend using D3 over picking a ready-made chart library, since it allows for more personal and modifiable pieces.

Finally, learning D3 is also a good way of getting fluent at traversing and manipulating the DOM.

Understanding the DOM is often a quality interviewers look for in front end developers.

Resources:D3 Tutorials suggested by D3React tutorial from the React documentation.. More details

Leave a Reply