nahsiloh

@nahsiloh·7 public vizzes

Bar Chart Population

This interactive bar chart displays the top 10 most populous countries in 2020 according to UN population data. It uses React state to hold the CSV-loaded data and renders the visualization as an SVG. The chart implements D3's `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, with axes drawn from D3's `ticks()` method. Rectangles represent each country's population, sized using the computed scales within a defined margin layout.

Apr 25, 2021

Loading thumbnail…

Vega-Lite API Template

This interactive visualization uses the Vega-Lite API to render a circular bubble chart, mapping religion by country with circle size encoding population. The chart reads data from a CSV containing religionByCountryTop5, loading it via d3.csv, and encodes country on the x-axis and religion on the y-axis. Tooltips show population on hover. The vega-lite-api library interfaces with Vega and Vega-Lite, applying a custom config for dark text and styled axis labels, and renders to SVG using d3.v5 for data fetching.

Apr 12, 2021

Loading thumbnail…

Loading data with React and D3

This example demonstrates how to load and summarize CSV data within a React application using D3. The interface displays the number of rows, columns, and file size in kilobytes once the data has been fetched. It uses React’s `useState` and `useEffect` hooks to manage asynchronous loading, while the `d3.csv` function retrieves the dataset from a GitHub gist. The code also calls `d3.csvFormat` to calculate the raw data size, with a simple loading message shown before the fetch completes.

Apr 2, 2021

Loading thumbnail…

Loading data with react

This example demonstrates how to load and summarize a CSV dataset using React-style asynchronous JavaScript with D3. It fetches a CSS named colors file from a GitHub gist, then displays the number of rows, columns, and approximate file size in kilobytes. The code uses the Fetch API with an async function, d3.csv for parsing, and d3.csvFormat for size calculation. The result is rendered into a large `<pre>` element, showcasing a minimal data-loading pattern with D3's promise-based CSV handling.

Apr 2, 2021

Loading thumbnail…

Mouse follower

A smiley face rendered as a single SVG circle follows the mouse cursor across a 960×500 canvas. The React component tracks pointer coordinates via an `onMouseMove` handler and updates its position through `useState`, while D3’s `arc` utility is imported but unused. The circle’s `cx` and `cy` attributes are bound directly to the current mouse position, creating a smooth, direct mapping between input and visual output.

Apr 2, 2021

Loading thumbnail…

Rendering data with react

This example visualizes a dataset of CSS named colors as a color wheel, with each color occupying a segment of a circle. The React component manages the asynchronous loading of the CSV data using the `useState` and `useEffect` hooks, and renders the result as SVG paths. D3’s `csv` utility fetches the data, while the `arc` generator defines the pie-shaped segments, with the fill set to the corresponding hex value from each row.

Mar 30, 2021

Loading thumbnail…

Fork of Stylized Line Chart

This example shows a stylized line chart of temperature over time for San Francisco, using data from the Data Canvas Sense Your City dataset. The chart renders as an SVG with React, using d3.scaleTime and d3.scaleLinear to map timestamps and temperatures to positions. The line path is drawn with d3.line and curveNatural, while d3.axisBottom and d3.axisLeft are manually recreated via custom React components. The chart omits data point circles, and styles the axis ticks and labels with the Poppins font.

Mar 29, 2021