meghshah612

@meghshah612·14 public vizzes

IT return Bar Chart

This bar chart displays the one-year return of the top 10 most populous IT companies, sorted by company name along the vertical axis and return percentage on the horizontal axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis, rendering SVG rectangles as marks. The data comes from a CSV file of company returns, loaded via `d3.csv`, with tooltips showing exact values and axes labeled with tick marks and a descriptive title.

Apr 26, 2022

Loading thumbnail…

Fork of refactoring bar chart with react and d3

This interactive bar chart displays population data for ten countries, sourced from a CSV file, using horizontal bars to encode each country's population value. Built with React and D3.js v7, the visualization renders entirely as SVG elements, with the `AxisBottom`, `AxisLeft`, and `Marks` components constructing the tick marks, axis labels, and rectangular bars. The chart uses D3's `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis, while React's `useState` and `useEffect` hooks manage asynchronous data loading.

Feb 21, 2022

Loading thumbnail…

Fork of refectored bar chart of stock market with react and d3

This visualization displays the dividend yields of twelve companies as horizontal bars, with company names on the y-axis and dividend values on the x-axis. The React component fetches CSV data from a GitHub gist using `d3.csv`, then renders the chart as SVG. D3 scales (`scaleBand` and `scaleLinear`) position the bars, while separate React components (`AxisBottom`, `AxisLeft`, `Marks`) handle the axes and rectangular marks. The code leverages React's `useState` and `useEffect` hooks for data loading.

Feb 21, 2022

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.

Feb 20, 2022

Loading thumbnail…

Fork of bar chart with react and d3

This fork of a bar chart combines React and D3 to visualize population data for the top ten countries, loaded from a CSV file via a Gist URL. The SVG rendering uses D3's `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and `max` to determine the domain. React manages the data state, displaying a "Loading..." message until the CSV is parsed. Both x-axis gridlines with tick labels and y-axis country labels are drawn using SVG elements within a transformed group.

Feb 20, 2022

Loading thumbnail…

Fork of Fork of Fork of rendering data with react and d3

This example renders a pie chart of CSS color names loaded from a CSV file, with each slice filled by its corresponding RGB hex value. The code uses React hooks (`useState`, `useEffect`, `useCallback`) to fetch and store the data, then creates the chart with d3’s `pie` and `arc` functions. The SVG is rendered through ReactDOM, with the `pieArc` generator set to an outer radius equal to the chart width.

Feb 19, 2022

Loading thumbnail…

Fork of Fork of visualizing data with react and d3

This example visualizes CSS color names by rendering each color as a horizontal strip, stacked vertically to form a full-width gradient spectrum. The data is loaded from a CSV file using `d3.csv`, and React manages the state and rendering of the strips via inline styles. The visualization uses React 16.9 and D3 v7, with the SVG output commented out in favor of HTML divs. Each strip’s background color corresponds to the `RGB hex value` field from the dataset.

Feb 19, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, vehicle weight, and country of origin using a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Circle size encodes weight, color encodes origin, and tooltips reveal vehicle names. The visualization is built using the Vega-Lite API registered with vega-lite and vega, configured for a clean SVG renderer. Data is loaded asynchronously via d3.csv from a GitHub Gist, while the custom config.js adjusts font sizes and axis tick colors for readability.

Feb 19, 2022

Loading thumbnail…

Fork of loading data with react and d3

This visualization uses React and D3 to load a CSV file of CSS color names and display a summary of its contents. The app fetches data from a GitHub gist via `d3.csv` and renders a message showing the file size in kilobytes, row count, and column count using `d3.csvFormat`. The interface is a bare HTML page with React 16 and D3 7, initially showing "Loading" until the asynchronous data fetch completes. The output is plain text within an SVG-capable document, though no graphical elements are drawn.

Feb 19, 2022

Loading thumbnail…

Fork of fetching CSV Data Starter

This visualization shows the size of a CSV file containing CSS colors by displaying its kilobyte count, row count, and column count in large text. It loads the data from a GitHub gist using `d3.csv`, formats the parsed data with `d3.csvFormat` to calculate the file size, and renders the results in a `<pre>` element. The code also includes commented-out alternatives using `fetch` with `async/await` and `d3.csvParse`.

Feb 19, 2022

Loading thumbnail…

Fork of Mouse Pointer Follower

A React-based smiley face responds to mouse movement within an SVG canvas. Using React's `useState` hook, the component tracks the pointer's `clientX` and `clientY` coordinates, updating the position of a single yellow circle via `onMouseMove`. The code renders SVG elements directly, with React handling state updates and DOM reconciliation. The example demonstrates basic interactive event handling and state management in a React visualization context.

Feb 19, 2022

Loading thumbnail…

Fork of My Smiley Face Part IV

A grid of randomly generated smiley faces fills the screen, each face varying in stroke width, eye size and offset, and mouth dimensions. The visualization demonstrates a reusable React component structure, where the `Face` component composes `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents. The code imports `arc` from `d3` to generate the mouth path, and uses `range` from `d3` to create the array of faces. Rendering uses SVG inside React, with each face positioned via a translated `<g>` element.

Feb 18, 2022

Loading thumbnail…

Fork of My HTML Starter

This example renders a stylized, smiling face composed of basic SVG shapes using React and D3. The visualization shows a light blue circular background with enclosing black stroke, two white eyes with inner pupils and eyebrow arcs, a triangular nose, a red ellipse mouth, and pink blush circles. The code uses React components like `BackGround`, `Eye`, and `InnerEye` to structure elements, while D3’s `arc` generator creates the eyebrow and mouth paths with specified angles and radii. SVG lines, circles, ellipses, and paths are positioned via coordinate transforms, with all styling applied directly as SVG attributes.

Feb 18, 2022

Loading thumbnail…

Fork of My HTML Starter

This example renders a stylized face using React and D3 v7, composed of SVG shapes such as circles, lines, ellipses, and arcs. It demonstrates the D3 `arc` API to generate paths for the mouth, eyebrows, and additional curved elements, while leveraging React’s `ReactDom.render` to mount the component. The visualization uses a fixed 960×500 canvas with absolute positioning, drawing a yellow circular head with eyes, a red mouth, pink cheeks, and black facial features, all constructed declaratively in JSX.

Feb 18, 2022