React + D3.js

When I visualize data on the web, my current favorite environment is using D3.js inside of a React.js application.

What is React.js?

tap me for more details

ἰ

React.js is a JavaScript library that helps with building complex user interfaces. This website is written using React!

I would recommend being familiar with React for this article. It might be worth running through the official tutorial or running through a book (I've heard good things about this one) to make sure you don't stumble on anything in here!

What is D3.js?

tap me for more details

ἰ

D3.js is the de facto library for visualizing data in the browser. It's basically just a collection of utility methods, but the API is enormous! To get a birds-eye view of the API, check out my post on How to Learn D3.js.

D3.js is notorious for being hard to learn. If you're interested in learning or solidifying your knowledge, I tried to distill my knowledge into Fullstack Data Visualization and D3.js. Plus, the first chapter is free!

These two technologies are notoriously tricky to combine. The crux of the issue is that they both want to handle the DOM.

Let's start at the beginning, shall we?

When visualizing data in the browser, we'll usually want to work with SVG elements, since they're much more expressive and are absolutely positioned.

To start, we'll just render a simple <svg> element.

Svg.jsx

const Svg = () => {
  return (
    <svg style={{
      border: "2px solid gold"
    }} />
  )
}

We've added a gold border so we can see our <svg> element.

Easy as 🥧, right?

To visualize data, we'll want to represent data points as shapes. Let's start with a simple basic shape: a <circle>.

Circle.jsx (d3 version)

1.
const Circle = () => {
2.
  const ref = useRef()
3.
4.
  useEffect(() => {
5.
    const svgElement = d3.select(ref.current)
6.
    svgElement.append("circle")
7.
      .attr("cx", 150)
8.
      .attr("cy", 70)
9.
      .attr("r",  50)
10.
  }, [])
11.
12.
  return (
13.
    <svg
14.
      ref={ref}
15.
    />
16.
  )
17.
}

Our component does a few new things:

1.
uses a ref to store a reference to our rendered <svg> element
2.
runs d3 code when the Component mounts
3.
uses d3.select() to turn our ref into a d3 selection object
4.
uses our d3 selection object to append a <circle> element

But this is quite a lot of code to draw a single shape, isn't it? And aren't we supposed to use React refs as sparingly as possible?

Avoid using refs for anything that can be done declaratively.
the React docs

Thankfully, all SVG elements have been supported in JSX since React v15. Which means that creating a <circle> element is as easy as...

Circle.jsx (React version)

const Circle = () => {
  return (
    <svg>
      <circle
        cx="150"
        cy="77"
        r="40"
      />
    </svg>
  )
}

What are the benefits of using standard JSX instead of running d3 code on mount?

Declarative instead of imperative
The code describes what is being drawn, instead of how to draw it.
Less code
Our second Circle component has fewer than two-thirds the number of lines as our first iteration/
Less hacky
React is, chiefly, a rendering library, and has many optimizations to keep our web apps performant. When adding elements using d3, we're hacking around React, and essentially have to fight against those optimizations. Hacking around your JS framework is a recipe for future frustration, especially if the framework's API changes.

This is all well and good, but what about rendering many elements?

One of the core concepts of d3.js is binding data to DOM elements.

Let's generate a dataset of 10 random [x, y] coordinates.

How are we generating this data?

tap me for more details

ἰ

We've created a generateDataset() function that outputs an array of 10 arrays.

const generateDataset = () => (
  Array(10).fill(0).map(() => ([
    Math.random() * 80 + 10,
    Math.random() * 35 + 10,
  ]))
)

[

[70.12,44.62],

[77.11,26.51],

[89.55,27.84],

[83.61,22.44],

[46.94,35.59],

[74.45,18.05],

[81.55,34.21],

[45.72,41.19],

[51.34,15.75],

[72.77,41.65],

]

const generateDataset = () => (
  Array(10).fill(0).map(() => ([
    Math.random() * 80 + 10,
    Math.random() * 35 + 10,
  ]))
)

What would it look like if we drew a <circle> at each of these locations? Starting with the naive d3 code:

Circles.jsx (d3 version)

1.
const Circles = () => {
2.
  const [dataset, setDataset] = useState(
3.
    generateDataset()
4.
  )
5.
  const ref = useRef()
6.
7.
  useEffect(() => {
8.
    const svgElement = d3.select(ref.current)
9.
    svgElement.selectAll("circle")
10.
      .data(dataset)
11.
      .join("circle")
12.
        .attr("cx", d => d[0])
13.
        .attr("cy", d => d[1])
14.
        .attr("r",  3)
15.
  }, [dataset])
16.
17.
  useInterval(() => {
18.
    const newDataset = generateDataset()
19.
    setDataset(newDataset)
20.
  }, 2000)
21.
22.
  return (
23.
    <svg
24.
      viewBox="0 0 100 50"
25.
      ref={ref}
26.
    />
27.
  )
28.
}

This code looks very similar to our previous code, with two changes:

1.
We're creating a selection of all <circle> elements and using our d3 selection's .join() method to add a circle for each data point
2.
We're re-running our d3 code whenever dataset changes
3.
We're using useInterval() (from the end of Thinking in React Hooks) to re-calculate our dataset every two seconds

Note that <svg>s are, by default, 300px x 150px - in this case, we're using the viewBox element to re-define our working grid, just so we can use friendlier numbers.

Okay, we're back to our original issues: our code is a bit imperative, verbose, and hacky. What would this look like using React to render our <circle>s?

Circles.jsx (React version)

1.
const Circles = () => {
2.
  const [dataset, setDataset] = useState(
3.
    generateDataset()
4.
  )
5.
6.
  useInterval(() => {
7.
    const newDataset = generateDataset()
8.
    setDataset(newDataset)
9.
  }, 2000)
10.
11.
  return (
12.
    <svg viewBox="0 0 100 50">
13.
      {dataset.map(([x, y], i) => (
14.
        <circle
15.
          cx={x}
16.
          cy={y}
17.
          r="3"
18.
        />
19.
      ))}
20.
    </svg>
21.
  )
22.
}

Much clearer! In this code, we're...

1.
Looping over each data point, and
2.
rendering a <circle at [x, y]

But d3 is great at animating enter and exit transitions!
you, probably

We all know that d3 is great at keeping track of what elements are new and animating elements in and out. And if you don't you should read a book.

Let's look at an example with transitions:

Transitions.jsx (d3 version)

1.
const AnimatedCircles = () => {
2.
  const [visibleCircles, setVisibleCircles] = useState(
3.
    generateCircles()
4.
  )
5.
  const ref = useRef()
6.
7.
  useInterval(() => {
8.
    setVisibleCircles(generateCircles())
9.
  }, 2000)
10.
11.
  useEffect(() => {
12.
    const svgElement = d3.select(ref.current)
13.
    svgElement.selectAll("circle")
14.
      .data(visibleCircles, d => d)
15.
      .join(
16.
        enter => (
17.
          enter.append("circle")
18.
              .attr("cx", d => d * 15 + 10)
19.
              .attr("cy", 10)
20.
              .attr("r", 0)
21.
              .attr("fill", "cornflowerblue")
22.
            .call(enter => (
23.
              enter.transition().duration(1200)
24.
                .attr("cy", 10)
25.
                .attr("r", 6)
26.
                .style("opacity", 1)
27.
            ))
28.
        ),
29.
        update => (
30.
          update.attr("fill", "lightgrey")
31.
        ),
32.
        exit => (
33.
          exit.attr("fill", "tomato")
34.
            .call(exit => (
35.
              exit.transition().duration(1200)
36.
                .attr("r", 0)
37.
                .style("opacity", 0)
38.
                .remove()
39.
            ))
40.
        ),
41.
      )
42.
  }, [dataset])
43.
44.
  return (
45.
    <svg
46.
      viewBox="0 0 100 20"
47.
      ref={ref}
48.
    />
49.
  )
50.
}

Wow, this is a lot of code!

Don't feel the need to run through all of it -- the gist is that we have 6 <circle>s, and every two seconds, we randomly choose some of them to show up.

1.
circles that are new are animated in in blue,
2.
circles that stay for multiple rounds turn grey,
3.
circles that aren't in the new round are animated out in red,

Okay, so we can see that this code is hard to scan, but how would we implement this using React?

Transitions.jsx (d3 version)

1.
const AnimatedCircles = () => {
2.
  const [visibleCircles, setVisibleCircles] = useState(
3.
    generateCircles()
4.
  )
5.
6.
  useInterval(() => {
7.
    setVisibleCircles(generateCircles())
8.
  }, 2000)
9.
10.
  return (
11.
    <svg viewBox="0 0 100 20">
12.
      {allCircles.map(d => (
13.
        <AnimatedCircle
14.
          key={d}
15.
          index={d}
16.
          isShowing={visibleCircles.includes(d)}
17.
        />
18.
      ))}
19.
    </svg>
20.
  )
21.
}
22.
23.
const AnimatedCircle = ({ index, isShowing }) => {
24.
  const wasShowing = useRef(false)
25.
26.
  useEffect(() => {
27.
    wasShowing.current = isShowing
28.
  }, [isShowing])
29.
30.
  const style = useSpring({
31.
    config: {
32.
      duration: 1200,
33.
    },
34.
    r: isShowing ? 6 : 0,
35.
    opacity: isShowing ? 1 : 0,
36.
  })
37.
38.
  return (
39.
    <animated.circle {...style}
40.
      cx={index * 15 + 10}
41.
      cy="10"
42.
      fill={
43.
        !isShowing          ? "tomato" :
44.
        !wasShowing.current ? "cornflowerblue" :
45.
                              "lightgrey"
46.
      }
47.
    />
48.
  )
49.
}

Animating elements out is not very straightforward in React, so let's keep all of the <circle>s rendered, and give them an opacity if they're not in the currently shown circles.

In this code, we:

1.
loop over our allCircles array and create a <AnimatedCircle> for each item,
2.
define a AnimatedCircle component that takes to props: index (for positioning), and isShowing
3.
cache the last isShowing value, so we can see whether the <circle> is entering or exiting
4.
use the useSpring hook from react-spring to animate the <circle>'s radius and opacity
5.
use animated from react-spring to animate our <circle>'s and spread our animated values as element attributes

While this code isn't necessarily much shorter than the d3 code, it is a lot easier to read.

The d3.js API is expansive, and we can become reliant on it to do the heavy lifting for us. Especially with the several methods that will create several DOM elements for us.

For example, the .axisBottom() method will create a whole chart axis in one line of code!

Axis.jsx (d3 version)

1.
const Axis = () => {
2.
  const ref = useRef()
3.
4.
  useEffect(() => {
5.
    const xScale = d3.scaleLinear()
6.
      .domain([0, 100])
7.
      .range([10, 290])
8.
9.
    const svgElement = d3.select(ref.current)
10.
    const axisGenerator = d3.axisBottom(xScale)
11.
    svgElement.append("g")
12.
      .call(axisGenerator)
13.
  }, [])
14.
15.
  return (
16.
    <svg
17.
      ref={ref}
18.
    />
19.
  )
20.
}

So easy! All we need to do to create a bottom axis is:

1.
create a scale that converts from the data values (0 - 100) to the corresponding physical location (10px - 290px)
Not super familiar with scales?

Really understand them by working through Fullstack D3 and Data Visualization, or get the details in the technical docs
2.
store the <svg> element in a ref and create a d3 selection object containing it
3.
pass our scale to .axisBottom() to create an axisGenerator
4.
create a new <g> element to house our axis' DOM elements
5.
.call() our axisGenerator on our new <g> element. This is effectively the same as the expression:
const newG = svgElement.append("g")
axisGenerator(newG)
but it lets us keep the chain of d3 methods going

Well that was pretty easy, wasn't it? Unfortunately, we would prefer to keep things React-y (for all of the reasons mentioned above).

So if we can't use .axisBottom() to create our axis DOM elements, what can we do?

Axis.jsx (React version)

1.
const Axis = () => {
2.
  const ticks = useMemo(() => {
3.
    const xScale = d3.scaleLinear()
4.
      .domain([0, 100])
5.
      .range([10, 290])
6.
7.
    return xScale.ticks()
8.
      .map(value => ({
9.
        value,
10.
        xOffset: xScale(value)
11.
      }))
12.
  }, [])
13.
14.
  return (
15.
    <svg>
16.
      <path
17.
        d="M 9.5 0.5 H 290.5"
18.
        stroke="currentColor"
19.
      />
20.
      {ticks.map(({ value, xOffset }) => (
21.
        <g
22.
          key={value}
23.
          transform={`translate(${xOffset}, 0)`}
24.
        >
25.
          <line
26.
            y2="6"
27.
            stroke="currentColor"
28.
          />
29.
          <text
30.
            key={value}
31.
            style={{
32.
              fontSize: "10px",
33.
              textAnchor: "middle",
34.
              transform: "translateY(20px)"
35.
            }}>
36.
            { value }
37.
          </text>
38.
        </g>
39.
      ))}
40.
    </svg>
41.
  )
42.
}

While we don't want to use a d3 method that creates DOM elements (.axisBottom()), we can use the d3 methods that d3 uses internally to create axes!

1.
create a scale that converts from the data values (0 - 100) to the corresponding physical location (10px - 290px)
2.
use our d3 scale's .ticks() method
The .ticks() method of a scale will return an array of approximately 10 equally-spaced values that span the scale's domain. Learn more in the d3 docs.
Our xScale's .ticks() method will return:
[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
3.
map over our array of tick values and create an object that contains the value and xOffset (converted using xScale)
4.
create a <path> element that marks that top of our axis. It starts at [9, 0] and moves horizontally to [290, 0]
5.
for each of our ticks, we want to create a group that is shifted the appropriate number of pixels to the right.

Each of our groups will contain a tick <line> and <text> containing the tick value

Okay! So this is definitely more code. But that makes sense, since we're basically duplicating some of the d3 library code, in our own code base.

But here's the thing: our new code is way more readable - we know what elements we're rendering just by looking at the return statement. Plus, we can extract all of this logic into a single Axis component. This we we can customize it however we like, without having to think about this extra logic again.

What would a more re-useable Axis component look like?

Axis.jsx (React version)

1.
const Axis = ({
2.
  domain=[0, 100],
3.
  range=[10, 290],
4.
}) => {
5.
  const ticks = useMemo(() => {
6.
    const xScale = d3.scaleLinear()
7.
      .domain(domain)
8.
      .range(range)
9.
10.
    const width = range[1] - range[0]
11.
    const pixelsPerTick = 30
12.
    const numberOfTicksTarget = Math.max(
13.
      1,
14.
      Math.floor(
15.
        width / pixelsPerTick
16.
      )
17.
    )
18.
19.
    return xScale.ticks(numberOfTicksTarget)
20.
      .map(value => ({
21.
        value,
22.
        xOffset: xScale(value)
23.
      }))
24.
  }, [
25.
    domain.join("-"),
26.
    range.join("-")
27.
  ])
28.
29.
  return (
30.
    <svg>
31.
      <path
32.
        d={[
33.
          "M", range[0], 6,
34.
          "v", -6,
35.
          "H", range[1],
36.
          "v", 6,
37.
        ].join(" ")}
38.
        fill="none"
39.
        stroke="currentColor"
40.
      />
41.
      {ticks.map(({ value, xOffset }) => (
42.
        <g
43.
          key={value}
44.
          transform={`translate(${xOffset}, 0)`}
45.
        >
46.
          <line
47.
            y2="6"
48.
            stroke="currentColor"
49.
          />
50.
          <text
51.
            key={value}
52.
            style={{
53.
              fontSize: "10px",
54.
              textAnchor: "middle",
55.
              transform: "translateY(20px)"
56.
            }}>
57.
            { value }
58.
          </text>
59.
        </g>
60.
      ))}
61.
    </svg>
62.
  )
63.
}

Our Axis component will take two props: domain and range.

Try updating the props values:

domain:

[,]

range:

[,]

We really didn't have to make many changes here! Let's look at the main updates:

1.
we check the range to dynamically change the number of ticks that we're aiming for (which we can set by passing the number to .ticks()).
Note that .ticks() will aim for the passed number of ticks, but will also defer to friendlier, round numbers. For example, you could pass 10 but end up with 12 ticks.
We're aiming for one tick per 30 pixels, with a minimum of 1.
2.
we want to re-calculate our ticks when our props change. We want to pay attention to the values of our domain and range arrays, instead of the array reference, so we'll .join() them into a string.
For example, we want to check a string of "0-100" instead of a reference to the array [0, 100].
This will give us the ability to create the domain and range arrays within Axis's parent component.
3.
a small change, but potentially important. We'll add a duplicate first and last tick mark, in case our ticks don't cover the top or bottom of our domain.
For example, [0, 100] and [10, 150]
(click to update example)

Now, our Axis component really only works for axes at the bottom of a chart, at the moment. But hopefully this gives you enough of an idea of how easy it is to duplicate d3's axis drawing methods.

I use this method for recreating any d3 methods that create multiple elements. In addition to the usual benefits of using React to render elements (declarative and less hacky), I find that this code is easier for other developers who are less familiar with the d3 API to understand the code.

We truly get the best of both worlds, since the d3 API surfaces many of its internal methods.

Sizing charts can be tricky! Because we need to exactly position our data elements, we can't use our usual web development tricks that rely on responsive sizing of <div>s and <spans>.

If you've read through many d3.js examples, you'll know that there's a common way of sizing charts. This is the terminology I use in Fullstack D3 and Data Visualization:

top

right

bottom

left

wrapper
is the extent of the chart, and the dimensions of the <svg> element
bounds
contain the data elements, but exclude margins and legends
margins
determine the padding around the bounds

We need to separate our wrapper and bounds boxes because we need to know their exact dimensions when building a chart with <svg>.

ChartWithDimensions.jsx

1.
const chartSettings = {
2.
  "marginLeft": 75
3.
}
4.
const ChartWithDimensions = () => {
5.
  const [ref, dms] = useChartDimensions(chartSettings)
6.
7.
  const xScale = useMemo(() => (
8.
    d3.scaleLinear()
9.
    .domain([0, 100])
10.
    .range([0, dms.boundedWidth])
11.
  ), [dms.boundedWidth])
12.
13.
  return (
14.
    <div
15.
      className="Chart__wrapper"
16.
      ref={ref}
17.
      style={{ height: "200px" }}>
18.
      <svg width={dms.width} height={dms.height}>
19.
        <g transform={`translate(${[
20.
          dms.marginLeft,
21.
          dms.marginTop
22.
        ].join(",")})`}>
23.
          <rect
24.
            width={dms.boundedWidth}
25.
            height={dms.boundedHeight}
26.
            fill="lavender"
27.
          />
28.
          <g transform={`translate(${[
29.
            0,
30.
            dms.boundedHeight,
31.
          ].join(",")})`}>
32.
            <Axis
33.
              domain={xScale.domain()}
34.
              range={xScale.range()}
35.
            />
36.
          </g>
37.
        </g>
38.
      </svg>
39.
    </div>
40.
  )
41.
}
42.

Try updating the chartSettings values:

width:

—

height:

—

marginTop:

—

marginRight:

—

marginBottom:

—

marginLeft:

This example is a little complicated - let's walk through what's going on. The main parts to pay attention to here are where we...

1.
use a custom hook to calculate the dimensions of our wrapper and bounds (more on this in a bit)
Not very familiar with React Hooks? Read more in Thinking in React Hooks.
2.
use the dms object with the calculated dimensions to create an x scale
3.
use the React ref from our custom hook to pass a non-svg wrapping element that is the size we want our wrapper to be
4.
transform the main part of our chart to respect our top and left margins

Now that we have an idea of how we would use wrapper, bounds, and margins, let's look at what our custom hook is doing.

useChartDimensions.js

1.
import ResizeObserver from '@juggle/resize-observer'
2.
3.
const useChartDimensions = passedSettings => {
4.
  const ref = useRef()
5.
  const dimensions = combineChartDimensions(
6.
    passedSettings
7.
  )
8.
9.
  const [width, setWidth] = useState(0)
10.
  const [height, setHeight] = useState(0)
11.
12.
  useEffect(() => {
13.
      if (dimensions.width && dimensions.height)
14.
        return [ref, dimensions]
15.
16.
      const element = ref.current
17.
      const resizeObserver = new ResizeObserver(
18.
        entries => {
19.
          if (!Array.isArray(entries)) return
20.
          if (!entries.length) return
21.
22.
          const entry = entries[0]
23.
24.
          if (width != entry.contentRect.width)
25.
            setWidth(entry.contentRect.width)
26.
          if (height != entry.contentRect.height)
27.
            setHeight(entry.contentRect.height)
28.
        }
29.
      )
30.
      resizeObserver.observe(element)
31.
32.
      return () => resizeObserver.unobserve(element)
33.
  }, [])
34.
35.
  const newSettings = combineChartDimensions({
36.
      ...dimensions,
37.
      width: dimensions.width || width,
38.
      height: dimensions.height || height,
39.
  })
40.
41.
  return [ref, newSettings]
42.
}

When we pass a settings object to our custom useChartDimensions hook, it will...

1.
fill in missing margins with preset default values.
combineChartDimensions is a custom function
Expand to see what combineChartDimensions looks like
ἰ
1.
const combineChartDimensions = dimensions => {
2.
const parsedDimensions = {
3.
...dimensions,
4.
marginTop: dimensions.marginTop || 10,
5.
marginRight: dimensions.marginRight || 10,
6.
marginBottom: dimensions.marginBottom || 40,
7.
marginLeft: dimensions.marginLeft || 75,
8.
}
9.
10.
return {
11.
...parsedDimensions,
12.
boundedHeight: Math.max(
13.
parsedDimensions.height
14.
- parsedDimensions.marginTop
15.
- parsedDimensions.marginBottom,
16.
0,
17.
),
18.
boundedWidth: Math.max(
19.
parsedDimensions.width
20.
- parsedDimensions.marginLeft
21.
- parsedDimensions.marginRight,
22.
0,
23.
),
24.
}
25.
}
2.
defer to the passed height and width, if specified in the passedSettings
3.
use a ResizeObserver to re-calculate the dimensions when the passed element changes size
ResizeObserver is currently not supported in all browsers, so we're using this resize-observer polyfill to make sure this works in all browsers.
4.
grab the height and width of a containing <div> for our wrapper dimensions
5.
calculate the dimensions of our bounds (named boundedHeight and boundedWidth)

Note that any settings that we don't set are being filled in automatically. For example, we can specify a specific height, or let useChartDimensions grab the value from the wrapping element, using the React ref.

Hopefully this gives you an idea of how to handle chart dimensions in a responsive, easy way. Feel free to grab my custom useChartDimensions hook — I really enjoy having my wrapper, bounds, and margins calculated, with a simple one-liner.

So you've seen awesome examples of people using d3 to create detailed maps, and globes that you can spin around. And you want to do that, too.

Worry not! We can let d3 do a lot of the heavy lifting, and have a map in no time! First, let's look at our map! Try changing the projection, d3 comes with tons of fun options:

Map.jsx

1.
const Map = ({ projectionName = "geoArmadillo" }) => {
2.
  // grab our custom React hook we defined above
3.
  const [ref, dms] = useChartDimensions({})
4.
5.
  // this is the definition for the whole Earth
6.
  const sphere = { type: "Sphere" }
7.
8.
  const projectionFunction = d3[projectionName]
9.
    || d3GeoProjection[projectionName]
10.
  const projection = projectionFunction()
11.
    .fitWidth(dms.width, sphere)
12.
  const pathGenerator = d3.geoPath(projection)
13.
14.
  // size the svg to fit the height of the map
15.
  const [
16.
    [x0, y0],
17.
    [x1, y1]
18.
  ] = pathGenerator.bounds(sphere)
19.
  const height = y1
20.
21.
  return (
22.
    <div
23.
      ref={ref}
24.
      style={{
25.
        width: "100%",
26.
      }}
27.
    >
28.
      <svg width={dms.width} height={height}>
29.
        <defs>
30.
{/* some projections bleed outside the edges of the Earth's sphere */}
31.
{/* let's create a clip path to keep things in bounds */}
32.
          <clipPath id="Map__sphere">
33.
            <path d={pathGenerator(sphere)} />
34.
          </clipPath>
35.
        </defs>
36.
37.
        <path
38.
          d={pathGenerator(sphere)}
39.
          fill="#f2f2f7"
40.
        />
41.
42.
        <g style={{ clipPath: "url(#Map__sphere)" }}>
43.
          {/* we can even have graticules! */}
44.
          <path
45.
            d={pathGenerator(d3.geoGraticule10())}
46.
            fill="none"
47.
            stroke="#fff"
48.
          />
49.
50.
          {countryShapes.features.map((shape) => {
51.
            return (
52.
              <path
53.
                key={shape.properties.subunit}
54.
                d={pathGenerator(shape)}
55.
                fill="#9980FA"
56.
                stroke="#fff"
57.
              >
58.
                <title>
59.
                  {shape.properties.name}
60.
                </title>
61.
              </path>
62.
            )
63.
          })}
64.
        </g>
65.
      </svg>
66.
    </div>
67.
  )
68.
}

There's a good amount of code in here, but really not much to create a whole map! Let's run through the highlights:

1.
First, we need to create a projection. This is our map between our country shape definitions and the way we draw those 3D shapes on our 2D screen.
We'll use the .fitWidth() method to size our map within the width of our component, and also create a pathGenerator to generate path definitions for our Earth & country shapes using d3.geoPath().
2.
Next, we'll find the dimensions of the whole Earth (sphere) in our projection, and assign the height of our svg to the height of the sphere.
3.
Some projections' shapes bleed outside of the edges of the Earth, so we'll keep them in bounds using a clipPath.
4.
We can use our pathGenerator function to turn GeoJSONshape definitions into <path> d attribute strings. First, we'll draw the whole Earth in a light gray.
5.
d3-geo has some great methods, like d3.geoGraticule10() which will help us draw graticule lines for reference.
6.
Last but not least, we'll draw our country shapes! We can draw different types of geographic shapes by passing GeoJSON definitions to our pathGenerator function. For example, we're importing a list of country definitions, then creating <path> elements with their shape.

Once you get the basics down, this is a really flexible way to draw geography! The trick is to think of d3 as a series of tools.

I'll usually draw maps using Canvas, since rendering lots of SVG elements can get slow, and maps often have tons of shapes.

If you want an example of Canvas rendering, as well as drawing bubbles on top of countries to visualize a metric, check out this Svelte recipe. The code is in Svelte.js, but most of it will translate to React! Especially the drawCanvas function.

We're through with the basics! We've covered:

how to draw svg elements
how to draw many svg elements
how to replicate built-in d3 methods for drawing complex elements like axes
how to size our charts easily
how to draw maps!

From my experience, the most important rule is to know your tools. Once you're comfortable with drawing with SVG, using d3 as a utility library, and building React.js code, you'll truly be able to make whatever you can imagine. This is the beauty of learning the fundamentals, instead of just grabbing a chart library -- it's a lot more work to learn, but is way more powerful.

For inspiration, here are some more custom visualizations I've put together: