@tomhazledine/svg-graph-toolkit

@tomhazledine/svg-graph-toolkit

This is a set of helper functions and React components that I commonly use when generating SVG graphs in my projects. I like to hand-roll SVG graphs with JSX and D3, but there are inevitably certain things that I need to do over and over again. I've created this library to DRY out my graphing projects and avoid re-work.

Components

• <GraphBase /> This foundational component sets up the SVG container, defining the size and scales of the graph.
• <GraphArea /> Used for creating area charts, this component helps in visualizing data as a filled area on the graph.
• <GraphBlock /> A simple way to draw blocks (rectangles) on your graph (useful for bar charts and also masking or highlighting certain areas).
• <GraphHoverTargets /> Enables interactive elements in the graph, like tooltips or highlights when hovering over data points.
• <GraphLabel /> Provides a way to add descriptive labels to your graphs, enhancing readability and context.
• <GraphLine /> A simple way to draw either horizontal or vertical lines on your graph (useful for drawing grid lines).
• <GraphPath /> Essential for line charts, this component draws lines between data points.
• <GraphPoint /> Used to render individual data points, ideal for scatter plots or to highlight specific values in other chart types.
• <GraphPoints /> Facilitates rendering multiple data points at once, streamlining the creation of scatter plots or similar point-based visualizations.

Helpers

These helper functions are designed to simplify common tasks associated with setting up and scaling SVG graphs, making your graphing projects more efficient and streamlined.

• getLayout() A utility function that calculates and returns layout properties such as margins and dimensions, essential for graph positioning and sizing.
• getScales() This function generates the necessary D3 scales based on your data, ensuring that data points are accurately represented on the graph according to their values.