Gauri Jare

@jaregauri·6 public vizzes

Hourly energy demand generation

This visualization displays hourly energy demand and generation data for Spain across four years, with a table rendering the raw CSV content for inspection. The code fetches the dataset, parses it using `d3.csvParse`, and stores the parsed rows in application state. Each update triggers a re-render through the `viz` function, which uses D3’s `select` and `join` methods to display the data as JSON-formatted text within a `<pre>` element, driven by a simple state management loop.

Jan 22, 2023

Loading thumbnail…

Hotel reservation demand

This example displays raw hotel reservation data from a Kaggle dataset, showing each booking record as structured JSON with fields like lead time, number of guests, and cancellation status. The visualization initially fetches the CSV file using `fetch()` and parses it with `d3.csvParse`, then renders the parsed array of objects as text in a `<pre>` element via D3’s selection and data join. A simple state management pattern tracks the loading status and updates the display asynchronously once the data arrives.

Jan 22, 2023

Loading thumbnail…

Supermarket Sales

This example shows the raw contents of a supermarket sales dataset as a formatted JSON preview, displaying fields such as branch, product line, unit price, quantity, tax, total, and rating. It demonstrates a simple data-loading pattern: the code initially sets a loading state, fetches the CSV file, and parses it with `d3.csvParse`. The parsed data is then rendered into a `<pre>` element using D3's data join (`select`, `data`, `join`), giving a clear view of the structured records. The visualization is built with D3 v7 and uses a minimal state management approach.

Jan 22, 2023

Loading thumbnail…

Hotel booking demand

This visualization displays hotel booking demand data loaded from a CSV file and rendered as raw JSON text. It uses D3 v7’s `csvParse` to parse the dataset, converting numeric fields such as petal length and width to numbers. The code fetches data from a remote gist URL and updates the display via a state management pattern, showing the parsed contents in a `<pre>` element. The visualization demonstrates basic data loading and rendering without additional graphical encodings.

Jan 22, 2023

Loading thumbnail…

Fork of Interactive Pie Chart showing percentage of flights delayed by 15 mins w.r.t Departure

This interactive donut chart visualizes the percentage of flights delayed by more or less than 15 minutes relative to their scheduled departure. Each slice represents a delay category, colored orange for delays exceeding 15 minutes and blue for shorter delays, with hover tooltips revealing each category’s share of total delay time. The visualization is built with D3.js v5, using `d3.pie` and `d3.arc` for the donut geometry, `d3.scaleOrdinal` for colors, and SVG rendering. Data comes from a flight delay analysis dataset, aggregated via `d3.nest` to sum departure delays by category.

Jan 22, 2023

Loading thumbnail…

Make Something - Gauri Jare

A teal rectangle follows the mouse cursor across a full-window SVG canvas. The code uses d3.select to create the SVG and append the rectangle, setting its width and height based on the window dimensions. A mousemove event handler updates the rectangle’s x and y attributes with the cursor’s event coordinates. The plain black-stroked shape moves freely, demonstrating basic D3 interaction with the DOM.

Jan 14, 2023