126 |
135 |
143 |
144 | );
145 | };
146 |
147 | export default HexAtlas;
148 |
--------------------------------------------------------------------------------
/src/Patterns/HexMap/Util/useResizeObserver.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import ResizeObserver from 'resize-observer-polyfill';
3 |
4 | const useResizeObserver = (
5 | ref: React.MutableRefObject
29 |
60 | );
61 | };
62 |
63 | export default JustD3;
64 |
--------------------------------------------------------------------------------
/src/Patterns/HexMap/styles/colours.tsx:
--------------------------------------------------------------------------------
1 | export const COLOUR_BRAND = "#cb862b"
2 | export const COLOUR_SECONDARY = "#5781CB"
3 | export const COLOUR_DARK = "#282927"
4 | export const COLOUR_SUBTLE = "#184240"
5 | export const COLOUR_ACCENT = "#A1A1A1"
6 | export const COLOUR_LIGHT = "#F4F4F4"
7 |
8 | export const COLOUR_DAT_BLUE1 = "#4E79A7"
9 | export const COLOUR_DAT_BLUE2 = "#789AC0"
10 | export const COLOUR_DAT_BLUE3 = "#A5BCD5"
11 | export const COLOUR_DAT_BLUE4 = "#D2DDEA"
12 |
13 | export const COLOUR_DAT_ORANGE1 = "#F28E2C"
14 | export const COLOUR_DAT_ORANGE2 = "#F5AA61"
15 | export const COLOUR_DAT_ORANGE3 = "#F9C796"
16 | export const COLOUR_DAT_ORANGE4 = "#FCE3CA"
17 |
18 | export const COLOUR_DAT_RED1 = "#E15759"
19 | export const COLOUR_DAT_RED2 = "#E98182"
20 | export const COLOUR_DAT_RED3 = "#F0ABAC"
21 | export const COLOUR_DAT_RED4 = "#F8D5D5"
22 |
23 | export const COLOUR_DAT_GREEN1 = "#76B7B2"
24 | export const COLOUR_DAT_GREEN2 = "#98C9C5"
25 | export const COLOUR_DAT_GREEN3 = "#BBDBD9"
26 | export const COLOUR_DAT_GREEN4 = "#DDEDEC"
--------------------------------------------------------------------------------
/src/Patterns/HigherOrderComponent/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function HigherOrderComponent() {
4 | return (
5 |
30 |
32 |
33 |
59 | Hex Atlas
34 |35 | This is a pretty cool example of using not only D3 to control the svg 36 | in the virtual DOM, but also to create a canvas elements and then pass 37 | that ref so that the context2d can be used too. By setting the canvas 38 | to position absolute and then using the useResizeObserver to match its 39 | dimensions to the SVG, I was able to use it in the background without 40 | having to show it. 41 |
42 |43 | The code works in that the HexAtlas takes the world topo data from the 44 | useWorldAtlas hook as well as an array of countries and values. The 45 | countries are matched with their M49 code which can be used with the 46 | atlas to select specific countries by their id. 47 |
48 |
49 | The magic happens in the hex_points() where the context
50 | from the canvasRef is used to draw the map and the use the
51 | context.isPointInPath() to match any{' '}
52 | hexbin.center() and filter out the others. By calling
53 | this funtions with an array of M49 codes, we can alternate between the
54 | full map or just parts of it. This allows D3 to render differnt
55 | versions of the hexagons and manipulate the attr such as colour for
56 | data visualizations.
57 |
6 |
7 |
8 | )
9 | }
10 |
11 | export default HigherOrderComponent
12 |
--------------------------------------------------------------------------------
/src/Patterns/JustD3/Charts/BarChart.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | axisBottom,
3 | axisLeft,
4 | curveBasis,
5 | extent,
6 | line,
7 | scaleBand,
8 | scaleLinear,
9 | scaleLog,
10 | scaleTime,
11 | select,
12 | } from 'd3';
13 | import React, { useEffect, useRef } from 'react';
14 | import useResizeObserver from '../Util/useResizeObserver';
15 |
16 | interface Props {
17 | data: Array<
18 | Array<{ date: Date; population: number; country: string; code: string }>
19 | >;
20 | selected: string | null;
21 | onSelect: React.Dispatch
94 |
98 |
99 | );
100 | };
101 |
102 | export default BarChart;
103 |
--------------------------------------------------------------------------------
/src/Patterns/JustD3/Charts/LineChart.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | axisBottom,
3 | axisLeft,
4 | curveBasis,
5 | extent,
6 | line,
7 | scaleLinear,
8 | scaleLog,
9 | scaleTime,
10 | select,
11 | } from 'd3';
12 | import React, { useEffect, useRef } from 'react';
13 | import useResizeObserver from '../Util/useResizeObserver';
14 |
15 | interface Props {
16 | data: Array<
17 | Array<{ date: Date; population: number; country: string; code: string }>
18 | >;
19 | selected: string | null;
20 | }
21 |
22 | const LineChart: React.FC
136 |
140 |
141 | );
142 | };
143 |
144 | export default LineChart;
145 |
--------------------------------------------------------------------------------
/src/Patterns/JustD3/Charts/WorldMap.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | axisBottom,
3 | axisLeft,
4 | curveBasis,
5 | extent,
6 | geoGraticule,
7 | geoNaturalEarth1,
8 | geoPath,
9 | line,
10 | scaleLinear,
11 | scaleLog,
12 | scaleTime,
13 | select,
14 | } from 'd3';
15 | import React, { useEffect, useRef } from 'react';
16 | import useResizeObserver from '../Util/useResizeObserver';
17 |
18 | interface Props {
19 | worldAtlas: {
20 | land: any;
21 | countries: any;
22 | interiors: any;
23 | } | null;
24 | selected: string | null;
25 | onSelect: React.Dispatch
94 |
98 |
99 | );
100 | };
101 |
102 | export default WorldMap;
103 |
--------------------------------------------------------------------------------
/src/Patterns/JustD3/Dashboard.tsx:
--------------------------------------------------------------------------------
1 | import { DSVRowArray, timeParse } from 'd3';
2 | import React, { useState } from 'react';
3 | import BarChart from './Charts/BarChart';
4 | import LineChart from './Charts/LineChart';
5 | import WorldMap from './Charts/WorldMap';
6 | import { useCSVData } from './Util/useCSVData';
7 | import { useWorldAtlas } from './Util/useWorldAtlas';
8 |
9 | const parseYear = timeParse('%Y');
10 |
11 | const Dashboard = () => {
12 | const [selected, setSelected] = useStateLoading...; 36 | 37 | console.log(selected); 38 | return ( 39 |
40 |
48 | );
49 | };
50 |
51 | export default Dashboard;
52 |
--------------------------------------------------------------------------------
/src/Patterns/JustD3/Util/useCSVData.tsx:
--------------------------------------------------------------------------------
1 | import { csv, DSVRowArray } from 'd3';
2 | import { useEffect, useState } from 'react';
3 |
4 | export const useCSVData = (
5 | url: string,
6 | transform: (rawRow: DSVRowArray
15 |
57 | );
58 | };
59 |
60 | export default JustD3;
61 |
--------------------------------------------------------------------------------
/src/Patterns/RenderProps/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function RenderProps() {
4 | return (
5 |
16 |
18 |
19 |
56 | Just D3 Pattern
20 |
21 | With the Just D3 Pattern we break the specific D3
22 | charts up into their own component and then using{' '}
23 | useEffect() and useRef() allow D3 to control
24 | a specific SVG element and then construct the chart in the same way it
25 | would be done in JS. With Typescript there are some odd moments and
26 | the need to create more safe fall backs for the charts, but it works
27 | quite closely to examples you can find in ObservableHQ or bl.ocks.org
28 |
30 | The file structure for this pattern is pretty easy. Basically, there
31 | is one top level component Dashboard.tsx which handles
32 | the data fetching and state management. Then each chart is self
33 | contained in its own file with various helper functions usually in a{' '}
34 | Util folder. After building several graphs I end up with
35 | a colder filled with various charts that are each customized to the
36 | specific data and visualizations. Though its easy to fork these into
37 | other projects and adapt them to other forms, they are ultimately not
38 | very generic or flexible.
39 |
41 |
42 | {`JustD3
43 | --Charts
44 | ----BarChart.tsx
45 | ----LineChart.tsx
46 | ----WorldMap.tsx
47 | --Util
48 | ----useData.tsx
49 | ----useResizeObserver.tsx
50 | ----useWorldAtlas.tsx
51 | --Dashboard.tsx
52 | --index.tsx`}
53 |
54 |
55 |
6 |
7 |
8 | )
9 | }
10 |
11 | export default RenderProps
12 |
--------------------------------------------------------------------------------
/src/Patterns/WithComponents/Axis/XTimeAxis.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement } from 'react'
2 |
3 | interface Props {
4 |
5 | }
6 |
7 | const XTimeAxis = ({}: Props): ReactElement =>{
8 | return (
9 |
10 |
11 |
12 | )
13 | }
14 |
15 | export default XTimeAxis
16 |
17 |
--------------------------------------------------------------------------------
/src/Patterns/WithComponents/Charts/BarChart.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | axisBottom,
3 | axisLeft,
4 | curveBasis,
5 | extent,
6 | line,
7 | scaleBand,
8 | scaleLinear,
9 | scaleLog,
10 | scaleTime,
11 | select,
12 | } from 'd3';
13 | import React, { useEffect, useRef } from 'react';
14 | import useResizeObserver from '../Util/useResizeObserver';
15 |
16 | interface Props {
17 | data: Array<
18 | Array<{ date: Date; population: number; country: string; code: string }>
19 | >;
20 | selected: string | null;
21 | onSelect: React.Dispatch
34 | Bar Chart
35 |
36 | );
37 | };
38 |
39 | export default BarChart;
40 |
--------------------------------------------------------------------------------
/src/Patterns/WithComponents/Charts/LineChart.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | axisBottom,
3 | axisLeft,
4 | curveBasis,
5 | extent,
6 | line,
7 | scaleLinear,
8 | scaleLog,
9 | scaleTime,
10 | select,
11 | } from 'd3';
12 | import React, { useEffect, useRef } from 'react';
13 | import Line from '../Marks/Line';
14 | import useResizeObserver from '../Util/useResizeObserver';
15 |
16 | interface Props {
17 | data: Array<
18 | Array<{ date: Date; population: number; country: string; code: string }>
19 | >;
20 | selected: string | null;
21 | width: number;
22 | height?: number;
23 | }
24 |
25 | const margin = { top: 10, right: 10, bottom: 40, left: 40 };
26 |
27 | const LineChart: React.FCLoading...; 40 | 41 | return ( 42 |
43 |
65 | );
66 | };
67 |
--------------------------------------------------------------------------------
/src/Patterns/WithComponents/Marks/BaseMap.tsx:
--------------------------------------------------------------------------------
1 | import { geoGraticule, GeoPath, GeoPermissibleObjects } from 'd3';
2 | import React from 'react';
3 |
4 | interface Props {
5 | pathGenerator: GeoPath
15 |
53 | );
54 | }
55 |
56 | export default WithComponents;
57 |
--------------------------------------------------------------------------------
/src/Patterns/WithContext/Axis/XLinearAxis.tsx:
--------------------------------------------------------------------------------
1 | import { axisBottom, axisLeft, select } from 'd3';
2 | import type { NumberValue, ScaleLinear, ScaleTime } from 'd3-scale';
3 | import React, { ReactElement, useEffect, useRef } from 'react';
4 |
5 | interface Props {
6 | xScale: ScaleLinear
16 |
18 |
19 |
52 | With Components Pattern
20 | 21 |22 | Rather than letting D3 have control of the DOM, in this pattern just 23 | uses React Components to returning JSX. In this way, rather than 24 | feeding data into the SVG, data can be stored and manipulated in the 25 | components and each part can be either smart of dumb to their context. 26 |
27 |
28 | {`With Componets
29 | --Axis
30 | ----XLinearAxis.tsx
31 | ----XTimeAxis.tsx
32 | ----YBandAxis
33 | ----YLinearAxis
34 | --Charts
35 | ----BarChart.tsx
36 | ----LineChart.tsx
37 | ----WorldMap.tsx
38 | --Marks
39 | ----Bar.tsx
40 | ----BaseMap.tsx
41 | ----Line.tsx
42 | ----SelectCountry.tsx
43 | --Util
44 | ----useCSVData.tsx
45 | ----useResizeObserver.tsx
46 | ----useWorldAtlas.tsx
47 | --Dashboard.tsx
48 | --index.tsx
49 | --index.css`}
50 |
51 | Loading...
;
92 | }
93 |
94 | // Define Scales
95 | const TimeScale = scaleTime()
96 | .domain(extent(allData, (d) => d.date) as [Date, Date])
97 | .range([0, innerWidth])
98 | .nice();
99 | const PopulationScale = scaleLinear()
100 | .domain(extent(allData, (d) => +d.population) as [number, number])
101 | .range([innerHeight, 0])
102 | .nice();
103 | const CountryCategories = scaleBand()
104 | .domain(
105 | data
106 | .map((d) => d[d.length - 1])
107 | .slice(0, 25)
108 | .map((i) => i.country),
109 | )
110 | .range([0, innerHeight])
111 | .paddingInner(0.2);
112 |
113 | return (
114 |
124 |
132 |
15 |
92 | );
93 | }
94 |
95 | export default WithSelectD3;
96 |
--------------------------------------------------------------------------------
/src/Patterns/WithSelectD3/Axis/XLinearAxis.tsx:
--------------------------------------------------------------------------------
1 | import { axisBottom, axisLeft, select } from 'd3';
2 | import type { NumberValue, ScaleLinear, ScaleTime } from 'd3-scale';
3 | import React, { ReactElement, useEffect, useRef } from 'react';
4 |
5 | interface Props {
6 | xScale: ScaleLinear
16 |
18 |
19 |
91 | With Context Pattern
20 |
21 | While working on the With Component Pattern it was evident that some
22 | props, like the setSelected would need to be passed down into nested
23 | components. This made for redundant and deeply nested code that was
24 | hard to organize and change. In an effort to centralize everything,
25 | here I use the useContext hook in order to create a
26 | central place for things like data, scales and interactivity which can
27 | then be called on by a custom useDashboard hook. This
28 | eliminates a lot of prop passing as any nested component, anywhere,
29 | can have access to the whole dashboards props and functions.
30 |
32 | This was particularly useful things like scales where I could setup
33 | the domain of the scale in the Dashboard.jsx and then
34 | call this later on and pass in the .range() with the
35 | inner dimensions.{' '}
36 |
38 | {`export const ChartComponent = () => {
39 | const [selected, setSelected] = useState(null);
40 | const wrapperRef = useRef(null);
41 | const dimensions = useResizeObserver(wrapperRef);
42 |
43 | const width = dimensions?.width || 450;
44 | // Parse Data
45 | const data = useCSVData()
46 |
47 | // Define Scales
48 | const TimeScale = scaleTime()
49 | .domain(extent(allData, (d) => d.date) as [Date, Date])
50 | .range([0, innerWidth])
51 | .nice();
52 | const PopulationScale = scaleLinear()
53 | .domain(extent(allData, (d) => +d.population) as [number, number])
54 | .range([innerHeight, 0])
55 | .nice();
56 | const CountryCategories = scaleBand()
57 | .domain(
58 | data
59 | .map((d) => d[d.length - 1])
60 | .slice(0, 25)
61 | .map((i) => i.country),
62 | )
63 | .range([0, innerHeight])
64 | .paddingInner(0.2);
65 |
66 | return (
67 |
76 |
77 |
86 | );
87 | };
88 | `}
89 |
90 | Loading...; 40 | 41 | return ( 42 |
43 |
65 | );
66 | };
67 |
--------------------------------------------------------------------------------
/src/Patterns/WithSelectD3/Marks/Bar.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement } from 'react';
2 |
3 | interface Props {
4 | y: number;
5 | width: number;
6 | height: number;
7 | selected: boolean;
8 | onSelect: () => void;
9 | }
10 |
11 | function Bar({ y, width, height, selected, onSelect }: Props): ReactElement {
12 | return (
13 |
15 |
61 | );
62 | }
63 |
64 | export default WithSelectD3;
65 |
--------------------------------------------------------------------------------
/src/Style/App.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #282c34;
3 | }
4 | .App {
5 | text-align: left;
6 | background-color: #282c34;
7 | min-height: 50vh;
8 | display: flex;
9 | flex-direction: column;
10 | align-items: center;
11 | justify-content: center;
12 | color: white;
13 | }
14 | .App code {
15 | background: #fff3;
16 | padding: 4px 8px;
17 | border-radius: 4px;
18 | }
19 | .App p {
20 | margin: 0.4rem;
21 | }
22 |
23 | .App-logo {
24 | height: 40vmin;
25 | padding: 1rem;
26 | pointer-events: none;
27 | }
28 |
29 | @media (prefers-reduced-motion: no-preference) {
30 | .App-logo {
31 | animation: App-logo-spin infinite 20s linear;
32 | }
33 | }
34 |
35 | .App-header {
36 | background-color: #282c34;
37 | min-height: 35vh;
38 | display: flex;
39 | flex-direction: column;
40 | align-items: center;
41 | justify-content: center;
42 | font-size: calc(10px + 2vmin);
43 | color: #f5814e;
44 | }
45 |
46 | .App-body {
47 | font-size: 1rem;
48 | }
49 |
50 | .App-body a {
51 | color: #61dafb;
52 | }
53 |
54 | .App-link {
55 | color: #f5814e;
56 | }
57 | .route-link a {
58 | color: #61dafb;
59 | margin-top: 0.5em;
60 | font-size: 1.5rem;
61 | }
62 |
63 | @keyframes App-logo-spin {
64 | from {
65 | transform: rotate(0deg);
66 | }
67 | to {
68 | transform: rotate(360deg);
69 | }
70 | }
71 | nav {
72 | display: flex;
73 | justify-content: space-between;
74 | padding: 0 2em;
75 | }
76 | nav a {
77 | color: #61dafb;
78 | font-size: 1.2em;
79 | text-decoration: none;
80 | padding: 0.5em;
81 | }
82 | nav .selected {
83 | color: #f5814e;
84 | font-size: 1.2em;
85 | text-decoration: none;
86 | padding: 0.5em;
87 | border-bottom: 6px solid #cb862b;
88 | }
89 |
90 | nav .disabled {
91 | color: #525a6b;
92 |
93 | }
94 |
--------------------------------------------------------------------------------
/src/Style/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/src/home.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Link } from 'react-router-dom';
3 | import logo from './logo.svg';
4 | import './Style/App.css';
5 |
6 | interface AppProps {}
7 |
8 | function Home({}: AppProps) {
9 | // Create the count state.
10 | const [count, setCount] = useState(0);
11 | // Create the counter (+1 every second).
12 | useEffect(() => {
13 | const timer = setTimeout(() => setCount(count + 1), 1000);
14 | return () => clearTimeout(timer);
15 | }, [count, setCount]);
16 | // Return the App component.
17 | return (
18 |
16 |
18 |
19 |
60 | With Select D3 Pattern
20 |
21 | When it comes to certain chart elements such as axises and brushes,
22 | its just a lot easier to let D3 have control and render the{' '}
23 | {` element. This is done by having a wrapped React
24 | Component that outputs an {` that D3 can control
25 | and manipulate this part of the DOM.
26 |
28 | The file structure is more atomic as you can group together all the 29 | top level charts which are made up of smaller and smaller components. 30 | These could also be organized per chart with the chart at the top 31 | level and then nested Axis and Marks folders. But if you wanted to 32 | make different types of the same category of charts, then its better 33 | to have them broken out atomically. 34 |
35 |
36 | {`With Select D3
37 | --Axis
38 | ----XLinearAxis.tsx
39 | ----XTimeAxis.tsx
40 | ----YBandAxis
41 | ----YLinearAxis
42 | --Charts
43 | ----BarChart.tsx
44 | ----LineChart.tsx
45 | ----WorldMap.tsx
46 | --Marks
47 | ----Bar.tsx
48 | ----BaseMap.tsx
49 | ----Line.tsx
50 | ----SelectCountry.tsx
51 | --Util
52 | ----useCSVData.tsx
53 | ----useResizeObserver.tsx
54 | ----useWorldAtlas.tsx
55 | --Dashboard.tsx
56 | --index.tsx
57 | --index.css`}
58 |
59 |
19 |
20 | 
21 |
22 |
24 |
102 | );
103 | }
104 |
105 | export default Home;
106 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import './Style/index.css';
5 |
6 | ReactDOM.render(
7 | Time to build some D3 chart patterns!
23 |
31 |
65 | 32 | The challenge here is to represent different ways of implementing D3 33 | into React. This is not to see which is 'best' but rather to see 34 | different techniques and evaluate their strengths and weaknesses. In 35 | order to make the comparison, each Pattern should use the same data 36 | source and present it in three separate chart, that can be interacted 37 | with to update all the charts at once. 38 |
39 |40 | While viewing the pages on the web is nice, the real show is in the{' '} 41 | 42 | Github D3-React-Patterns 43 | {' '} 44 | repo where you can see the code and compare the different 45 | implementations 46 |
47 |
48 | To get started, place a new folder in the src/Patterns{' '}
49 | directory and create a index.tsx file for your
50 | development.
51 |
53 | Next add a route in the src/App.tsx and lazy load your
54 | pattern's index.tsx. From here you will have a code split bundle that
55 | shouldn't load any extra components.
56 |
58 | Then at a Link tag to the route in this file,{' '}
59 | src/home.tsx
60 |
62 | Good Luck! 63 |
64 |
73 |
81 | Patterns
74 | JustD3 75 | WithSelectD3 76 | WithComponents 77 | WithContext 78 | RenderProps (coming soon) 79 | HOC (coming soon) 80 |82 | 88 | Learn D3 89 | 90 |
91 |92 | 98 | Learn React 99 | 100 |
101 |