J

John Jeevasaeyan

@jeevasaeyan·20 public vizzes

Loading thumbnail…

Iris Dataset

This scatterplot visualizes the Iris dataset, plotting sepal length against sepal width for individual flower samples. The code loads CSV data via the `d3.csv` utility and renders the points as circles using React components with SVG. Axes are constructed with `d3.scaleLinear` and custom tick components, while D3’s `extent` and `max` functions determine the scales’ domains. The visualization uses a clean, minimal design with teal markers and labeled axes, providing a straightforward view of the distribution and relationship between these two measurements.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris flower dataset, mapping sepal length on the x-axis and sepal width on the y-axis. Each point represents an individual flower, with hover tooltips revealing exact measurements. The visualization uses React components to render SVG elements, while D3 v5 utilities handle data loading via `csv()` and scale construction with `scaleLinear` and `extent`. Custom axis components generate tick marks and labels, with formatting applied through D3's `format` function.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the 10 most populous countries in 2020, using horizontal rectangles to compare population sizes. The visualization pairs React components with D3 utilities, including `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv` loading from a GitHub-hosted UN population dataset. The SVG render sets a teal fill for the marks, with formatted tick labels converting large numbers into abbreviated units like "Mn" and "Bn" for readability.

Loading thumbnail…

Refactored Bar Chart

This example presents a horizontal bar chart of the top 10 countries by population for 2020, sourced from a UN population CSV file. The visualization uses React with D3 v5 utilities to load and scale the data, rendering SVG via React components. `scaleBand` positions country labels on the y-axis, while `scaleLinear` maps population values to bar widths, with reusable `AxisBottom`, `AxisLeft`, and `Marks` components structuring the chart.

Loading thumbnail…

Axes with React & D3

A horizontal bar chart displays the top ten countries by 2020 population, sourced from UN population data. React renders SVG elements for the axes and bars, while D3 computes scales, ticks, and grid lines. `d3.scaleBand` handles the categorical country axis, `d3.scaleLinear` maps population values, and `d3.csv` loads the remote dataset. The chart uses a margin-based layout with labeled x-axis ticks and a clean, minimal design.

Loading thumbnail…

Margin Convention with React & D3

This example loads United Nations population data from a CSV file and renders it as a horizontal bar chart using React and D3. The visualization displays the top ten countries by 2020 population, with bar widths proportional to population values and y-axis positions determined by country names. The React component manages the data fetching and state, while D3 utilities handle CSV parsing, linear scaling for the x-axis, and band scaling for categorical y-axis placement. The SVG output respects a margin convention around the plot area.

Loading thumbnail…

Rendering Data with React & D3

A horizontal bar chart displays the top ten countries by 2020 population, loaded from a CSV file and rendered as SVG rectangles. React handles UI state and DOM updates, while D3 utilities (d3.csv, scaleBand, scaleLinear, max) fetch and scale the data. The chart updates asynchronously after the CSV loads, with bars sized proportionally to each country's population value.

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the population distribution across five countries, broken down by religion, using a horizontal bar for each country with colored segments representing different religious groups. The visualization is built with the vega-lite-api library, which wraps Vega and Vega-Lite, and loads CSV data from a GitHub gist containing the religion-by-country dataset. Bars are sorted by total population in descending order, with opacity set to 0.8 and tooltips showing exact population values on hover, while the chart is configured to fit the full browser window.

Loading thumbnail…

Largest 5 Countries

A bar chart displays the populations of the five most populous countries, sorted in descending order, with a tooltip revealing each country’s exact population value. The visualization is built using the Vega-Lite API, which programs a bar mark with a numeric y-axis and categorical x-axis, all rendered as an SVG via the `vl.render()` method. Data is fetched as CSV from a remote GitHub gist using D3’s `csv` function, with styling customized through a configuration object.

Loading thumbnail…

Line Chart of Temperature

This line chart visualizes daily temperature readings from San Francisco over the course of a week, using the vega-lite-api library to construct a single smooth line with a semi-transparent stroke. The x-axis maps timestamps while the y-axis encodes temperature values, with tooltips exposing the exact temperature on hover. Data is loaded asynchronously from a CSV file via d3.csv, and the chart is rendered by vega-lite, which compiles the specification into a vega view with an SVG output. Custom axis styling and font sizes are configured through a separate config object, and the visualization automatically fits the full window size.

Loading thumbnail…

Vega-Lite API Template - Part 2

This example displays a scatter plot of automotive data, showing the relationship between miles per gallon and horsepower. Each circle encodes vehicle weight through color and engine displacement through size, with interactive tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which composes specifications programmatically, and renders through Vega with D3.js for data loading via `d3.csv`. The data originates from the classic auto-mpg dataset hosted as a GitHub gist.

Loading thumbnail…

Vega-Lite API Template - Part 1

This example demonstrates a scatter plot of automotive data, showing the relationship between horsepower and acceleration, with tooltips displaying car names. Built using the Vega-Lite API, it loads the auto-mpg dataset via D3’s `csv` function. The visualization uses `vl.markPoint`, `vl.x().fieldQ`, and `vl.y().fieldQ` to encode quantitative fields, with a custom config adjusting axis and font styles. Rendered through Vega-Lite’s SVG output, it integrates vega-tooltip for interactive hover details.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset within a React component using D3. It fetches CSS Named Colors data from a GitHub gist via `d3.csv` and displays a text summary showing the file size, row count, and column count. The React state hook `useState` manages the loading status, while `useEffect` triggers the async data fetch. The `message` utility uses `d3.csvFormat` to calculate data size, and the rendered output is plain SVG-free text.

Loading thumbnail…

Data Visualization 1

This example displays basic metadata about a CSS-named-colors dataset loaded from a CSV file: the approximate file size in kilobytes, the number of rows, and the column names. It uses D3 v5’s `d3.csv` to fetch and parse the data, then writes the computed statistics into a large `<pre>` element on the page. The code also includes commented-out alternatives using `fetch` and `d3.csvParse` with async/await syntax.

Loading thumbnail…

Animation with Fetch Part 1

A circle follows the mouse cursor across an SVG canvas, updating its position in real time as the pointer moves. The React application uses a `useState` hook to track mouse coordinates and an `onMouseMove` event handler to update them. The circle is rendered as an SVG `<circle>` element, with its `cx` and `cy` attributes bound to the current mouse position. The code relies on React's event handling and state management, with SVG provided through the React DOM library.

Loading thumbnail…

Smiley Face Part 6

This example displays a grid of eighteen smiley faces, each with randomized facial features such as eye position, eye radius, and mouth dimensions, generated using React components. The faces are rendered as SVG circles and arcs, with the mouth created using the d3.arc() API to compute a path. The code leverages React’s component structure with separate functions for the face, eyes, mouth, and background, and uses d3.range() to generate the array of faces. The rendering is purely client-side, with each face independently styled based on random values.

Loading thumbnail…

Smiley Face Part 5

This example renders a yellow smiley face as an SVG using React components for the background circle, eyes, and mouth. The face is centered with a transform, and the mouth is drawn with a D3 arc generator using specified start and end angles. The code imports React utilities and D3’s `arc` method to create the path. All visual elements are positioned based on fixed constants for offsets and radii, demonstrating a modular component-based approach.

Loading thumbnail…

Smiley Face Part 4

A yellow smiley face rendered with React and D3 v7 displays a circle, two eyes, and a smiling mouth. The face uses SVG elements positioned within a group transformed to the center of a 960 by 500 canvas. The mouth is drawn using `d3.arc()` with specified inner and outer radii and angle ranges. Facial features are placed using offset coordinates, and the background circle’s radius accounts for stroke width to maintain proportions.

Loading thumbnail…

Smiley Face Part 2

A stylized smiley face is drawn using SVG circles and an arc for the mouth, centered within a 960 by 500 viewport. The face is constructed with React components, where each visual element is defined by computed constants such as eye offset, radius, and stroke width. D3’s `arc` generator creates the mouth path with specified inner and outer radii and angular range. The code uses React 16.7, ReactDOM, and D3 v7, rendering declaratively with JSX.

Loading thumbnail…

Smiley Face Part 1

This example shows a static SVG smiley face composed of a yellow circle with a black outline and two smaller dark circles for eyes, positioned symmetrically on a 960 by 500 canvas. The code uses raw SVG elements (circle) with CSS for centering, and includes a JavaScript console log. The face is drawn without animation or interaction, demonstrating a minimal React starter setup for visual composition.