faik.binaj@gis-dev.com

@faikbinaj·4 public vizzes

Fork of Fork of Bar Chart

This example displays a scatter plot of iris flower measurements, plotting sepal length against sepal width. The visualization uses a React component with D3.js v5’s `scaleLinear` for axis scaling and `extent` to compute data domains. SVG rendering is handled through React’s declarative elements, with axis components generating tick marks and labels. The data is loaded from a remote CSV file using D3’s `csv` function. Tooltips reveal the precise sepal width values for each circular mark when hovered.

Jan 10, 2024

Loading thumbnail…

Fork of Bar Chart

This example shows the ten most populous countries as horizontal bars, with population values scaled along the x-axis and country names labeled on the y-axis. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning and sizing, and d3.format to abbreviate axis tick labels. Data comes from the United Nations World Population Prospects 2019 dataset, loaded via d3.csv, and the chart includes a "Population" axis label but omits a y-axis title.

Jan 9, 2024

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with population values transformed from UN World Population Prospects 2019 data. The chart uses React to render SVG elements and D3’s `scaleBand` and `scaleLinear` to position bars and map population counts to widths. A bottom axis uses D3’s `format` to abbreviate values, while the left axis lists country names. The `Marks` component adds tooltips via SVG `<title>` elements, and the dataset is loaded asynchronously with `d3.csv`.

Jan 9, 2024

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen randomly generated smiley faces, rendered as SVG, demonstrates a React and D3.js component-based approach. Each face is a `Face` React component that composes `BackgroundCircle`, `Eyes`, and `Mouth` components. The `Mouth` component uses the D3 `arc` API to create a path, while the `Eyes` and face positioning rely on randomized parameters, producing visual variety. The `d3.range` function generates the array for the grid, and the React `render` call outputs the faces to the root element.

Jan 8, 2024