S

Sai Phaltankar

@sphalt·29 public vizzes

Loading thumbnail…

Covid-19 Chart over Country

This chart displays the global cumulative death toll from COVID-19 over time as multiple lines, one for each country without province-level data, plotted along a logarithmic y-axis to handle the wide range in casualties. The visualization uses a React component with D3 v5 scales and line generators, rendering the paths as SVG strokes. It loads the Johns Hopkins University COVID-19 time-series dataset, parses dates with `timeParse`, and updates the axis ticks using `axisBottom` and `axisLeft`.

Loading thumbnail…

Covid-19 Chart - Labels

This visualization displays global cumulative COVID-19 deaths over time using a logarithmic y-axis, based on the Johns Hopkins Coronavirus dataset. The React component renders an SVG line chart with d3.scaleTime and d3.scaleLog, using d3.line to generate the path. Axis components leverage d3.axisBottom and d3.axisLeft with tick markings, while labels annotate the chart title, axis names, and cumulative death totals.

Loading thumbnail…

Covid - 19 line chart - log scale

A line chart displays the cumulative global deaths from COVID-19 over time using a logarithmic y-axis to accommodate the exponential growth in the data. The chart plots daily totals from the Johns Hopkins Coronavirus dataset, with grid lines and axis labels generated by D3's `scaleLog`, `scaleTime`, `axisBottom`, and `axisLeft`. The React component builds an SVG path via D3's `line` generator, with the x-axis showing dates and the y-axis using a log scale with tick formatting. The visualization fills the browser window and uses a simple black stroke for the line, with gray grid lines and styled tick text.

Loading thumbnail…

Covid - 19 line chart

This line chart visualizes the cumulative total of COVID-19 deaths over time, based on the Johns Hopkins Coronavirus dataset, with a vertical marker highlighting the most recent date and a horizontal marker at 10,000 deaths. The chart is rendered as an SVG using React and D3 v5, employing `scaleTime`, `scaleLinear`, and a D3 `line` generator to plot the data. The axes are drawn with D3's `axisBottom` and custom marker components.

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes the global share of the population infected with HIV/AIDS in 2017, using a yellow-to-red sequential color scale to indicate prevalence rates. It renders a Natural Earth projection with graticules and country borders, and colors each country based on data from the IHME dataset, with gray indicating missing values. The visualization is built with React and D3 v5, using `d3.geoPath` for map geometry, `d3.scaleSequential` with `interpolateYlOrRd` for color encoding, and TopoJSON to load world atlas boundaries.

Loading thumbnail…

Missing Migrants - Brushing

This interactive visualization combines a world map and a time-series histogram to explore data on missing migrants. Brushing on the histogram filters the map’s bubble marks, which are sized by the total dead and missing using a square-root scale. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render land and graticules from TopoJSON, while the histogram employs `d3.bin`, `d3.brushX`, and scales for time and linear values. React manages state and rendering, with D3 v5 handling data loading and axes.

Loading thumbnail…

Missing Migrants - multiple views

This visualization presents the Missing Migrants dataset through two synchronized views: a world map using a bubble chart and a time-series histogram. The map displays circles scaled by the square root of the total dead and missing per location, projected using `geoNaturalEarth1` and `geoPath`. The histogram bins reported dates by month using `d3.bin` and `timeMonths`, summing fatalities per bin. Both views are rendered with SVG via React components, leveraging D3 scales and axes. Data is loaded from a CSV using `d3.csv`.

Loading thumbnail…

Missing Migrants on a map

This visualization displays the global distribution of missing migrants, with circle size representing the total number of dead and missing individuals at each location. The map uses the Natural Earth projection via `geoNaturalEarth1` and `geoPath` from D3, with SVG circles rendered as proportional symbols scaled by `scaleSqrt`. Data is loaded from a CSV using D3’s `csv` utility, while the world atlas is fetched as TopoJSON and converted to GeoJSON features and mesh lines for land and interior boundaries. React manages the component state and rendering, with D3 handling the geographic projections and scales.

Loading thumbnail…

Migrant Deaths - Time

This visualization displays monthly totals of dead and missing migrants over time, using bars to show cumulative deaths per month. The data comes from the Data Canvas Sense Your City dataset, specifically the Missing Migrants Global subset. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for axes, `bin()` with `timeMonths` thresholds to aggregate data, and `sum` to calculate monthly totals. The SVG rendering includes custom axis components and bar marks with tooltips.

Loading thumbnail…

Points on a map

This example displays a world map with points representing cities, sized by population. The map is rendered as SVG using React, with D3's `geoNaturalEarth1` projection and `geoPath` drawing landmasses, graticules, and sphere outlines. City coordinates are projected onto the map, and circles are scaled with `scaleSqrt`. The code loads world topology from a JSON via `useWorldAtlas` and city data from a CSV using the `csv` utility, styling land areas and points with CSS.

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Dropdown menus let viewers switch between different attributes for the x and y axes, while a color legend enables hovering to highlight specific species and fade the others via opacity changes. The visualization uses React with D3 scales and SVG rendering, employing D3's `scaleLinear` for positioning and `scaleOrdinal` for categorical color mapping.

Loading thumbnail…

Scatter Plot with Menus, Color Legend

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. Two dropdown menus let viewers switch which quantitative attributes appear on the x and y axes, while a color legend maps each species to a distinct hue. The visualization uses React state management with d3.scaleLinear for axes, d3.scaleOrdinal for colors, and SVG circles rendered via React components. CSV data is loaded asynchronously using d3.csv, with axes and labels drawn from reusable custom React components.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting sepal and petal measurements with points colored by species. Users can switch the X and Y axes between different attributes using ReactDropdown menus. The visualization is built with React and D3 v5, using scaleLinear for axes, scaleOrdinal for categorical colors, and SVG rendering. Axes are generated with reusable AxisBottom and AxisLeft components, while data is loaded asynchronously via the csv function from D3.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing viewers to explore relationships between different flower measurements by selecting which attributes to plot on the x- and y-axes via dropdown menus. The SVG rendering uses React to create axis components and circular marks, with D3's `scaleLinear` and `extent` functions managing the data domains. Hovering over a circle reveals a tooltip with its corresponding x-value, implemented through SVG `<title>` elements.

Loading thumbnail…

Menus with React

This example demonstrates a React-based dropdown menu for selecting a pet, with the chosen value logged to the console. It uses React’s `useState` hook to manage the selected value and a reusable `Dropdown` component that renders a native `<select>` element. The code imports React and ReactDOM from UMD builds, along with d3.v5, though d3 is not actively used in the interaction. Styling is applied via inline CSS in the HTML, with a large font for the label and select.

Loading thumbnail…

React Starter Code

This example demonstrates a minimal React application that renders a static “Hello React!” message inside a root div. It combines React 16.9.0 with ReactDOM to mount the component, while also loading D3 v5 as a dependency, though D3 is not yet used for any visualization or data manipulation. The project structure includes an HTML entry point that loads both React and D3 from CDNs, and a bundle.js containing the React component logic. The code serves as a starter template for integrating React with D3 in future interactive visualizations.

Loading thumbnail…

World Map

This example renders a world map using a Natural Earth projection, displaying landmasses, graticules, country borders, and a sphere outline. It loads geographic data from the World Atlas TopoJSON file using `d3.json` and processes it with `topojson.feature` and `topojson.mesh`. The map is drawn with `d3.geoPath` and `d3.geoNaturalEarth1`, while React components structure the SVG output. Land areas are filled teal, borders are lighter teal, and the background sphere is light gray.

Loading thumbnail…

Working with time

This chart shows how San Francisco temperatures vary over a week, using a line graph with a time-based x-axis and a linear y-axis for temperature. It is built with React and rendered as an SVG, using D3 v5 utilities like `scaleTime`, `scaleLinear`, and `line` with `curveNatural` to draw the smooth path. Data on CSS named colors is loaded from a CSV via `csv`, and axes are custom-drawn with gridlines. The chart includes axis labels for "Time" and "Temperature," and the line is styled with a teal stroke for clarity.

Loading thumbnail…

Scatter Plot - Iris

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. The code uses React with D3 v5 utilities, including `scaleLinear`, `extent`, `csv` for data loading, and `format` for axis tick labels. Rendered as an SVG, it includes custom AxisBottom and AxisLeft components that generate ticks and gridlines, while Marks component draws circles with native tooltips via the `<title>` element. Data is fetched from a remote CSV file and parsed into numeric values during loading.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by population for 2020, using a horizontal layout with rounded padding between bars. The visualization is built with React and D3 v5, employing D3's `csv`, `scaleBand`, `scaleLinear`, and `format` utilities to load and scale the data. SVG rectangles rendered via React component marks show the population values, with tooltips formatted using D3's SI notation (e.g., “1.43B”). The chart features a custom Poppins font and muted color palette applied through CSS.

Loading thumbnail…

Refactored Bar Chart

This example visualizes the population of the top 10 countries from UN Population 2019 data as a horizontal bar chart. The chart uses D3 scales (`scaleBand` and `scaleLinear`) to position bars and axes, while React components render the SVG elements. The code separates AxisBottom, AxisLeft, and Marks into distinct React components, uses a custom `useData` hook to load and parse the CSV with d3.csv, and supports blank ticks as axis labels. The visualization highlights a modular, refactored approach to building reusable chart components.

Loading thumbnail…

Axes with React and D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, using React to render SVG elements and D3 for data loading and scales. The App component fetches a CSV from a GitHub gist using `d3.csv`, transforms the population values, and slices the top ten rows. React’s `useState` and `useEffect` manage the asynchronous data, while D3’s `scaleBand` and `scaleLinear` position the bars and axes. Custom tick marks for both axes are generated manually with D3’s `ticks` method, and the chart updates reactively once data arrives.

Loading thumbnail…

Margin Convention

This example demonstrates the margin convention for bar charts by displaying the top 10 countries by population in 2020. The chart uses React to render SVG rectangles, with D3’s `scaleBand` for the y-axis countries and `scaleLinear` for the x-axis population values. Data is loaded via `d3.csv` from a UN population dataset. A `<g>` element applies the margin translation, showing how inner dimensions are computed from the SVG width, height, and margin object.

Loading thumbnail…

Bar Chart

This example shows a horizontal bar chart of the top 10 countries by population, with each bar’s length representing the 2020 population estimate. The bars are rendered as SVG `<rect>` elements using React, with scales from `d3.scaleBand` for the country categories and `d3.scaleLinear` for the population values. Data is loaded asynchronously from a CSV file using `d3.csv`, which parses the population column as numbers before the chart updates. The visualization combines D3’s data-loading and scaling utilities with React’s declarative component structure.

Loading thumbnail…

Rendering Data with React and D3

A pie chart displays the full spectrum of CSS named colors, with each slice representing one color from a CSV dataset loaded via D3's `csv` utility. React renders the SVG paths, using the `useState` and `useEffect` hooks to manage asynchronous data loading. D3's `pie` and `arc` generators compute the slice angles and path geometry, while each slice's fill comes directly from the color's hex value in the data.

Loading thumbnail…

Loading data with d3

This example demonstrates loading a CSV dataset of named CSS colors and displaying its metadata as plain text. The React component uses the `useState` and `useEffect` hooks together with D3’s `csv` function to fetch data asynchronously from a GitHub gist URL, then renders a summary message computed by the `message` utility using `d3.csvFormat` and the data’s `length` and `columns` properties. While the data is loading, the interface shows the word “Loading,” and after success, it reports file size, row count, and column count.

Loading thumbnail…

Mouse Follower

A single circle tracks the mouse as it moves across a full-screen SVG canvas, with its position updating in real time to mirror the cursor’s coordinates. Built with React and ReactDOM, the app uses the `useState` hook to store the mouse position and the `useCallback` hook to handle the `onMouseMove` event on the SVG element. The viewport dimensions come from `window.innerWidth` and `window.innerHeight`, and the circle is rendered as an SVG `<circle>` element with a fixed radius of 30 pixels.

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of randomized smiley faces renders as React components, each built from SVG circles and an arc path. The code combines D3’s `arc` generator for the mouth with React’s functional components for eyes, background, and face container, applying random values to eye radius, mouth radius, and mouth width per face. The faces are generated from a `range` array, with all geometry positioned by explicit center and offset coordinates.

Loading thumbnail…

Smiley Face Sai Part 1

This example renders a static smiley face using React 18 and SVG primitives. It shows a large yellow circle with a black stroke as the face, plus two smaller unfilled circles for eyes, positioned on an 960 by 500 canvas. The code uses the React UMD build from unpkg to define the SVG elements directly in the HTML body. The visualization demonstrates basic geometric composition without any interactivity or data-driven behavior.