Skip to main content
SimilarExport ZIP
100%

Fork of company list

✓ Published0🌍 Public
NNaimisha-M
Last edited Jun 25, 2022
Created on Jun 25, 2022

This visualization displays a horizontal bar chart of company data, showing the top 11 entries from a CSV file loaded via `d3.csv`. Each bar represents a company’s serial number, with company names listed on the y-axis using `scaleBand` and numeric values on the x-axis via `scaleLinear`. The chart is rendered in React using SVG elements, with purple bars and orange gridlines produced by `xScale.ticks()`. The data is fetched from a GitHub gist and displayed with axis labels.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of company list

This visualization displays a horizontal bar chart comparing the first 11 rows of a company dataset, with "Leave" categories on the y-axis and "Serial_Number" values on the x-axis. The SVG rendering uses React components with D3's `scaleBand` and `scaleLinear` to position purple bars, while axis ticks are generated manually. Data loads asynchronously via D3's `csv` parser from a GitHub gist, and the chart includes numeric labels formatted through D3's `format` capability.

SSaiSree0122
91% match
Loading thumbnail…

Fork of Fork of company list

A bar chart displays the top 11 rows from a CSV of company data, plotting each company’s "Serial_Number" as a purple horizontal bar against its "Leave" label on the y-axis. The React app fetches the data via D3’s `csv` function, then uses D3’s `scaleBand` and `scaleLinear` for axes, with `d3.max` to scale the x-axis. SVG rendering is handled through React’s `ReactDOM.render`, producing tick marks, labels, and the bars themselves. The chart’s title, "Famous Sports in 2021," appears as an HTML heading.

NNaimisha-M
90% match
Loading thumbnail…

Fork of company List

This visualization displays sports-related data from a CSV file as a horizontal bar chart, ranking the top 11 entries by their 2021 match counts. The chart uses React for component-based rendering and D3 v5 for data loading and scale construction. Specifically, it employs `d3.csv` for data fetching, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. The SVG rectangles are colored purple and rendered directly within a React component, with axes and tick labels generated manually using D3's scale methods.

NNaimisha-M
88% match
Loading thumbnail…

Fork of company list

This bar chart displays the top 11 companies from a CSV dataset, ranked by their “2021” matches, with a main title “Famous Sports in 2021.” Built with React and D3, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering the bars as SVG `rect` elements with a purple fill.

NNaimisha-M
87% match
Loading thumbnail…

company list

This example displays a horizontal bar chart of the top 11 companies from a dataset titled “Famous Sports in 2021,” ranked by their serial number. The visualization uses React with hooks to fetch CSV data via d3.csv, then renders SVG rectangles whose lengths encode the serial number values. D3 scales, including scaleBand and scaleLinear, position the bars, while custom tick marks and labels are drawn manually rather than using d3.axisBottom or d3.axisLeft. The chart is styled with a purple fill for each bar.

NNaimisha-M
85% match
Loading thumbnail…

Fork of company list

This example is a fork of a company list visualization, built with React, D3 v5, and Vega-Lite API. It shows a scatter plot of transactions by category and amount, paired with a time-based bar chart of the same data, both rendered as SVG. Users can brush on the time chart to filter the scatter plot, and click categories in the scatter to filter the time chart, with credit/debit status encoded by color. The data is loaded from a CSV file via `d3.csv`, and the charts use Vega-Lite’s `vl.markCircle`, `vl.selectInterval`, and `vl.selectPoint` APIs for interaction.

SSaiSree0122
84% match
Loading thumbnail…

Fork of bar chart of stock market with react and d3

This example visualizes the dividend yields of the top 12 companies from a CSV dataset, rendering a horizontal bar chart in SVG. The React component fetches and parses the data with `d3.csv`, then uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. D3’s `ticks()` generates the axis gridlines and labels, while the bars are drawn as `<rect>` elements sized by the dividend values. The chart includes margins and axes, with data loaded asynchronously and displayed after a brief "Loading" state.

Mmeghshah612
82% match
Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 10 companies by bicycle sales, rendered as horizontal bars within an SVG. The visualization is built using React and D3, with data loaded from a CSV file. The code uses `d3.csv` to fetch and parse the data, and `d3.scaleBand` and `d3.scaleLinear` to map company names and sales values to visual positions. Each bar’s width is proportional to its sales figure, with gridlines and axis ticks generated from the linear scale.

Kkalyanikotha
82% match