Ronald Yagan

@ron93·9 public vizzes

Fork of Stylized bar chart

This fork of a stylized bar chart displays the populations of the top 10 countries from a UN dataset, using horizontal bars with a teal fill on a clean white background. The chart is built with React components that render SVG elements, with d3.scaleBand and d3.scaleLinear mapping the data to positions and sizes. Axis labels and tick formatting use d3.format with a custom SI suffix conversion, while interactive tooltips provide precise values on hover. The dataset is loaded via d3.csv from a GitHub-hosted CSV file.

Mar 17, 2021

Loading thumbnail…

population

This example displays a horizontal bar chart of the top 10 countries by projected 2020 population, using data loaded from a CSV file. The visualization employs React for component rendering and SVG for drawing rectangles, with scales from D3 (`scaleBand` and `scaleLinear`) mapping country names to y-positions and population values to bar widths. The data is fetched asynchronously using D3’s `csv` utility, and the bars are colored uniformly without additional styling.

Mar 9, 2021

Loading thumbnail…

population

This visualization displays global population data for the year 2020, mapping countries to a bar chart layout. The code loads a CSV file using D3’s `csv` utility and parses the population values, then scales the data with `scaleBand` and `scaleLinear` for rendering. React manages the component state and lifecycle through hooks like `useState` and `useEffect`, while D3 provides the data-loading and scaling functions. The render output is an SVG, though the visible chart is incomplete as the final bars are commented out in the source.

Mar 9, 2021

Loading thumbnail…

KenyaData

This visualization displays the relationship between retail prices in USD per 1000 and the year, with each bar colored by market, using a bar chart rendered with the vega-lite-api library. The data is loaded from a CSV file containing food prices in Kenya via d3.csv. The chart uses vega and vega-lite for rendering, with a custom configuration for axis styling and tooltip handling via vega-tooltip. The visualization adapts its size to the window dimensions.

Mar 9, 2021

Loading thumbnail…

Fork of ILINet Flu Surveillance Data

This visualization displays national ILI total flu cases across weeks for each year from 2015 to 2019, allowing direct year-over-year comparison of seasonal patterns. The chart uses a line mark with year as a categorical color encoding, which applies an unordered color scale to an ordered temporal field. Built with vega-lite-api, d3, and vega-tooltip, the code aggregates ILITOTAL by year, region, and week, pulling data from a Gist containing CDC FluView Interactive surveillance data. The improper color encoding makes it difficult to discern chronological trends.

Mar 9, 2021

Loading thumbnail…

kenya data visualization

This visualization displays food price trends in Kenya using a circular scatter plot, where each point represents a product’s retail price in USD per 1000 units over time, colored by product type and sized by weight. The interactive chart is built with the Vega-Lite API, registered through D3.js, and renders as SVG with tooltips. Data comes from the UCI Machine Learning Repository via a CSV fetched with `d3.csv` in the `getData.js` module. The layout uses a time axis for the year and a quantitative scale for prices, with customizable axis and label styling from `config.js`.

Mar 9, 2021

Loading thumbnail…

Mouse follower

A yellow-bordered circle follows the mouse cursor as it moves across an SVG canvas. The circle's position is bound to the mouse's coordinates, which are tracked via the `onMouseMove` event handler. This example uses React's `useState` and `useCallback` hooks to manage and update the cursor position, with the SVG rendered through ReactDOM. The visualization demonstrates a simple interactive mouse-following mechanic without additional data.

Mar 4, 2021

Loading thumbnail…

Loading and Parsing csv Data from gist

This example demonstrates how to load a CSV file from a GitHub gist using the fetch API and display its raw contents in the browser console. The page consists of a minimal HTML document with an embedded JavaScript script that defines an asynchronous fetchText function, which retrieves the text data from the specified gist URL and logs it to the console. The code also includes an alternative commented-out fetch approach, showing two methods for accessing remote text data. This serves as a simple starting point for parsing tabular data from external sources.

Mar 4, 2021

Loading thumbnail…

Fork of HTML Starter

This example renders a grid of six by three procedurally generated cartoon faces. Each face is an SVG composition built with React components, using randomized parameters for eye position, stroke width, and mouth dimensions. The `Mouth` component utilizes the `d3.arc()` API to create a smooth, arc-shaped smile, while a shared `FaceContainer` positions each face within its own SVG canvas.

Mar 4, 2021