Yashashvi Singh

@Yashi11·9 public vizzes

Stock Price Change

This chart displays how multiple stock-related values change over time as a stacked area graph. Using d3.csv to load a wide-format dataset, it maps years on the x-axis and numerical point values on the y-axis. The code employs d3.stack to aggregate six categories, which are rendered as colored SVG paths via d3.area, with a scaleOrdinal providing the palette. Axes are generated with scaleTime, scaleLinear, and d3.axisBottom/axisLeft, while labels for “Year” and “Points” are appended as SVG text elements.

May 21, 2022

Loading thumbnail…

Interactive WorldMap for Zara and Nike Shops

This interactive world map visualizes the distribution of Zara and Nike shops, with each country colored according to its economy classification. Built with D3.js v5, it uses a natural Earth projection (`d3.geoNaturalEarth1`) and `d3.geoPath` to render countries from TopoJSON data loaded via `topojson.feature`. The map supports pan and zoom through `d3.zoom`, and hovering over a country changes its fill to red while a tooltip shows the country name and economy value. Color encoding uses a spectral scale from `d3.schemeSpectral`.

May 21, 2022

Loading thumbnail…

Shirt

This example draws a stylized shirt using React and D3. It shows three stacked rectangles in blue tones forming the shirt’s body and a semicircular arc for a collar. The SVG shapes are produced with JSX elements, while the arc path is generated by D3’s `arc()` function. The code uses ReactDOM to render the visualization, and D3 v7 provides the geometric path calculations.

May 21, 2022

Loading thumbnail…

the_shoe

A stylized smiley face is rendered as an SVG, composed of a yellow circle, two black eyes, and a mouth drawn as a semicircular arc. The face is built through modular React components, with each part defined in its own file and composed together. The code uses React’s component structure and ES6 modules, while D3’s `arc` API generates the mouth path, and `d3.range` creates an array that is not used in the final display. The example demonstrates a clean separation of visual elements via reusable components, rendered with SVG in a React app.

Mar 26, 2022

Loading thumbnail…

Assignment 6: 66 DOD

This visualization displays temperature over time as a continuous line chart, using data from the UCI Machine Learning Repository’s Auto MPG dataset via a Gist URL. The chart, built with vega-lite-api, vega-lite, and vega, encodes time on the x-axis and temperature on the y-axis, with tooltips showing temperature values. It loads CSV data using d3.csv and applies custom axis and label styling from a separate config module.

Mar 20, 2022

Loading thumbnail…

Assignment 4: 66 DOD

This example loads a CSS-named-color dataset from a GitHub gist URL using D3’s `csv` utility, storing the result in React state via `useState` and `useEffect`. The app then displays a summary message using a custom `message` function, which reports the number of rows, columns, and the formatted file size in kilobytes using `d3.csvFormat`. Rendered as an SVG-backed React component, the visualization updates from a “Loading…” placeholder to the final data summary once the asynchronous fetch completes.

Mar 19, 2022

Loading thumbnail…

Assignment2: 66 DOD

This example displays basic metadata about a CSV file fetched from a GitHub Gist, reporting the row count, column count, and file size in kilobytes within a large-text `<pre>` element. The page uses D3 v7’s `d3.csv()` method, which internally handles the network request via Fetch promises, to load and parse the remote dataset. The visualization simultaneously serves as a minimal demonstration of asynchronous data loading, contrasting this clean approach with commented-out alternatives that show older Promise-chaining patterns and the "Pyramid of Death" antipattern. No graphical chart is rendered; instead, the output is purely textual summary statistics.

Mar 19, 2022

Loading thumbnail…

Assignment 3: 66 DOD

Four colored circles follow the mouse pointer across a full-window SVG canvas, each offset diagonally from the previous one so they trail in a line. The React component tracks pointer movement via the SVG `onMouseMove` event, storing coordinates in state, and re-renders the circles at the updated positions. The visualization uses `react` and `react-dom` with the `useState` hook to manage the mouse position and render SVG circle elements.

Mar 16, 2022

Loading thumbnail…

Assignment 1: 66 DOD

The visualization displays a grid of 18 randomly generated smiley faces, each rendered as a yellow circle with black eyes, white pupils, and an arc-based mouth. Built with React and D3 v7, the code composes reusable components like `BackgroundCircle`, `Eyes`, and `Mouth` using SVG elements. Each face’s eye radius, pupil size, and mouth width vary via `Math.random()`, creating subtle visual diversity across the repeated layout. The `d3.arc` API generates the mouth curves, while SVG circles handle facial features within a translated coordinate system.

Mar 4, 2022