Fork of company list

100%

Fork of company list

✓ Published0🌍 Public

Last edited Jun 25, 2022

Created on Jun 25, 2022

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.

AI-generated description

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

Similar vizzes

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

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

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

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

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

81% match

Loading thumbnail…

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

This example visualizes laptop sales data for various companies using a bar chart. The chart displays the sales figures for the first ten companies from a CSV file, with horizontal bars representing each company’s sales value. The visualization is built with React and D3, using D3’s `scaleBand` for the y-axis categories and `scaleLinear` for the x-axis sales values. The SVG rendering is generated through React’s declarative components, with `csv` loading the data and `max` determining the domain for the x-axis scale.

Rrohinikotha

80% match