Fork of company list

100%

Fork of company list

✓ Published0🌍 Public

Last edited Jun 25, 2022

Created on Jun 25, 2022

Forked from Transaction Analysis with Time (Hopefully)

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.

AI-generated description

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

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

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

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

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

Loading thumbnail…

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

This example shows a bar chart comparing laptop sales across ten companies, using a dataset loaded from a CSV file. The visualization uses React to render SVG elements and D3 to handle data loading and scales, specifically `csv`, `scaleBand`, `scaleLinear`, and `max` from d3. The chart displays horizontal bars with company names on the y-axis and sales values on the x-axis, including custom tick marks and gridlines styled with CSS.

Kkranthireddyskr

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

80% match

Loading thumbnail…

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

This example visualizes laptop sales data for the top ten companies using a horizontal bar chart rendered as SVG. The visualization loads data from a CSV file and displays each company’s sales as a green rectangle bar. Built with React and D3 v5, the code uses `csv` for data loading, `scaleBand` and `scaleLinear` for positioning, and React’s `useState` and `useEffect` hooks to manage state. The chart includes axes with blue tick lines and company labels.

Rrohinikotha

79% match