V

vijaytayal

@vijaytayal·17 public vizzes

Loading thumbnail…

line chart

This line chart visualizes weekly temperature variations in San Francisco, with time on the x-axis and temperature on the y-axis. The React app loads CSV data using D3’s `csv` utility and renders an SVG with `scaleTime` and `scaleLinear` scales. Latitude and longitude axes use custom `AxisBottom` and `AxisLeft` components, while the `Marks` component draws a smooth curve via `d3.line().curve(curveNatural)` and overlays circles with native SVG tooltips. The visualization uses teal styling for marks and a clean background, following a modular React component architecture.

Loading thumbnail…

scatter chart with menus

This interactive scatter chart displays the Iris flower dataset, plotting sepal length against sepal width using React components for rendering and D3.js scales for positioning. The visualization includes dropdown menus for selecting different data attributes, along with axis labels and tick marks generated from D3’s scaleLinear and extent functions. SVG circles represent individual data points, with tooltips showing formatted values. The chart loads CSV data asynchronously through a custom `useData` hook that parses numeric fields.

Loading thumbnail…

scatter chart with menus

This interactive scatter chart of the Iris dataset allows users to explore relationships between flower measurements by selecting which attributes appear on the x- and y-axes through two dropdown menus built with React state. The chart uses D3 scales (scaleLinear, extent) to map numerical values from the CSV data to SVG circles, with custom React components rendering the axes and marks. Each circle includes a tooltip via the SVG title element, and axis labels update dynamically based on the selected attributes.

Loading thumbnail…

Menus with react

This example demonstrates a pet-selection menu built with React and D3. The interface displays a dropdown list of animal options, and selecting a pet updates the displayed value through React state. The `DropDown` component renders a `<select>` element, mapping over the options array and using the `selectedValue` prop to mark the chosen item. React’s `useState` hook manages the selection, while D3’s utility functions support the overall rendering pipeline, though the menu itself relies on native HTML form controls.

Loading thumbnail…

world chart

This example displays a world map using a Natural Earth projection, showing country boundaries and graticule lines over a light gray sphere. The visualization loads geographic data from a TopoJSON file using `d3.json`, then converts it to GeoJSON features and interiors with `topojson.feature` and `topojson.mesh`. React renders the map as SVG paths computed by `d3.geoNaturalEarth1` and `d3.geoPath`, with styling applied through CSS classes for the sphere, graticule, and country fills.

Loading thumbnail…

scatter chart

This scatter chart visualizes the relationship between sepal length and sepal width in the Iris flower dataset. The code combines React with D3 utilities—including `scaleLinear`, `extent`, and `csv`—to load and render data as SVG circles with axis labels. Tooltips appear via native HTML `<title>` elements within each mark, showing the formatted sepal length value. Axes are constructed with custom React components that map D3 scales to SVG grid lines and tick labels.

Loading thumbnail…

refactored bar chart

This example visualizes the top 10 most populous countries in 2020 using a horizontal bar chart rendered with React and SVG. Each bar’s length represents the population, with tooltips showing the formatted value. The chart uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) handle the ticks and bars. Data is loaded from a CSV via D3’s `csv` utility, and the axis label is positioned manually. The visualization demonstrates a clear separation of concerns by refactoring chart elements into modular, reusable components.

Loading thumbnail…

Fork of Rendering Data with React 2

This example displays a horizontal bar chart of population data for the top 10 countries in 2020, sourced from a CSV file of UN population estimates. It uses React hooks (useState, useEffect, useCallback) to manage data loading and rendering, while D3 v5 utilities (d3.csv, d3.scaleBand, d3.scaleLinear, d3.max) handle data parsing and scale creation. The visualization renders axes, tick labels, and bars as SVG elements within a React component, with D3 providing the scaling logic and React managing the DOM updates.

Loading thumbnail…

Rendering Data with React

This example shows a pie chart of CSS named colors, where each slice is filled with the color it represents, using React to render SVG elements. It loads color data from a CSV file via the D3 `csv` function, then uses the D3 `pie` and `arc` generators to compute slice angles and paths. React’s `useState` and `useEffect` hooks manage asynchronous data fetching and rendering, while `ReactDOM.render` mounts the component. The visualization demonstrates a seamless React-D3 integration for declarative data-driven graphics.

Loading thumbnail…

Mouse follower

A smiley face drawn with SVG circles follows the cursor inside a 960 by 500 canvas. The React component tracks mouse movements via an `onMouseMove` handler, updating state to reposition a single circle. While the static markup comments include a complete face, the active code renders only the follower circle using React's `useState` and `useCallback`. The example demonstrates combining React's declarative updates with D3's SVG scene graph for interactive visualizations.

Loading thumbnail…

loading data with react and d3

This example demonstrates a minimal React and D3 integration that loads a CSV file of CSS named colors from a GitHub gist. The interface displays a simple loading message, then presents summary statistics about the loaded dataset, including its size in kilobytes, row count, and column count. Using React’s `useState` and `useEffect` hooks, the application triggers D3’s `csv` function to fetch and parse the remote data. The parsed result is then passed to a custom message module that employs D3’s `csvFormat` to calculate the data’s byte length for the final display.

Loading thumbnail…

Loading and parsing of CSV Data

D3.js v5 loads a CSV file of CSS named colors and displays its dimensions as text, reporting the file size in kilobytes, row count, and column count. The example contrasts two parsing paths: `d3.csv` handles the entire fetch-and-parse pipeline directly, while commented-out code demonstrates an async/await approach using `fetch` and `d3.csvParse`. The visualization itself is purely textual, rendered inside an HTML `<pre>` element, with the data sourced from a GitHub gist.

Loading thumbnail…

Fork of Smiley Face Part III

A yellow smiley face is rendered on an SVG canvas, with two circular eyes and a curved mouth drawn as an arc segment. The example demonstrates integrating React with D3 by using the `arc` API from `d3` to generate the mouth's path geometry, while React's declarative syntax constructs the SVG elements. The face is centered using an SVG `<g>` transform, and the circle and path elements receive their coordinates and dimensions from predefined constants.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” in a large, centered font using CSS. The page also includes a JavaScript snippet that logs “Hello JavaScript!” to the browser’s developer console. It uses plain HTML, CSS, and JavaScript without any external libraries or frameworks, serving as a basic starter template for web projects. The code defines inline styles for the body element and a script tag for the console output.

Loading thumbnail…

Fork of Let's Make a Face Part I

Eighteen identical smiley faces are rendered in a grid using React components. Each face is composed of a yellow background circle, two black eyes, and a mouth drawn with a D3 arc generator. The component structure separates the face into reusable parts: `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. While the overall layout is static, each eye’s radius is randomized, creating subtle variation across the repeated faces. The visualization relies on React for DOM rendering and D3’s `arc` API for the mouth path, with SVG used for all drawing.

Loading thumbnail…

Fork of Smiley Face Part II

A full-screen SVG smiley face is rendered with React, drawing a yellow circle with a black outline and two small eye circles. The code computes dimensions from `window.innerWidth` and `window.innerHeight`, centering the face with a `translate` transformation. It uses ReactJS and ReactDOM to render the SVG elements, with explicit variables for eye offset, eye radius, and stroke width. The face scales to the browser window, featuring a static, non-animated expression.

Loading thumbnail…

Hello HTML

A minimal React-free example shows a single gray circle centered in an SVG canvas with no styling or interaction. The page uses plain HTML, CSS, and inline JavaScript, with the circle defined directly in the SVG markup. It demonstrates the basic structure of an SVG element inside an HTML body, with a 960 by 500 viewport and a circle of radius 200. The example serves as a starting point for understanding how SVG shapes render in a browser without additional libraries or data processing.