Section 1.1: Building the Chart

Next, we will create our bar chart using the components and data provided by the modules. We will source our data from the @visx/mock-data library.

Here’s how to set up the chart:

import React from "react";

import { BarGroupHorizontal, Bar } from "@visx/shape";

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

import { AxisLeft } from "@visx/axis";

import cityTemperature from "@visx/mock-data/lib/mocks/cityTemperature";

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

import { timeParse, timeFormat } from "d3-time-format";

const blue = "#aeeef8";

const green = "#e5fd3d";

const purple = "#9caff6";

const background = "#612efb";

const defaultMargin = { top: 20, right: 20, bottom: 20, left: 50 };

const parseDate = timeParse("%Y-%m-%d");

const format = timeFormat("%b %d");

const formatDate = (date) => format(parseDate(date));

function max(arr, fn) {

return Math.max(...arr.map(fn));

}

const data = cityTemperature.slice(0, 4);

const keys = Object.keys(data[0]).filter((d) => d !== "date");

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

const dateScale = scaleBand({

domain: data.map(getDate),

padding: 0.2,

});

const cityScale = scaleBand({

domain: keys,

padding: 0.1,

});

const tempScale = scaleLinear({

domain: [0, max(data, (d) => max(keys, (key) => Number(d[key])))],

});

const colorScale = scaleOrdinal({

domain: keys,

range: [blue, green, purple],

});

function Example({ width, height, margin = defaultMargin, events = false }) {

const xMax = width - margin.left - margin.right;

const yMax = height - margin.top - margin.bottom;

dateScale.rangeRound([0, yMax]);

cityScale.rangeRound([0, dateScale.bandwidth()]);

tempScale.rangeRound([0, xMax]);

return width < 10 ? null : (

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

<Group top={margin.top} left={margin.left}>

{data.map((barGroup) => (

<BarGroupHorizontal

key={barGroup.date}

data={barGroup.bars}

// Additional props here...

>

{barGroup.bars.map((bar) => (

<Bar

key={bar.key}

width={bar.width}

fill={colorScale(bar.key)}

// Additional props here...

/>

))}

</BarGroupHorizontal>

))}

<AxisLeft scale={cityScale} />

</Group>

</svg>

);

}

export default function App() {

return <Example width={500} height={400} />;

}

In this snippet, we define the colors for the bars using blue, green, and purple. The background variable establishes the background color, and defaultMargin specifies the margins for the chart.

We also set up date parsing and formatting functions to effectively display the data. The data variable contains the chart's information, while keys represents the values for the x-axis. The scales are defined for dates, cities, and temperature values.

After calculating the maximum values for the x and y axes, we utilize the rangeRound method to set these ranges accordingly. Subsequently, we return an SVG element with the chart components, ensuring the Group component acts as the container for the bars and the BarGroupHorizontal displays them in a horizontal format.