Utsav Khatu

@utsavk28·9 public vizzes

Fork of Stylized Line Chart

This example visualizes weekly temperature data for San Francisco as a stylized line chart built with React and D3 v5. The chart displays temperature trends over time, using a smooth curved path generated with `line()` and `curveNatural` to connect data points. Note that the commented-out code for circles means no individual data points are rendered—only the continuous line. Axes are created using React components that map D3 scales, with the data sourced from a CSV file loaded via `d3.csv`.

Mar 13, 2021

Loading thumbnail…

Fork of Refactored Bar Chart

This bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, using horizontal bars ranked by population. The visualization is built with React and D3.js v5, where the `d3.csv` loader fetches the data, `d3.scaleBand` positions country labels along the y-axis, and `d3.scaleLinear` maps population values to bar widths. Both axes are rendered as SVG elements through custom React components, with the left axis listing country names and the bottom axis showing population ticks. The chart updates reactively once the data loads, displaying all country names and population magnitudes without additional interactivity.

Mar 13, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a set of horizontal bars without axes or labels, emphasizing raw bar lengths. The visualization uses React with hooks to fetch and parse United Nations World Population Prospects 2019 data via d3.csv, slicing the first 10 records. It renders SVG rectangles, positioning them with d3.scaleBand for the categorical country axis and sizing widths with d3.scaleLinear for population values. The code includes grid lines with tick marks from xScale.ticks(), though tick text is positioned incorrectly, and the chart shows only the bars and gridlines.

Mar 11, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of engine displacement against horsepower, with vehicle names accessible as tooltips. It uses the Vega-Lite API to construct the visualization declaratively, then renders it as SVG through Vega. The code loads automobile data from an external CSV file using `d3.csv`, and adapts the plot to the full viewport size. Configuration customizes axis and label styling for readability.

Mar 11, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates the size and structure of a dataset containing CSS named colors, displaying the file size in kilobytes, row count, and column count. It loads the data from a remote CSV file using D3’s `csv` utility, while React’s `useState` and `useEffect` hooks manage the asynchronous fetch and component state. The rendered output is a simple text summary generated by a custom `message` function that uses `d3.csvFormat` to calculate the byte length. The visualization is minimal, focusing on data loading and state management rather than graphical representation.

Mar 10, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A yellow circle with a black stroke follows the mouse cursor across the full browser window, responding to every movement of the pointer. The React application uses the `onMouseMove` event to update the circle's center coordinates, which are stored in component state via the `useState` hook. Rendered as SVG, the circle's position dynamically updates as the user moves the mouse, with the viewport dimensions derived from `window.innerWidth` and `window.innerHeight`.

Mar 10, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example displays a yellow smiley face with eyes, a smile, and subtle eyebrows, resized to fill the browser window. It uses React components to structure the SVG elements, while D3’s `arc()` generator creates the curved paths for the mouth and eyebrows. The face, eyes, and strokes are drawn declaratively with SVG circles, with positions and radii computed from the viewport dimensions. Code leverages ReactDOM to mount the composition and D3 v6 for path generation.

Mar 10, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization shows a static yellow smiley face drawn on an SVG canvas. The face consists of a large yellow circle with a black outline and two smaller solid black circles serving as eyes. The code uses raw SVG elements—circle tags—positioned with explicit x and y coordinates to construct the face, with the main circle sized at 245 pixels in radius. The SVG is embedded directly in the HTML document, using basic styling properties like fill and stroke to define colors and outlines. The visualization is a simple, non-interactive illustration of geometric shapes forming a recognizable character.

Mar 10, 2021

Loading thumbnail…

Fork of Hello HTML

This example renders a simple smiley face using two SVG circles with black strokes and a yellow fill, positioned on a 400-by-400 canvas. It demonstrates basic SVG drawing with the `circle` element, setting attributes like `cx`, `cy`, `r`, `fill`, and `stroke` directly in the markup. The page includes embedded CSS for a similar styled div, though it is commented out. Purely static, it shows how hand-coded SVG can create recognizable shapes without external libraries or data sources.

Mar 10, 2021