sgalhamdani

@sgalhamdani·11 public vizzes

Untitled

This interactive visualization displays regional population data over time, where each region appears as a color-coded circle whose radius corresponds to a selected year’s population value. A slider controls the year from 1946 onward, triggering a smooth transition that resizes the circles to reflect changing data. The SVG renderer uses D3.js v3 scales and axes, with circle positions fixed by an ordinal x-axis and a linear y-scale for sizing. Hovering reveals tooltips with region and population details, while the data is loaded from an external CSV file.

Dec 1, 2020

Loading thumbnail…

HTML Starter

An interactive bar chart tracks Slack message counts across three categories—public channels, private channels, and direct messages—over a date range. A slider input updates highlighted circles for each category, with tooltips showing message counts for selected dates. Built with React, D3 v3, and SVG, the visualization uses `d3.scale.ordinal` for x positioning, `d3.svg.axis` for axes, and transitions for circle radius changes. Data comes from a remote CSV file via `d3.csv`.

Dec 1, 2020

Loading thumbnail…

Taiwanese Internatiobal Trade

A bar chart displays Taiwan's total trade values for various countries across years, with a horizontal timeline above it. Users hover over circles representing years from 2001 to 2019 to update the chart, triggering a smooth transition as the bars and axes animate to reflect the selected year's data. The visualization uses D3.js v4 with SVG rendering, employing scales, axes, and transition methods such as `transition().duration()` to animate changes. The code loads CSV data from a GitHub raw URL and renders in React, though the primary implementation is in plain JavaScript.

Nov 30, 2020

Loading thumbnail…

Untitled

This example shows how D3.js can animate transitions between two different datasets, displayed as orange circles along a horizontal axis. The circles’ radii and horizontal spacing are derived from each dataset’s values, and a button toggles between the two arrays. The implementation uses `transition()` to animate the circles’ `cx`, `cy`, and `r` attributes over 500 milliseconds. The code relies on D3’s selection and `.enter()`/`.exit()` methods to add or remove circles when the dataset changes, with SVG elements for rendering.

Nov 29, 2020

Loading thumbnail…

HTML Starter

This example presents three animated circle charts, each with its own dataset and button. Clicking a button cycles through data values, causing the corresponding circle’s radius to transition smoothly while its numeric label updates. The visualization uses D3 v4 with `d3.select`, `d3.scaleLinear` for mapping data to radius and color, and `transition().attr` to animate changes. Each circle’s fill shifts along a gradient, and buttons trigger the updates through custom click handlers.

Nov 29, 2020

Loading thumbnail…

HTML Starter

Nov 29, 2020

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL using D3 v5’s `d3.csv` method, which asynchronously fetches and parses the file, logging the resulting array of objects to the console. The code also includes commented-out alternatives using `fetch` with `async`/`await` and the `d3.csvParse` function, illustrating different approaches to handling CSV text. The visualization itself is minimal—no graphical output is rendered—focusing purely on the data ingestion pipeline. The data source is a CSV containing CSS named colors, fetched from a GitHub Gist.

Nov 27, 2020

Loading thumbnail…

Untitled

This chart displays a stacked area graph of Slack message volumes over time, with each colored layer representing a distinct data category. The visualization uses the d3.stack() function to aggregate series and d3.area() to generate the SVG path for each layer, colored via a d3.scaleOrdinal() palette. Time values are parsed with d3.timeParse() and mapped using d3.scaleTime(). The data comes from a CSV file hosted on GitHub, loaded with d3.csv().

Nov 25, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a basic treemap visualization using D3.js within an HTML page. It displays hierarchical data from a CSV file as nested rectangles, with each leaf node rendered as a colored square with a white text label. The code uses `d3.stratify()` to convert the flat CSV data into a hierarchy, `d3.treemap()` to compute the layout positions, and SVG `rect` and `text` elements for rendering. The rectangles are filled with a teal color and outlined in black, following the structure of the provided one-level dataset.

Nov 19, 2020

Loading thumbnail…

Temperature in San Fransisco Line Chart

A line chart displays a week of temperature measurements in San Francisco, with time on the x-axis and degrees on the y-axis. The visualization uses D3 v6 to load CSV data, scale time and linear values, and draw a smoothed curve with `curveBasis`. Gridlines extend across the plot area from axis ticks, and labeled axes and a title are added as SVG text elements. The chart renders to a static SVG canvas with maroon strokes and clear tick labels.

Nov 7, 2020

Loading thumbnail…

Temperature in San Fransisco Line Chart

This line chart displays a week of temperature data in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smooth maroon path over a grid. The data is loaded from a CSV file via `csv()`, and the SVG output includes axis labels and a title, styled with custom CSS for fonts and tick marks.

Nov 7, 2020