Stylized React Bar Chart with Axes - w/ Run data

100%

Stylized React Bar Chart with Axes - w/ Run data

✓ Published1🌍 Public

Last edited Oct 12, 2023

Created on Oct 12, 2023

This stylized React bar chart visualizes the most recent run data, displaying the distance of each run in miles over time. The x-axis is scaled using `scaleBand`, while the y-axis uses `scaleLinear` to map distances. The chart is rendered as an SVG within a React component, using D3 v5 utilities like `timeParse` and `timeFormat` to process dates, and `csv` to load the data from a GitHub gist. Tooltips on each bar reveal the exact distance, and the chart includes styled axes with labels for clarity.

AI-generated description

A program that shows the latest run data as a bar chart with axes.

Data: Run Data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart visualizes time-series data, mapping document counts to vertical bars. The chart displays data points over a date range, with the y-axis auto-scaled to the data's extent. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for positioning, rendering SVG rectangles as bars. The data comes from a local JavaScript array simulating a time series, with axes created from custom React components rather than D3 axis generators.

OOsekovS

77% match

Loading thumbnail…

Stylized bar chart with React & D3

This stylized bar chart displays the population of 15 countries, with horizontal bars scaled proportionally to their 2020 population estimates and a custom tooltip showing the formatted value on hover. Built with React and D3 v7, the chart uses D3's `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and renders SVG elements via React components for axes and marks. The styling employs a light gray grid and dodgerblue bars, with the data loaded from a remote CSV using D3's `csv` parser and formatted with the `format` function.

Rrvdv

76% match

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays event counts over time, with bars rendered as alternating solid blocks and gaps. The visualization uses a React class component with mouse event handlers to enable rectangular region selection, drawing a semi-transparent overlay as users drag. Data comes from the provided `inData` array, which combines actual document counts with randomized values. The chart uses D3 v5 scales (`scaleBand`, `scaleLinear`) for positioning, while axes and marks are custom React components. Hovering over a bar highlights it in orange, and tooltips show formatted dates for each data point.

OOsekovS

75% match

Loading thumbnail…

Stylised bar chart

A stylised bar chart displays population data for various countries, with horizontal bars ranked by value. The visualization uses React state management via a `useData` hook to load CSV data from a gist, while D3 v6 functions `scaleBand`, `scaleLinear`, and `max` handle scaling and layout. SVG rectangles render the bars, with axes generated by custom `AxisBottom` and `AxisLeft` components. Tick labels use D3’s `format` with SI prefixes, and a Poppins font styles the chart.

MmohitPassan

75% match

Loading thumbnail…

Bar chart with React & D3

This example shows a horizontal bar chart of population counts per activity category, using D3 for data loading and scales while React renders the SVG elements. The code fetches CSV data from a GitHub gist via `d3.csv` in a custom `useData` hook, then builds the visualization with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Custom React components `AxisBottom`, `AxisLeft`, and `Marks` draw the ticks and colored bars, with each bar assigned a color from a small array.

AAditya Khandelwal

75% match

Loading thumbnail…

E24 - STYLISED a Bar Chart

This stylized bar chart visualizes regional trip volumes using an SVG-based React interface. It loads a CSV dataset via the `csv` function from D3 v5 and maps the data to horizontal bars, with the y-axis displaying regions and the x-axis showing trips. The example clearly separates concerns across three modular files: `AxisBottom.js`, `AxisLeft.js`, and `Marks.js`, which utilize D3's `scaleBand`, `scaleLinear`, and `format` utilities for scaling and tick formatting. The chart uses a linear scale for the x-axis, with tick labels formatted using a custom two-significant-figure format, and includes a tooltip for each bar.

VVanessa

75% match

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart visualizes monthly Move-In counts across all stores, using horizontal bars ranked by month. The chart aggregates a CSV dataset of tenant move-in records, summing counts by month. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and renders SVG rectangles. Custom axes are generated via `AxisBottom` and `AxisLeft` components, with formatted tick labels abbreviating large numbers.

Ddjfeld01

74% match

Loading thumbnail…

E23 - Refactoring a Bar Chart

This bar chart shows the number of trips per region, rendered as horizontal bars using SVG within a React component. The code imports `scaleBand` and `scaleLinear` from d3 to map data to pixel coordinates, while React’s `useState` and `useEffect` handle asynchronous CSV loading via d3’s `csv` method. The `AxisBottom`, `AxisLeft`, and `Marks` components are separated for reuse, producing a clean, refactored visualization with a left margin aligned to the region labels.

VVanessa

74% match