Tammminana

@Tammminana·16 public vizzes

hub scatter plot with axis labels and tooltip

This line graph shows metric values over time, with labeled axes and a tooltip that displays details on hover. Using D3.js, it plots data points for a service's RTS breaches across several weeks in 2022. The chart renders as an SVG with a steelblue line, and includes a tooltip element appended to the graph container. The x-axis displays dates formatted with `d3.timeFormat`, while the y-axis shows metric values. Data comes from a static dataset containing timestamp and value fields.

May 31, 2023

Loading thumbnail…

biz report Stratified Scatter Plot

This visualization displays the daily count of RTS Breaches from the `fk-sp-biz-report-generator` service across June and July 2022, with each date plotted along the x-axis and the corresponding breach value on the y-axis. The scatter plot uses grey circles that animate into view, growing from a radius of zero to their final size upon rendering. Built with D3 v6 and the reusable chart pattern, the code leverages `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `transition` to construct the axes and animate the marks. The data originates from a hardcoded array in `dataSet.js`, and the SVG is rendered across the full browser window.

May 14, 2023

Loading thumbnail…

D3 line chart: Daily temperature in Belgium for 2021

This visualization displays daily average air temperatures in Belgium throughout 2021, using a red line chart with a natural curve to connect 365 data points. The React-based application loads CSV data from a GitHub gist and renders the chart as SVG using D3 v7 scales (scaleTime, scaleLinear), axes, and the d3.line generator with curveNatural interpolation. The y-axis labels temperature in Celsius, while the x-axis shows time in month-year format, providing a clear overview of seasonal temperature variations across the year.

May 13, 2023

Loading thumbnail…

React D3 Conditional Line Chart Practice

This chart plots a monthly risk value time series from a CSV file using React and D3 v6. Points and connecting lines are rendered as SVG, with circles colored green, amber, or red based on thresholds at 50 and 75 percent, shown as dashed reference lines. The chart uses `scaleTime` and `scaleLinear` for axes, plus a custom `line` generator for the path. Hovering a circle reveals a tooltip with the formatted percentage via the SVG `title` element.

May 13, 2023

Loading thumbnail…

Grid Menus Animated Species Stratified Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Three dropdown menus let viewers change the x-axis, y-axis, and filter by species, triggering smooth D3 transitions that animate circle positions and colors. The visualization uses d3.scaleLinear for axes, selection.join for enter-update-exit patterns, and SVG rendering with a 1-second transition duration for the animated updates.

May 13, 2023

Loading thumbnail…

Smoothed Daily Coronavirus Deaths by Country

This chart displays smoothed daily coronavirus death counts by country over time, using a logarithmic y-axis to accommodate wide variations in scale. Each country’s timeseries is rendered as a line, and hovering over any point highlights that country’s line and reveals a tooltip with the total deaths and date. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLog`, and `line` for axes and paths, while a `VoronoiOverlay` handles mouse interactions. Data comes from the Johns Hopkins Coronavirus Dataset, with daily values smoothed via repeated averaging in a custom `blur` function.

May 12, 2023

Loading thumbnail…

Simple Line Chart

This simple line chart displays a time series of closing stock prices over a month, with date on the x-axis and price on the y-axis. The chart is built as a reusable D3 module using the ProD3 pattern, featuring margins, axes, a steelblue path, and axis labels. It loads CSV data and renders with SVG, using d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line.

May 12, 2023

Loading thumbnail…

D3.js Line Chart

This D3.js line chart visualizes customer counts per year from a CSV dataset, rendering an SVG line with steelblue strokes. The chart uses `d3.csv` to load data, `d3.scaleBand` for categorical years on the x-axis, and `d3.scaleLinear` for the y-axis. It applies `d3.axisBottom` and `d3.axisLeft` for labeled ticks, and draws the line via `d3.line` with custom positioning. Axes are labeled "Year" and "customers," and the code is structured as a reusable pattern inspired by Bostock’s chart conventions.

May 12, 2023

Loading thumbnail…

Grid Menus Animated Species Stratified Scatter Plot

This example presents an animated scatter plot of the Iris dataset, stratified by species, with interactive dropdown menus to change the x and y axes and filter by species. It shows how the data points transition smoothly between configurations using D3’s `selection.join` and `transition`. The code uses D3 v6 with SVG rendering, and includes reusable chart and menu modules. The menus allow selection of sepal and petal measurements, while the animation updates circle positions, color, and axis scales accordingly.

May 10, 2023

Loading thumbnail…

Piechart Practice

This pie chart visualization shows the top cuisine types by number of orders from a NYC food delivery dataset sourced from Kaggle. It renders a donut chart with colored slices, labels showing order counts above 100, and a legend listing each cuisine type. The visualization uses d3.pie and d3.arc to generate the chart, d3.scaleOrdinal for color mapping, and d3.flatRollup to aggregate order counts by cuisine category. Data is loaded asynchronously via fetch and parsed with d3.csvParse.

May 8, 2023

Loading thumbnail…

Vega-Lite API Template

This example shows a stacked bar chart of population by country, with bars segmented by religion. The visualization is built entirely with the Vega-Lite API, which registers Vega and Vega-Lite libraries in a D3-based setup. Data is loaded asynchronously from a CSV via D3’s `csv` function. The chart uses a config object to customize axis and label styles, and a tooltip handler displays population values on hover.

May 8, 2023

Loading thumbnail…

Outbreaks

The visualization aggregates reported foodborne illness outbreaks by month, summing illnesses and color-coding bars by primary transmission mode. It filters out records with missing transmission data from a public national outbreak dataset. Built with React, D3 v5’s `csv` loader, and the Vega-Lite API, the bar chart uses `markBar`, `fieldQ('Illnesses').aggregate('sum')`, and `fieldN('Primary Mode')` for color encoding, with custom axis and label styling from a shared config.

May 8, 2023

Loading thumbnail…

Vega-Lite API Template

A bar chart displays the per-capita burglary rate for Massachusetts cities, filtered to those with rates above 0.005, with cities sorted descending by value. Built with the Vega-Lite API, it uses `vl.markBar()` and `vl.y().fieldQ()` for the quantitative axis, while `getData.js` loads a CSV via d3's `csv` method and computes the rate. The chart renders to SVG, with custom axis and label styling from `config.js`.

May 8, 2023

Loading thumbnail…

Bar Graph Horizontal

This horizontal bar chart visualizes the sum of Google Play Store app reviews across categories, with each bar colored by content rating. The bars are sorted by total reviews, making top categories like games and communication easy to identify at a glance. Built using the vega-lite-api library, it loads data via d3's CSV parser and renders an interactive SVG with tooltips displaying aggregate review counts. The visualization applies a custom config for cleaner axes and labels, and uses automatic sizing to fit the browser window.

May 8, 2023

Loading thumbnail…

Scatter Plot World Heritage List

This interactive scatter plot visualizes UNESCO World Heritage Sites by geographic coordinates, with each dot colored by continent. The view reveals Europe’s high concentration of heritage sites, while a second view plotting inscription date against continent shows fewer sites in Oceania and Africa, though overplotting obscures comparisons. Users can switch the x- and y-axes between longitude, latitude, continent, and date using dropdown menus. Built with D3 v6, the visualization uses SVG, scalePoint and scaleLinear for axes, scaleOrdinal for color mapping, and transitions to animate dot position and growth on updates.

May 8, 2023

Loading thumbnail…

Animated Scatter Plot with Menus

This example presents the classic Iris dataset as an interactive scatter plot embedded in a full-screen SVG. Two dropdown menus let viewers dynamically switch the variables mapped to the x and y axes, choosing among the four quantitative measurements or the categorical species label. The visualization is built with D3 v6, using the `select` API for declarative DOM manipulation and `transition` to animate the movement of the data points, which reposition with a staggered delay to their new coordinates. The menus themselves are constructed using a reusable JavaScript component pattern, demonstrating a modular approach to building interactive charts.

May 8, 2023