faizalmunna

@faizalmunna·8 public vizzes

Fork of bar chart with tick- axes

This example visualizes the top 10 most populous countries using a horizontal bar chart. The bars are rendered as SVG rectangles with lengths proportional to each country’s 2020 population, sourced from the United Nations World Population Prospects 2019. The chart includes both x- and y-axis tick marks and labels generated via `scaleLinear` and `scaleBand`. React manages the state and rendering, while d3.csv loads and parses the data, and d3’s `max`, `scaleLinear`, and `scaleBand` compute scales for the visualization.

Aug 10, 2021

Loading thumbnail…

bar chart with tick

This example displays the top 10 most populous countries as a horizontal bar chart, using React to manage state and render SVG elements. It lacks traditional axes and instead shows tick marks and labels along the bottom, generated via `scaleLinear` and `scaleBand` from d3. The data comes from the United Nations World Population Prospects 2019, loaded with `d3.csv`. Bars are drawn as `<rect>` elements, with a light blue line marking each tick position.

Aug 10, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as colored rectangles, with bar width proportional to population and no axes or labels. Built with React and D3 v5, it uses `d3.csv` to load UN World Population Prospects 2019 data, then `scaleBand` for the vertical country positions and `scaleLinear` for horizontal bar lengths. The visualization renders as SVG, updating from a loading state to the final chart once data arrives.

Aug 9, 2021

Loading thumbnail…

Rendering Data with React

This example renders a color dataset as a half-circle pie chart using React and D3. The code loads CSV data from a GitHub gist via `d3.csv`, then maps each row to an SVG `<path>` element. It uses the `arc()` generator from D3 to calculate the shape for each segment, with angles computed proportionally from the data length. React's `useState` and `useEffect` hooks manage asynchronous data loading, while the SVG is rendered declaratively inside the component. The chart displays each color according to its `RGB hex value` field.

Jul 30, 2021

Loading thumbnail…

Fork of Vega-Lite API Template-- faizal

This visualization uses the Vega-Lite API to render a scatterplot of automobile data from an auto-mpg CSV dataset, with displacement on the x-axis and horsepower on the y-axis. Each point is semi-transparent blue, and hovering reveals the vehicle name via tooltips. The code registers Vega-Lite with D3’s CSV loader, applies custom axis and label styling from a config object, and dynamically sizes the chart to the window. It demonstrates the vega-lite-api library’s programmatic specification-building approach.

Jul 28, 2021

Loading thumbnail…

Fork of Fork of Fork of Hello HTML

Eight identical stylized faces are arranged in a grid, each rendered as a yellow circle with black-outlined eyes and a smile formed by a d3.arc path. The React application maps over a d3.range to generate multiple Face components, each composed of SVG primitives within a FaceContainer. The example demonstrates modular component reuse, nested SVG grouping, and the use of D3’s arc generator for the mouth, all within a React-for-SVG workflow.

Jul 27, 2021

Loading thumbnail…

Fork of Fork of Hello HTML

Eight identical cartoon faces, each built from a yellow circle, black eyes, and an arc-shaped mouth, repeat in a grid. The example demonstrates modular React components and D3 shape generation, with each face composed from `FaceContainer`, `Backcircle`, `Eyes`, and `Mouth` components. Rendering uses SVG within a React app, while the mouth is drawn using D3's `d3.arc` with specified inner and outer radii and fixed start and end angles. The repeated faces are created by mapping over a D3 `range` array, producing a simple pattern from reusable parts.

Jul 26, 2021

Loading thumbnail…

Fork of Hello HTML

This example shows a simple smiley face rendered as SVG shapes, with a yellow circle for the head, two black eyes, and an arc for the mouth. It combines React for component-based UI structure with d3.arc for generating the mouth path. The code uses ReactDOM to mount the SVG into the page, and d3.js version 7 provides the arc generator with specified inner and outer radii. The face is centered on a 960×500 viewport using SVG groups and transforms.

Jul 26, 2021