Skip to main content
Log in
G

Gal Thelander

@gokcepaz·6 public vizzes

Loading thumbnail…

Untitled

This example displays a single arc shape as an SVG path, rendered in a teal fill with a black stroke. The arc is generated using D3.js’s `d3.arc()` API, which specifies inner and outer radii alongside start and end angles in radians, positioned via an SVG transform. The visualization is embedded in a minimal HTML page that loads D3 v4 and React, with the path drawn directly into an SVG container.

Dec 21, 2020
Loading thumbnail…

Lesson 3

An interactive stacked bar chart displays purchase quantities of various grocery items across years, with controls for filtering by year, month, or week. The visualization uses NVD3’s `multiBarChart` with stacked bars, driven by D3.js for rendering and transitions. Data comes from a local JSON file containing product names and yearly values, while a sidebar offers radio buttons and dropdowns to adjust the temporal granularity. The chart updates its axes and bar groups based on the selected period, integrating SVG rendering for crisp visuals.

Oct 15, 2020
Loading thumbnail…

Gal's Superb Project

This example displays a dynamic network visualization that animates between a circular layout and a force-directed clustering arrangement. Using React and D3’s `forceSimulation`, it models nodes as charged particles with links, allowing users to toggle between structured and organic forms. The scene renders via SVG, with transitions updating node positions and opacity. The code reads data from a local JSON file, illustrating interactive graph reconfiguration through D3’s physics engine.

Oct 15, 2020
Loading thumbnail…

gals visualizations

This example displays a simple static visualization consisting of a grey rectangle and a circle rendered in an SVG canvas. The code uses d3.csv to load median income data from a CSV file, but the loaded data is not connected to the shapes. The rectangle is positioned with explicit x and y coordinates, while the circle appears at a fixed location without any fill color specified, making it use the default black fill. The visualization demonstrates basic D3 selections and SVG shape creation with d3.select and `svg.append`.

Sep 21, 2020
Loading thumbnail…

Document

This example displays a single red SVG rectangle that fills the entire 960 by 500 pixel viewport. Using D3 v6, the code selects the SVG element and applies the background color directly through its style property. The visualization demonstrates the simplest possible rendering approach, where a static shape is styled without any data binding or interactive behavior. The HTML page loads the D3 library from a CDN and runs the JavaScript which modifies the SVG element.

Sep 21, 2020
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries for 2020, based on data from the United Nations World Population Prospects 2019. Horizontal bars are rendered as SVG rectangles using React and D3.js v5, with the `scaleBand` and `scaleLinear` APIs to map country names and population values to coordinates. The chart features a custom Poppins font, styled ticks, and tooltips that show population values in billions. Data is loaded asynchronously from a CSV file using D3's `csv` function.

Sep 21, 2020