Vahe Abovyan

@VaheAA·5 public vizzes

Fork of Pathetic Bar Chart

This fork of a "pathetic bar chart" displays the top 10 most populous countries as horizontal bars with no axes or labels, ranked by population. The visualization uses React to manage state and render SVG rectangles, with D3 v5’s `csv` for data loading and `scaleBand`/`scaleLinear` for mapping country names and population values to pixel coordinates. Data comes from the United Nations World Population Prospects 2019 dataset.

Mar 9, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatterplot-like visualization of user data, with points positioned along categorical axes for country and status, using an arc mark with a fill and low opacity. The visualization is built with the Vega-Lite API, which is registered with Vega and Vega-Lite, and uses a tooltip handler for interaction. Data is fetched asynchronously via D3's `json` function from a local server endpoint, and the chart is configured with custom axis styles and dark label colors.

Mar 9, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the religious demographics of countries using a Vega-Lite API specification, encoding country and religion on the axes with point size mapped to population. The visualization uses a line mark to display the data, which is loaded from a CSV file via d3.csv, and renders as an SVG through the integrated Vega, Vega-Lite, and Vega-Lite API libraries. A custom configuration adjusts axis styling and tooltip appearance for readability, with the visualization fitting to the full window dimensions.

Mar 8, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A mouse-following smiley face renders in SVG using React state and event handling. The code tracks pointer movement via the `onMouseMove` event, updating the `mousePosition` state with `useState` and `useCallback`, and draws a single yellow circle at the cursor’s coordinates. The visualization demonstrates basic React-DOM rendering with SVG elements, using React 16.9.0 and no external data source.

Mar 8, 2022

Loading thumbnail…

Hello HTML

This example renders a single yellow circle centered on an SVG canvas using React 17 and the ReactDOM API. The circle is defined directly in JSX within a React component, with attributes specifying its position, radius, stroke, and fill color. The app mounts to a div element with the ID "root" via the `ReactDOM.render` method, demonstrating a minimal setup for combining React with SVG rendering in an HTML page.

Mar 8, 2022