Skip to main content
Log in
I

indira-antgrvty

@indira-antgrvty·14 public vizzes

Loading thumbnail…

Fork of AQI Data in Bangor, Maine Over Time

This fork of AQI data for Bangor, Maine visualizes pageviews over time as a scatterplot, with each circle representing a game, virtual space, or quiz. The chart uses checkboxes to toggle category visibility, animating opacity and circle radius with transitions. The visualization leverages D3’s `csv`, `scaleTime`, `scaleLinear`, and `extent` APIs to load data and map dates to the x-axis and pageviews to the y-axis. Hover interactions trigger a tooltip, and the SVG rendering shows circles with a fixed fill color.

Jan 24, 2023
Loading thumbnail…

Interactive Demographic Donut Chart

This interactive donut chart visualizes the distribution of players across demographic categories, showing subcategories like age ranges (18–24, 25–34) and gender (male, female) as colored slices with hover tooltips displaying percentages and counts. A dropdown menu lets users switch between age and gender views, triggering animated transitions between datasets. The visualization uses d3.pie, d3.arc, d3.scaleOrdinal, and d3.transition in SVG, with data loaded from a CSV file via d3.csv. Hover interactions and a legend with category labels enhance readability.

Jan 24, 2023
Loading thumbnail…

Timeseries with buttons

A time series line chart displays event counts over time, with three buttons allowing viewers to switch between 15, 30, and 60-day datasets. The visualization uses d3.scaleLinear axes and a d3.line path with smooth transitions, animating both the line and axis updates over 3 seconds via d3.transition. Data comes from CSV files (data15.csv, data30.csv, data60.csv) of the Data Canvas Sense Your City Dataset, with the SVG rendered through D3 v6 and button-driven updates handled through d3.select event listeners.

Jan 24, 2023
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

A stacked bar chart displays two years of personal electricity consumption across multiple accounts within a three-family building. The SVG visualization uses d3.stack to aggregate data by account and date, with green and blue ordinal color encoding via d3.scaleOrdinal and d3.schemeCategory10. Axes are rendered using d3.axisLeft and d3.axisBottom, while hover interactions adjust rectangle opacity. A legend with account numbers appears in the upper-right corner, and the data comes from a CSV file loaded with d3.csv.

Jan 24, 2023
Loading thumbnail…

Fork of AQI Data in Bangor, Maine Over Time

This interactive line chart displays Air Quality Index (AQI) values for Bangor, Maine over time, with a dropdown menu allowing users to toggle between Ozone and PM2.5 pollutant data. The visualization uses React for the interface and D3 v5’s `scaleTime`, `scaleLinear`, and `line` with `curveNatural` to render smooth SVG paths and circles. Data is loaded from a local CSV file, with axes generated via custom React components and ticks formatted to show month labels.

Jan 23, 2023
Loading thumbnail…

Fork of Scatterplot with Iris Data

This example visualizes the Iris dataset as a scatterplot, mapping sepal length on the x-axis and sepal width on the y-axis. Each circle represents a sample, colored uniformly in teal, with a title tooltip showing the x-value. The visualization is built using React and D3 v7, with scales from `d3.scaleLinear` and axes rendered as SVG components. Data is loaded asynchronously via `d3.csv` from a remote gist, and the layout uses fixed margins and SVG groups for positioning.

Jan 19, 2023
Loading thumbnail…

Plot of Games with VL

This scatterplot visualizes weekly pageview metrics for a set of games, plotting each game’s unique pageviews against the week number. Each point is a game, colored by game name, with tooltips revealing unique pageview counts. The visualization is built with Vega-Lite, using the vl API to configure mark circle encoding, scaling, and tooltips. Data is loaded asynchronously via D3’s CSV parser and rendered with Vega–Lite’s automatic SVG output, configured with custom axis styling.

Jan 18, 2023
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, cycling through four feature comparisons (petal width/sepal length, etc.) every two seconds. Built as a reusable D3 chart function, it uses `d3.scaleLinear` for axes and `d3.axisLeft`/`d3.axisBottom` for ticks, with SVG circles for data points. The animation updates the x-value mapping via `setInterval`, re-rendering the plot to explore correlations dynamically. Styled with the Share Tech font, it demonstrates a flexible, data-driven scatter plot API.

Jan 18, 2023
Loading thumbnail…

Fork of Scatterplot with Iris Data

This example visualizes the Iris dataset as a scatterplot, mapping sepal length on the x-axis and sepal width on the y-axis. Each circle represents a sample, colored uniformly in teal, with a title tooltip showing the x-value. The visualization is built using React and D3 v7, with scales from `d3.scaleLinear` and axes rendered as SVG components. Data is loaded asynchronously via `d3.csv` from a remote gist, and the layout uses fixed margins and SVG groups for positioning.

Jan 18, 2023
Loading thumbnail…

Fork of Plot of Games with D3.JS with Images

This scatter plot displays website analytics for seven games across different weeks, plotting unique pageviews against week numbers as small green circles. The visualization loads data from a local `games.csv` file using `d3.csv`, then builds the chart with `scaleLinear` for both axes and renders points via `enter().append("circle")`. Axis ticks are generated with `axisLeft` and `axisBottom`. The chart uses SVG rendering within an HTML page that imports D3 v7 from a CDN, with minimal visual styling applied through the config file.

Jan 18, 2023
Loading thumbnail…

Fork of D3 Starter

This example presents a bar chart of website engagement metrics from a CSV file, showing the number of views for each page path. The chart uses D3 version 7 to create a linear x-axis scale for view counts and a banded y-axis for page names. Users can toggle individual bars on and off using checkboxes rendered alongside a list of the data points. The visualization renders with SVG and derives its data dimensions from the imported `csv` and `scaleBand` functions.

Jan 18, 2023
Loading thumbnail…

Timeseries

This timeseries line chart displays the monthly frequency of illnesses, hospitalizations, and deaths from a national outbreak dataset (National Outbreak Public Data Tool). The visualization reveals clear seasonality, with peak outbreak activity in winter and lowest counts in summer. Three overlaid lines use the Vega-Lite API, with data loaded and time-formatted via d3.csv and manual date concatenation. Hovering over any point triggers a tooltip showing the sum of that metric for the corresponding month. The chart is rendered as an SVG, with axes configured through a custom readme and config.js.

Jan 17, 2023
Loading thumbnail…

Fork of Heatmap with p5.js

This heatmap displays abortion rates per 1,000 women among 15–17-year-olds across eight U.S. states over sixteen years, using a green color scale from dark (<10) to bright (>40). Each cell encodes one state-year pair. The visualization includes axis labels, a legend, and explicit value thresholds. Built with p5.js, the sketch loads CSV data via `loadTable` from a Gist and renders cells using nested loops, `square()`, and `fill()` based on conditional color assignments. The dataset originates from a Kaggle resource on pregnancy and birth rates, filtered for readability.

Dec 21, 2022
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization that displays a single text message centered on the page. It loads D3 v5 from a CDN and uses the `select` API to set the text content of an HTML div element. The message text itself is imported from a local ES6 module, showcasing modular code organization. The page uses CSS to control the font size and alignment of the displayed text.

Dec 21, 2022