Section 1.1: Setting Up Your Environment

To kick off our project, we need to install several essential packages. Execute the following command:

npm i @visx/curve @visx/gradient @visx/group @visx/marker @visx/mock-data @visx/responsive @visx/scale @visx/shape

This will set up the necessary modules for our application.

Section 1.2: Crafting the Curves

Next, we will create our curves by utilizing the components provided by the installed modules. We'll use data sourced from the @visx/mock-data package. Here’s a sample code snippet to get you started:

import React, { useState } from "react";

import { extent, max } from "d3-array";

import * as allCurves from "@visx/curve";

import { Group } from "@visx/group";

import { LinePath } from "@visx/shape";

import { scaleTime, scaleLinear } from "@visx/scale";

import {

MarkerArrow,

MarkerCross,

MarkerX,

MarkerCircle,

MarkerLine

} from "@visx/marker";

import generateDateValue from "@visx/mock-data/lib/generators/genDateValue";

const curveTypes = Object.keys(allCurves);

const lineCount = 3;

const series = new Array(lineCount)

.fill(null)

.map(() => generateDateValue(25).sort((a, b) => a.date.getTime() - b.date.getTime()));

const allData = series.reduce((rec, d) => rec.concat(d), []);

const getX = (d) => d.date;

const getY = (d) => d.value;

// Scales

const xScale = scaleTime({

domain: extent(allData, getX)

});

const yScale = scaleLinear({

domain: [0, max(allData, getY)]

});

function Example({ width, height, showControls = true }) {

const [curveType, setCurveType] = useState("curveNatural");

const [showPoints, setShowPoints] = useState(true);

const svgHeight = showControls ? height - 40 : height;

const lineHeight = svgHeight / lineCount;

xScale.range([0, width - 50]);

yScale.range([lineHeight - 2, 0]);

return (

<svg width={width} height={height}>

{showControls && (

<>

<label>

Curve type

<select onChange={(e) => setCurveType(e.target.value)} value={curveType}>

{curveTypes.map((curve) => (

<option key={curve} value={curve}>{curve}</option>

))}

</select>

</label>

<label>

Show points

<input type="checkbox" checked={showPoints} onChange={() => setShowPoints(!showPoints)} />

</label>

</>

)}

<Group>

{width > 8 && series.map((lineData, i) => {

const even = i % 2 === 0;

let markerStart = even ? "url(#marker-cross)" : "url(#marker-x)";

if (i === 1) markerStart = "url(#marker-line)";

const markerEnd = even ? "url(#marker-arrow)" : "url(#marker-arrow-odd)";

return (

<LinePath

key={line-${i}}

data={lineData}

x={(d) => xScale(getX(d)) ?? 0}

y={(d) => yScale(getY(d)) ?? 0}

stroke="#333"

strokeWidth={even ? 2 : 1}

strokeOpacity={even ? 0.6 : 1}

shapeRendering="geometricPrecision"

markerMid="url(#marker-circle)"

markerStart={markerStart}

markerEnd={markerEnd}

/>

);

})}

</Group>

</svg>

);

}

export default function App() {

return (

<Example width={800} height={400} />

);

}

In this code, we extract the curve types from the @visx/curve library. The curveTypes array is derived from the keys of the imported module. We generate the data required for the curves using the generateDataValue function from the @visx/mock-data package. The getX and getY functions retrieve the respective data points for the x and y axes.

The xScale and yScale define the scaling for the axes. The Example component manages the rendering of the curves, allowing users to select the curve type and toggle the visibility of data points. We utilize various marker components such as MarkerX, MarkerCross, MarkerCircle, MarkerLine, and MarkerArrow to enhance the visual representation of the curves.