Pratik Raja

Fork of Missing Migrants on a Map

This visualization maps the Missing Migrants Dataset, where each point represents a single migrant event and its radius encodes the total dead and missing count. The interactive view uses a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render land and graticule layers, with circles positioned through the projection. Built with React and D3 v5, it loads the data using `d3.csv` and displays a world atlas from TopoJSON.

Missing Migrants Date Histogram

This visualization presents a date histogram of the monthly sum of dead and missing migrants, using data from the Missing Migrants Dataset. The chart aggregates reported incidents by month, with bar heights representing the total casualties per time period. The code uses React with D3 v5 functions including `d3.bin` to create monthly bins, `d3.sum` to aggregate values, and `d3.scaleTime` and `d3.scaleLinear` for the axes. The SVG rendering includes custom axis components and rect marks with tooltip titles, all styled with CSS.

Fork of Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, with each point representing a single event. The x-axis encodes the reported date as time, while the y-axis shows the total number of dead and missing individuals. The example uses React with D3 v5’s scaleTime and scaleLinear for axis scaling, and renders SVG circles via the D3 csv loader. Native SVG `<title>` tags provide tooltip information on hover.

Points on a Map

A world map displays country boundaries and graticules, with semi-transparent circles sized by population for major cities. The visualization uses React with D3 v5, employing `geoNaturalEarth1` and `geoPath` for the projection along with `geoGraticule` for grid lines. City data comes from a CSV, while country shapes are loaded from World Atlas TopoJSON. Circle radii are scaled using `scaleSqrt` based on population values.

Fork of Points on a Map

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length on the x-axis and sepal width on the y-axis. Each flower species is encoded by color, using a `d3.scaleOrdinal` color scale and a custom `ColorLegend` component to map species names to colors. The visualization is rendered as an SVG using React, with reusable components for axes and marks. Data is loaded asynchronously via the `d3.csv` function from a remote URL.

Fork of Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, showing petal length against sepal width. Each point is colored by iris species using a d3 ordinal color scale. Built with React, the chart uses d3's scaleLinear for axes, and SVG circle elements render the marks. Axis labels and tick marks are generated from d3's scale ticks, with a hover tooltip displaying the petal length value.

Fork of Polished Scatter Plot with Menus

Fork of Menus with React

world map using d3

Polished World Map

Fork of Stylized Scatter Plot

This is a scatter plot that visualizes temperature readings over time from a San Francisco weekly temperature dataset. The visualization uses `d3.scaleTime` and `d3.scaleLinear` to map data to the SVG canvas, with custom components for axes and data marks. The chart is rendered using React, with D3 v5 providing the CSV loading and scaling utilities, while the Poppins font and specific color styling give it a polished, stylized appearance.

Fork of Working with Time

A line chart plots San Francisco temperature readings over a week, using a natural curve to connect daily data points from the Data Canvas Sense Your City dataset. The React app loads CSV data with d3.csv, maps timestamps with `scaleTime`, and maps temperature values with `scaleLinear`. SVG rendering uses React components for axes and marks, while d3's `line` generator with `curveNatural` draws the path, and native SVG `<title>` elements provide tooltips.

Fork of Stylized Bar Chart

Fork of Refactored Bar Chart

This example displays a horizontal bar chart of the top 10 most populous countries using React and D3 v5. It renders SVG elements with scales from `d3.scaleBand` and `d3.scaleLinear`, while custom React components handle axis ticks and bar marks. Data is loaded asynchronously via `d3.csv` from a United Nations World Population Prospects 2019 dataset, then sliced to the first ten entries. The chart includes both bottom and left axes, positioned within specified margins.

Fork of Axes with React & D3

This example renders a horizontal bar chart of the top 10 most populous countries using React and D3. The chart displays a bar for each country’s 2020 population from the United Nations World Population Prospects 2019 dataset, retrieved via `d3.csv`. It manually constructs axes without D3’s axis components, using `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and generating tick lines and text labels from `xScale.ticks()`. The visualization is rendered as SVG with React state management and `useEffect` for data loading.

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color represented as a slice of a pie chart, creating a circular spectrum of color swatches. It loads the data from a CSV file using D3’s `csv` utility, then uses React with hooks (`useState`, `useEffect`) to fetch and render the SVG. The pie slices are computed with D3’s `pie` and `arc` functions, drawing each `path` with the fill set to the hex value from the data.

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between the origin and horsepower of cars from the Auto MPG dataset. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render an interactive SVG chart. It loads data from a CSV file via `d3.csv`, applies custom axis and label styling, and uses a tooltip handler to display car names on hover. The chart automatically fits the browser window dimensions.

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement, horsepower, weight, and origin for a dataset of automobiles from the auto-mpg CSV file. A scatter plot displays displacement on the x-axis and horsepower on the y-axis, with color encoding car origin and size encoding weight, while tooltips reveal vehicle names. Built using the Vega-Lite API, it registers Vega and Vega-Lite, loads data with d3.csv, and renders an interactive SVG visualization with a custom dark theme and tooltip handler.

Fork of Loading Data with React & D3

This example displays a summary of CSS named color data, showing the file size in kilobytes, row count, and column count as plain text. It uses React hooks (`useState`, `useEffect`) to manage asynchronous data loading, while D3’s `csv` function fetches the remote dataset. The `message` utility formats the statistics via `d3.csvFormat` and string concatenation. The interface toggles between a “Loading…” state and the computed metrics once the data arrives, rendering the result inside a large `<pre>` element.

Fork of Loading and Parsing CSV Data

Fork of Loading and Parsing CSV Data

Fork of Smiley Face Part III

Fork of Smiley Face Part II

Fork of Loading and Parsing CSV Data

Fork of Smiley Face Part III

A smiling face is drawn as a yellow circle with a black stroke, two eyes, and a curved mouth. The face is centered within a 960 by 500 SVG canvas. The code uses React to assemble the face from components like `BackgroundCircle`, `Eyes`, and `Mouth`, while D3’s `arc` function generates the mouth path. The `Face` component receives specific numeric values for dimensions and positioning, such as `centerX`, `centerY`, and `eyeOffsetX`.

Fork of Smiley Face Part V

Fork of Smiley Face Part V

A smiling face rendered as an SVG in React uses three modular components—BackgroundCircle, Eyes, and Mouth—split into separate files with ES6 modules. The Mouth component builds its arc path using d3.arc, while the other shapes are plain circle elements. The app imports ReactDOM to render the face inside an SVG group at the canvas center. React fragments wrap the paired eyes to avoid extra DOM nodes. The visualization demonstrates component reuse and separation, with fixed numeric constants defining stroke width, eye offsets, and mouth dimensions.

Fork of Smiley Face Part V

Fork of Smiley Face Part IV

Fork of Smiley Face Part III

Fork of Smiley Face Part III

This example renders a yellow smiley face using React for component structure and D3’s `arc` generator to create the mouth path. The SVG drawing centers the face, with two eye circles and a stroked smile, all positioned via computed offset constants. The code embeds a commented-out static SVG version, while the live implementation uses D3’s `arc()` with inner and outer radii and a half-turn angle range.

Fork of Smiley Face Part II

Fork of Let's Make a Face Part I

A fork of an earlier smiley-face example, this React-based visualization draws a simple SVG face using an imperative approach with explicit coordinates and hard-coded values. It displays a yellow circle for the head and two smaller black circles for eyes, all rendered as SVG primitives. The code uses React's `createRoot` to mount the component, and defines the geometry through JavaScript constants for dimensions, offsets, and radii. The work is a partial implementation that stops halfway toward a complete face, leaving out the mouth and other features.

Fork of Smiley Face Part II

A smiling face rendered with React and SVG adapts to fill the browser window, with a yellow circle, black outline, and two eyes positioned symmetrically around the center. The code uses ReactDOM to render SVG elements, calculating coordinates based on `window.innerWidth` and `window.innerHeight`. The smile’s mouth is omitted, leaving only the head and eyes visible. React 16.9.0’s production build and ReactDOM manage the component hierarchy, while the SVG viewport scales dynamically to the viewport size.

Fork of Hello HTML

Fork of Fill & Stroke

This example demonstrates the difference between shapes with default black fill and no stroke, and shapes with white fill and a black stroke, using SVG primitives. It shows rectangles, circles, and custom paths created with cubic Bézier curves, all rendered on a 960 by 500 canvas. The code uses raw SVG elements like `rect`, `circle`, and `path` directly in an HTML file, with no external libraries, and includes both unfilled and stroked versions of each shape for comparison.

Fork of Smiley Face Part II

This example shows a large yellow smiley face rendered with SVG, centered on the screen and resized to fit the browser window. The face includes two black eyes and a curved mouth, drawn using Cartesian coordinates and a polar arc path. React manages the component structure, while D3’s `arc` generator computes the mouth’s path based on inner and outer radii and start/end angles. All shapes are positioned relative to a central translation, with stroke widths and radii defined as constants.

Fork of Let's Make a Face Part I

This example shows a static smiley face drawn in SVG, with a yellow circular head and two black eyes positioned on a blank background. It demonstrates how to build a basic visual component using React 16.9.0, where the SVG elements are defined directly in the JSX-like markup within the HTML file. The code uses React’s `React` and `ReactDOM` production builds from unpkg, while the rendering relies purely on SVG circle elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. No interactivity or animations are present, as the face is incomplete—it lacks a mouth—and the project is a fork of a tutorial series.

Fork of Hello HTML

This example displays a static SVG smiley face with a yellow circle, black outline, and two smaller unfilled circles for eyes. The rendering uses raw SVG elements embedded directly in an HTML page, with a hidden React script loaded via CDN. The code references React 18’s production UMD build and logs the React object to the console, though no React components or rendering logic are actually used. The page sets body margins to zero and hides overflow, while the SVG is sized at 960 by 500 pixels.