Activity 7

100%

✓ Published0🌍 Public

Last edited Jul 21, 2023

Created on Jul 21, 2023

This example shows a horizontal bar chart of product sales, using a categorical y-axis for product names and a linear x-axis for sales values. It renders with React and SVG, using D3 v5’s `scaleBand`, `scaleLinear`, `csv`, and `format` APIs to load and scale data from a GitHub-hosted CSV file. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the axes and rectangular marks, with native SVG `<title>` elements providing tooltips. The data is filtered to the top seven products, and sales values are formatted with a compact SI prefix.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 7

This bar chart displays the number of users for various applications, drawing from a CSV dataset of 50 entries. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering SVG rectangles for each bar. The code includes custom `AxisBottom` and `AxisLeft` components for ticks and labels, with tooltips formatted using D3’s `format` function.

Bbogasamudramvamsikrishnareddy

84% 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

81% match

Loading thumbnail…

Activity 7

This example displays a horizontal bar chart of 2020 population data by country, with green bars and blue axis ticks styled via CSS. It uses React for component structure, rendering SVG elements like `rect`, `text`, and `line` directly. D3 v5 utilities such as `scaleBand`, `scaleLinear`, `max`, and `format` handle scaling and tick formatting, with custom `AxisBottom` and `AxisLeft` components defining the axes via JSX. The chart loads data through a custom `useData` hook and includes tooltips via SVG `<title>` elements.

MManideeprenikindi

80% match

Loading thumbnail…

ICE-6 Fork of HTML Starter

This example shows a horizontal bar chart of product sales data, displaying the December sales figures for the top 10 products. The visualization uses React with hooks like `useState` and `useEffect` to fetch and manage the data, while D3 v5 functions `csv`, `scaleBand`, and `scaleLinear` handle data loading and scaling. The SVG rendering maps products to the y-axis and sales values to the x-axis, with axis ticks and grid lines drawn manually. Data comes from a CSV file loaded via D3’s `csv` method, and the chart updates dynamically once the data arrives.

Aakshitha.rapala@gmail.com

80% match

Loading thumbnail…

Rendering Marks and Channels

This example visualizes supermarket sales data by rendering a horizontal bar chart of product lines against their average ratings. The visualization uses React with D3 v5, loading data from a CSV file via d3.csv. It employs d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and SVG rectangles as marks. The code renders axes manually with tick marks and gridlines, with margins configured to accommodate the long product line labels.

IIndhuKrishnaraj

80% match

Loading thumbnail…

Bar Chart with D3 and React

This example displays product ratings by subcategory in a horizontal bar chart. Each rectangle’s length corresponds to a product’s numeric rating, with axes labeled using D3’s `scaleLinear`, `scaleBand`, and `axisLeft`/`axisBottom` functions. Built with React and D3 v5, the chart loads data from a CSV file via `d3.csv`, then renders the SVG directly through React’s `rect` elements. The code uses D3’s `select` and `call` methods to apply axis generators, while React manages state and the rendering lifecycle.

Aavvarijayakrishna99@gmail.com

80% match

Loading thumbnail…

Activity 7

This example shows a horizontal bar chart ranking the populations of 20 countries in 2020, with bars colored green and labeled with formatted tick values. The chart uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning, and `csv` from D3 to load the data from a GitHub-hosted CSV file. Axes are custom components, and hovering over a bar displays a tooltip via the SVG `<title>` element.

NNukaShravanKumar

80% match

Loading thumbnail…

Activity 7

This visualization displays a horizontal bar chart comparing the number of users across various applications. Built with React and D3 v5, it renders data from a remote CSV file, loading and displaying the first 50 entries. The chart uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with bars rendered as SVG `<rect>` elements. The code includes custom axis components and formatting, converting large numbers to abbreviated forms with `format('.2s')`, and provides tooltips showing the formatted user counts.

JJayanthKumarkoni

80% match