Skip to main content
Log in
Y

yastika

@yastika·27 public vizzes

Loading thumbnail…

Time scatter plot

This time scatter plot visualizes temperature readings over time as red circles on an SVG canvas. The visualization uses D3's `scaleTime` and `scaleLinear` for axes mapping, with `timeFormat` to display weekday labels on the bottom axis. React renders each data point as a circle, with tooltips showing the formatted timestamp. The chart loads data from a CSV file via D3's `csv` utility, and custom React components handle axis and mark rendering.

Jun 3, 2021
Loading thumbnail…

Scatterplot

This scatterplot visualizes the Iris dataset, plotting sepal length against sepal width for individual flowers. Using React to render SVG elements, the chart displays data points as red circles with tooltips showing the exact sepal length value. The code leverages D3 utilities such as `csv` for data loading, `scaleLinear` for axes, and `extent` for domain calculation, while custom React components construct the axes and marks. The visualization features labeled axes, tick marks, and a clean design with a Poppins font.

Jun 2, 2021
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the number of cervix uteri cancer patients across different states and union territories in India. The visualization uses a horizontal bar layout with a clean, Poppins-font aesthetic and a single red accent color. It loads CSV data through D3’s `csv` utility, scales the bars with `scaleLinear` and `scaleBand`, and renders the chart as SVG elements in React. The React components build the axes and marks, while D3’s `format` function displays large numbers in a compact notation.

Jun 1, 2021
Loading thumbnail…

Refactored Bar Chart

A horizontal bar chart displays the number of cancer patients for ten Indian states and union territories in 2016, using the `csv` loader from D3 v6 to fetch the dataset. The React app renders SVG bars with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels. The bar widths encode patient counts, and the chart is static with no interactivity.

May 27, 2021
Loading thumbnail…

Axes with React and D3

A React application uses D3 utilities to load CSV data on cervix uteri cancer patient counts by Indian state, rendering a horizontal bar chart with custom SVG axes. D3's `csv` fetches and parses the data, while `scaleBand` and `scaleLinear` construct the y- and x-scales, and `max` and `ticks` generate tick values. React components map over the scales and data to draw axis lines, tick labels, and colored rectangles, with SVG transforms positioning the visualization within a fixed 960×500 viewport.

May 27, 2021
Loading thumbnail…

The margin convention

This example demonstrates the "margin convention" for chart layout by rendering a horizontal bar chart of cervical cancer patient counts across Indian states and territories. Using React for the user interface, the visualization loads the data via D3's `csv` utility and scales the bars with `scaleBand` and `scaleLinear`. The implementation explicitly defines a margin object that subtracts from the total SVG dimensions to establish an inner plotting area, and the bars are positioned and sized within a translated group using those margins.

May 27, 2021
Loading thumbnail…

Bar Chart with react and D3

This bar chart displays the number of patients across different states and union territories in 2016, sourced from a CSV file about cervix uteri cancer. The visualization uses D3’s `csv` utility for data loading and `scaleBand` and `scaleLinear` to map the state names and patient counts to SVG rectangles. React handles the rendering, with a `useEffect` hook to fetch data asynchronously and a state variable to trigger the chart’s display once the data arrives.

May 26, 2021
Loading thumbnail…

Cancer Paitents

This visualization displays cancer patient numbers across Indian states and union territories for the year 2016, using a bar chart rendered with SVG. The React component loads data from a CSV file via `d3.csv` and maps each state to a rectangle using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The chart is built with D3 v6 and React 17, with bars positioned starting from the left edge of the SVG canvas.

May 26, 2021
Loading thumbnail…

check data loading

This example demonstrates the asynchronous loading of a CSV dataset containing CSS color names and their RGB hex values. While the data loads, a large "Loading..." message is displayed; once loaded, each row is rendered as a colored div block. The code uses React hooks (`useState` and `useEffect`) to manage state and trigger the data fetch via D3's `d3.csv` utility. The resulting visualization is a simple grid of color swatches, with each div’s background color set directly from the dataset’s `'RGB hex value'` field.

May 26, 2021
Loading thumbnail…

Loading and Parsing CSV

This example demonstrates how to load and parse CSV data in a web page. It fetches a CSV file containing CSS named colors, parses it with d3.csvParse, and calculates summary statistics including file size, row count, and column count from the parsed dataset. The result is displayed as large text in a pre element. The implementation uses the Fetch API to retrieve the remote file and D3 v6 for CSV parsing, with the output generated entirely through text manipulation rather than visual charts.

May 26, 2021
Loading thumbnail…

Map of India

This example displays a map of India rendered as SVG through a React application. It retrieves TopoJSON data from a remote URL and uses the `feature` function from `topojson` to extract geometries. The map is projected using `d3.geoMercator` with custom centering, scaling, and translation settings, and the paths are drawn with `d3.geoPath`. The code integrates React for state management and D3 v5 for geographic visualization.

May 24, 2021
Loading thumbnail…

Rendering Data with React & D3

A pie chart displays the relative frequency of each CSS named color in a dataset loaded from a CSV file. The example integrates React for component rendering with D3 utilities for data loading and geometry: `d3.csv` fetches the data, while `d3.pie` and `d3.arc` compute the slice angles and SVG path coordinates. Each slice is filled with its corresponding hex value from the dataset.

May 19, 2021
Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays all CSS named colors as a full-circle pie chart, with each color occupying a wedge based on its position in the dataset. The example integrates React and D3, using React’s `useState` and `useEffect` hooks to load CSV data asynchronously, then rendering SVG paths via the `d3.pie` and `d3.arc` utilities. Each wedge is filled with its corresponding hex value from the CSS named colors dataset, which is fetched from a gist URL.

May 18, 2021
Loading thumbnail…

Saddy Face

A yellow circle spans the SVG canvas, serving as a saddy face with a curved, downward mouth and two arc-shaped eyes. The face is constructed using D3’s `arc` generator to define the mouth and eye paths, while React renders the SVG elements. The mouth arc uses a negative start angle and positive end angle to create a frown, and the eye arcs are positioned on either side of the face. The background circle is drawn with a yellow fill and black stroke, and the entire composition is centered via SVG transforms.

May 18, 2021
Loading thumbnail…

Not so Smiley Face

A yellow smiley face rendered with React and SVG features two black eyes and a d3.arc-generated mouth, but the mouth is positioned off-center to the right, creating a lopsided expression. The face is drawn using React components for the background circle and eyes, while the mouth path is computed with d3.arc specifying inner and outer radii and start and end angles. The React application renders the SVG with fixed dimensions, and the misplaced mouth arc produces a subtly distorted facial expression.

May 17, 2021
Loading thumbnail…

Pathetic Bar Chart 2

Ten horizontal bars represent the ten most populous countries in the world, with country names absent from the visual. The bars lack axes, ticks, or labels, making them “pathetic” by design. Built with React and D3 v5, the code fetches UN World Population Prospects data via `d3.csv`, scales the bar widths using `d3.scaleLinear`, and renders each country as an SVG `rect` positioned with `d3.scaleBand`.

Apr 22, 2021
Loading thumbnail…

Pathetic Bar chart

This example visualizes United Nations population data for 2020 as a horizontal bar chart using React and D3. The chart displays each country as a bar, with bar length proportional to population size. The code loads CSV data via `d3.csv`, scales the bars using `scaleLinear` for population values and `scaleBand` for country categories, and renders SVG rectangles through React components. The visualization demonstrates a straightforward integration of D3’s data-loading and scaling utilities with React’s declarative rendering model.

Apr 18, 2021
Loading thumbnail…

Loading Data with React & D3 visual

The visual presents a simple gallery of swatches for CSS named colors, each rendered as a colored block that maps a row from a CSV dataset to a React `div` element. It loads the data asynchronously from a GitHub-hosted CSV file using `d3.csv`, then transforms each record into a styled block via React state management with `useState` and `useEffect`. While the data loads, a large "Loading..." message displays, and the final result is a vertical list of color swatches based on the `RGB hex value` column. The example demonstrates a straightforward integration of D3's data-loading utility with React's component rendering.

Apr 17, 2021
Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading CSS named color data using React state and D3 utilities. The app displays a simple text summary showing the data size in kilobytes, row count, and column count, with a loading message before data arrives. It uses React’s `useState` hook to store the parsed CSV data and D3’s `csv` function to fetch and parse the remote dataset from a GitHub gist. The rendered output is a large `<pre>` element styled with a 5em font size, showing the computed metrics dynamically.

Apr 17, 2021
Loading thumbnail…

Vega-Lite API Template

A single bar chart displays the estimated incidence of cancer cases per year, using orange bars along quantitative and temporal axes. The visualization is built with the Vega-Lite API, which programmatically composes a bar mark and encodings in `viz.js`, while `index.js` registers Vega, Vega-Lite, and Vega-Tooltip, renders the chart to SVG, and sizes it to fit the viewport. Data is loaded asynchronously from a CSV file containing cancer statistics using d3.csv, and a custom configuration in `config.js` adjusts axis and label styling.

Apr 11, 2021
Loading thumbnail…

Loading and Parsing CSV without fetch async and await

This example demonstrates a minimal workflow for loading and parsing a CSV file in D3 v6 without using fetch, async, or await. It displays the file size in kilobytes, row count, and column count inside a large <pre> element. The code calls d3.csv() with a URL pointing to a CSS named colors dataset hosted on GitHub Gist, then chains a .then() callback to compute the summary metrics using d3.csvFormat() and the parsed data array. The approach avoids explicit asynchronous syntax while relying on D3’s built-in promise handling.

Apr 8, 2021
Loading thumbnail…

Smiley Face Part 3 - Interaction with React

A black circle follows the mouse pointer across an SVG canvas in a React application. The example demonstrates interactive state management by tracking the cursor's coordinates through React's `useState` and `useCallback` hooks, updating the circle's `cx` and `cy` attributes on every `mousemove` event. It uses React 17 with the `ReactDOM.render` API, while D3.js v6 is loaded but not directly utilized in the visible logic.

Apr 8, 2021
Loading thumbnail…

Smiley Face Part II- Interaction with React

A yellow smiley face drawn with SVG circles and an arc path responds to the browser window size, centering itself dynamically via React’s render loop. Built with React 16.9 and D3’s `arc` helper, the face uses hardcoded properties for eye offset, radius, and mouth curvature. The SVG viewport fills the entire window, and the face’s position and size recalculate on mount, demonstrating interactive layout without explicit event handlers.

Apr 8, 2021
Loading thumbnail…

Smiley Face Part 6

A grid of small SVG smiley faces is generated using React, with each face varying randomly in stroke width, eye size, and mouth width. The faces are composed of reusable components (`BackgroundCircle`, `Eyes`, `Mouth`) assembled within a `FaceContainer` that translates the center coordinates. The `Mouth` component uses D3's `arc()` function to create an arc path, while `range()` from D3 generates the array of faces. The rendering relies on React DOM to draw the scalable vector graphics.

Apr 6, 2021
Loading thumbnail…

Smiley Face Part 5

A yellow smiley face with black-stroked outline, eyes, and a curved mouth is rendered as a reusable React component composition. The face is centered in an SVG canvas using a group transform, with facial features positioned via relative offsets and radii. The mouth uses a D3 `arc` generator with specified inner/outer radii and angles, while the face structure is built from separate React components for the background, eyes, mouth, and container. The example demonstrates React’s component model combined with D3’s geometric shape API to create a modular, parameterized visualization.

Apr 6, 2021
Loading thumbnail…

Smiley Face Part 1

A half-finished smiley face is drawn in SVG using React and D3. The code renders yellow and black circles for the face and eyes, while the mouth is generated with `d3.arc()` to create a partial donut shape. Static coordinates and dimensions like `centerX`, `eyeOffset`, and `mouthRadius` control the layout, making the face appear symmetrical but incomplete.

Apr 5, 2021
Loading thumbnail…

First Visualization

This example displays the text "Hello D3" in the center of the page using a very large 13em font size. It demonstrates the most basic use of D3.js to manipulate the DOM, selecting the body element with `select` and setting its text content via `.text("Hello D3")`. The visualization relies on the D3 v6 library loaded from a CDN and the accompanying script is bundled in `bundle.js`. The page itself contains no charts or data, serving purely as a starting point for learning D3 conventions.

Apr 4, 2021