company list

100%

✓ Published1🌍 Public

Last edited Jun 24, 2022

Created on Jun 24, 2022

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.

AI-generated description

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

Similar vizzes

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

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

88% match

Loading thumbnail…

Fork of company list

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.

NNaimisha-M

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

84% match

Loading thumbnail…

Fork of company List

This example visualizes the most famous sports of 2021 using a horizontal bar chart. The chart displays the number of matches for each sport, with sports ordered alphabetically along the vertical axis and match counts on the horizontal axis. The code uses D3 v5 utilities like scaleBand, scaleLinear, and max to create the scales, while CSV data is loaded via d3.csv. The visualization is rendered as SVG elements within a React component using the react and react-dom libraries, with purple bars representing each sport's match count.

NNaimisha-M

83% match

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

82% match

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the top 10 most valuable companies, with market values in billions and a green axis label and title. It uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisLeft and d3.axisBottom to render axes. The chart is drawn as SVG rectangles, with the y-axis line and ticks removed, and the x-axis tick format converts values from gigabytes to billions. A React starter is also referenced in the README, though the main implementation relies on plain D3 v5.

Aamiralitah

81% match

Loading thumbnail…

Data visualization ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 10 most-liked companies for stocks and crypto using a horizontal bar chart. The bars are rendered as SVG rectangles, with orange fills atop a green background, and the chart includes axis tick marks and labels. The code loads data from a CSV file using `d3.csv`, then uses a React component with `useState` and `useEffect` hooks to manage state. D3’s `scaleBand` and `scaleLinear` map company names and like counts, while the chart is drawn with JSX inside an SVG element, combining React’s declarative rendering with D3’s data utilities.

HHarishma Nallala

80% match