D3 Integratie

Waarom heb ik d3 zó geïntegreerd?

Ik werk om React heen door middel van D3 het werk te laten doen. Ik ben er erg van overtuigd dat het een goede manier is om D3 zijn kracht te laten zien, want dat is waar D3 voor gemaakt is. Bovendien vind ik het erg essentieel dat React daaromheen werkt. React zorgt ervoor dat heel de website en zijn UX goed verloopt.

Hoe heb ik dit geïntegreerd?

Ik heb dus gekozen voor de wrapper-methode. Hoe heb ik dat gedaan? Ik heb de D3 code in Dataviz.jsx gezet en daaromheen heb ik de functie Dataviz() gezet. Hierin gebruik ik useEffect() die de functie createMapPlot() aanroept. In createMapPlot() staat alle D3 code die ervoor zorgt dat mijn datavisualisatie goed wordt weergegeven. In de return van de Dataviz() functie staan de filter opties en de beschrijving van de datavisualisatie.

Dataviz.jsx

function Dataviz({ node }) {
	useEffect(() => {
		createMapPlot();
	});

	return (
		<>
			<Filters />
			<div className='layout-block'>
				<h2>Beschrijving</h2>
				<p>
					Dit is data van een API endpoint dat bijhoudt hoeveel
					laadpalen er per parkeergebied (denk aan parkeerterein) of
					parkeermogelijkheid (denk aan een straat) bezet en
					beschikbaar zijn. Je kunt filteren op 08:00u 's ochtends en
					20:00u 's avonds. Dit
					zijn juist de momenten wanneer iedereen ongeveer naar
					zijn/haar werk gaat en wanneer iedereen thuis is. Al met al,
					door deze datavisualisatie komen er interessante inzichten
					uit die ik hieronder bespreek.
				</p>
			</div>
		</>
	);
	function createMapPlot() {
         [...Alle D3 code staat hier...]
          }

}

Omdat React geen dataviz framework is, snapt hij niet dat hij ook een SVG moet aanmaken voor D3. Daarom maak ik door middel van een ander los component een SVG aan die ervoor zorgt dat er dus een SVG komt waarin de datavisualisatie gezet wordt. Die ziet er zo uit:

SVGContainer.jsx

export const SVGContainer = ({ children, width, height}) => {
	console.log('children', { children });
	return (
		<svg width={width} height={height}>
			<g>
				{children}
			</g>
		</svg>
	);
};