Gabrz

@Gabrz·19 public vizzes

SVG Demo

This demo displays a minimal SVG visualization: a single D3 axis rendered inside an SVG element. The axis is created from a two-value data array, with a linear scale using the extent of the data and a bottom-oriented axis. The code uses d3.scaleLinear, d3.extent, and d3.axisBottom, and calls the axis with a D3 selection. The scale’s domain is normalized with .nice(), and the axis is placed in a group with a transform offset. The bundle.js file contains the compiled index.js, which imports these D3 v5 functions directly.

May 31, 2020

Loading thumbnail…

D3 Course 11: Scatter Plot with Menus

This interactive scatter plot lets users explore the relationship between any two numeric columns from the auto-mpg dataset by selecting axes from dropdown menus. The visualization demonstrates a unidirectional data flow pattern, where menu selections trigger re-renders of the entire chart. Built with D3 v5, it uses scaleLinear, axisBottom, axisLeft, and transition methods to animate circles from the center to their positions. The General Update Pattern is applied through enter/merge selections, and the subtle animations use staggered delays for a cascading effect.

May 31, 2020

Loading thumbnail…

D3 Course 14: Melting Data for Multiple Lines

This visualization displays population estimates and projections for world regions from 1950 to 2100, with each region shown as a distinct colored line. A vertical black line marks a selected year, and users can move their mouse across the chart to update this selection. The code uses d3.csv to load two UN population datasets, merges them after melting columns into rows, and applies d3.timeParse to handle yearly dates. The lines are rendered as SVG paths using d3.line, with d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal managing the axes and colors.

May 14, 2020

Loading thumbnail…

D3 Course 13: Line Chart with Multiple Lines

This line chart displays temperature readings over time across multiple cities, with each city represented by a distinct colored line and a sorted color legend. The visualization uses D3 v5 APIs including `d3.nest()` to group data by city, `d3.line()` with `curveBasis` for smooth paths, and `scaleOrdinal` with `schemeCategory10` for colors. Data loads from a CSV file containing one week of sensor measurements. The chart applies blended stroke modes and rounded line caps for aesthetic distinction.

May 13, 2020

Loading thumbnail…

D3 Course 3: Line Chart

This example presents a line chart of temperature over time in San Francisco, plotting daily temperature readings along a continuous timeline. The visualization uses D3 v5 with an SVG rendering approach, employing scaleTime and scaleLinear for the axes, and a line generator with curveBasis to create a smooth path. The chart includes labeled axes for "Time" and "Temperature," a title, and gridlines generated via axisBottom and axisLeft with tick sizes. Data is loaded asynchronously from a CSV file through a custom getData() promise, which resolves after a two-second delay before rendering.

May 13, 2020

Loading thumbnail…

D3 Course 12: Circles on a Map

This example visualizes global population estimates for 2018 as semi-transparent circles projected onto a natural Earth map. It uses d3.geoNaturalEarth1 and d3.geoPath to render countries from TopoJSON, while d3.geoCentroid computes each country’s center for circle placement. The data comes from a UN population CSV, merged by country code, with missing or unmatched values highlighted in red. Circles are sized using d3.scaleSqrt, and interactive zoom is enabled via d3.zoom. A custom legend displays population value ticks.

May 13, 2020

Loading thumbnail…

D3 Course 10: Choropleth Map

This choropleth map shows global economic classifications by country, with a clickable color legend that filters and highlights nations matching the selected category. It visualizes an ordered attribute across the Natural Earth projection using a spectral color scale, with tooltips displaying country names and economic values. The example integrates TopoJSON world geometry with tabular TSV data via `Promise.all` and `topojson.feature`. It uses D3 v5 APIs including `scaleOrdinal`, `geoPath`, `geoNaturalEarth1`, and `zoom` for pan/zoom interaction. The componentized code separates data loading, map rendering, and legend logic, using unidirectional data flow to update both when the legend is clicked.

Apr 17, 2020

Loading thumbnail…

D3 Course 9: Color and Size Legends

This example demonstrates interactive color and size legends built with D3 v5, rendered as SVG. It shows categorical color encoding for fruit types (apple, lemon, lime, orange) using `scaleOrdinal`, and quantitative size encoding for values 0–10 using `scaleSqrt`. The legends are created as reusable components via `colorLegend` and `sizeLegend` functions, which compute tick values from the size scale and position circles with text labels. Styling is applied through external CSS, with the SVG canvas sized at 960×500.

Apr 7, 2020

Loading thumbnail…

D3 Course 8: Tree Visualization

This example shows a node-link tree visualization of world geography, using a hierarchical dataset that groups countries by region and subregion. It displays the tree horizontally, with the root "World" on the left and its descendants branching to the right, each node labeled with its name. The visualization is built with d3.select, d3.json, d3.tree, d3.hierarchy, and d3.linkHorizontal to generate the layout and curved paths. Text labels are positioned and sized based on depth, and the entire SVG is wrapped in a zoomable group via d3.zoom. The styling uses a custom "Do Hyeon" font and an SVG path renderer.

Apr 6, 2020

Loading thumbnail…

D3 Course 7: World Map - Rotating Globe

This interactive globe visualizes world countries using an orthographic projection that continuously rotates over time. The example renders landmasses in light green with hover highlighting, displays graticule meridians, and includes a blue ocean sphere. It loads geographic data from the world-atlas package, which provides both GeoJSON and TSV country name lookups. Using d3.geoOrthographic, d3.geoPath, and d3.geoGraticule functions, the globe animates via d3.timer, rotating the projection's horizontal axis while maintaining a fixed vertical tilt, with zoom support integrated through d3.zoom.

Apr 2, 2020

Loading thumbnail…

D3 Course 7: World Map

This example demonstrates an interactive world map using D3 v5 and TopoJSON data from the world-atlas package. It renders countries with the Natural Earth projection via d3.geoPath, applies an ocean sphere outline, and colors landmasses light green with black strokes. The map supports panning and zooming through d3.zoom, highlights countries in red on hover via CSS, and displays country names using tooltips sourced from a TSV lookup file.

Apr 2, 2020

Loading thumbnail…

D3 Course 6: Interaction with Unidirectional Data Flow

This example demonstrates interactive selection and highlighting of fruit marks in an SVG bowl using unidirectional data flow. Clicking or hovering a circle triggers callbacks that update the selected or hovered fruit ID, which then re-renders the bowl with the appropriate stroke color—black for clicked, orange for hovered. The code uses d3.scaleOrdinal for color and radius mapping, d3.select for data joins with enter/merge/exit, and d3 transitions to animate circle radius changes over one second. The fruit data is generated with d3.range and random IDs, with timed updates removing or replacing fruits.

Apr 2, 2020

Loading thumbnail…

D3 Course 5: General Update Pattern Part 2

This example demonstrates the D3 general update pattern with nested SVG elements, showing how a bowl of fruit changes over time through enter, update, exit, and merge operations. Animated transitions occur as apples are removed and one apple transforms into a lemon, with each fruit drawn as a group containing a circle and text label. The code uses d3.select, data joins with key functions, d3.scaleOrdinal for color and radius mapping, and explicitly manages nested element updates via merge. The data consists of generated fruit objects rendered as SVG groups.

Apr 2, 2020

Loading thumbnail…

D3 Course 5: General Update Pattern Part 1

This example demonstrates the D3 General Update Pattern for smoothly adding, updating, and removing SVG circles. Fruits (apples and lemons) are bound to data using a key function, with new elements entering at radius zero and exiting elements shrinking before removal. Animated transitions of 1000 milliseconds adjust circle positions and radii while the `merge` method updates existing elements. The code uses `d3.select`, `d3.range`, `scaleOrdinal`, and `transition.attr` to manage state changes triggered by `setTimeout` events.

Apr 2, 2020

Loading thumbnail…

D3 Course 4: Area Chart

This area chart visualizes world population by year from 1960 to 2015, using a smooth curved path to show growth over time. The visualization loads data from a CSV file via `d3.csv`, then renders an SVG path generated with `d3.area` and `curveBasis`. Axes are created using `d3.axisBottom` and `d3.axisLeft`, with scales from `d3.scaleTime` and `d3.scaleLinear`, and population values are formatted in billions using `d3.format`.

Apr 2, 2020

Loading thumbnail…

D3 Course 2: Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The visualization is built using D3 v5 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes and scales. Data is loaded asynchronously from a CSV file via `d3.csv`, with numeric fields parsed for accurate plotting. The chart includes labeled axes, a title, and semi-transparent red circles, with gridlines generated through tick size adjustments.

Apr 2, 2020

Loading thumbnail…

D3 Course 1: Bar Chart

A horizontal bar chart displays population estimates for ten countries, with bars ordered from largest to smallest population. The visualization uses D3 v5 with `d3.csv` to load data, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for axes. Population values are formatted using `d3.format` with abbreviations like "B" for billions. The SVG rendering includes a title, axis labels, and grid lines, following the margin convention.

Apr 2, 2020

Loading thumbnail…

SVG Demo

This example demonstrates basic Scalable Vector Graphics (SVG) shapes, including circles, rectangles, lines, and paths, rendered directly in an HTML page. The visualization uses inline SVG elements within an `index.html` file, with styling applied via an external `styles.css` stylesheet. The SVG canvas is scaled and translated using SVG transform attributes, while CSS classes like `.lines` and `.c3` control stroke colors, widths, and fill properties for grouped elements. The code highlights how SVG’s native coordinate system and CSS cascading rules combine to define a static, vector-based graphic.

Mar 25, 2020

Loading thumbnail…

Cars Report

This example presents a car report, displaying a list of vehicles filtered by price. The page initially shows a loading message, then renders each car’s year, make, model, and price as plain text. The data comes from a hardcoded JSON array and is loaded asynchronously through a JavaScript `Promise` with a simulated delay. The core logic uses `generateReport` to filter cars below a price threshold and `formatCar` to create the display string, while the HTML `<pre>` element presents the final output. The report is updated using the DOM API `getElementById` and `textContent`.

Mar 25, 2020