G

gorfoula

@gorfoula·19 public vizzes

Loading thumbnail…

Color and size legends

This example demonstrates the use of two separate legends to map data values to visual encodings. A color legend shows categorical fruit names with a d3.scaleOrdinal scale, while a size legend represents numbers from 0 to 10 with a d3.scaleSqrt scale that maps values to circle radii. The legends are rendered as SVG groups using custom reusable functions, with circles and text labels arranged vertically. The underlying data scales and spacing are defined in the JavaScript code, with fruit categories and numeric ranges specified directly.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3.js using a bowl of fruit visualized as SVG circles and text labels. It shows three special cases: removing the last item, updating an existing item’s properties, and filtering out a middle element. The code uses d3.scaleOrdinal for color and radius mapping, selection.enter(), .merge(), and .exit() to handle joins, with a rect drawn to represent the bowl. A timed sequence of setTimeout calls triggers each state change.

Loading thumbnail…

World Countries Hierarchy

A hierarchical tree visualization displays the world's countries organized by continent and subregion. The visualization uses D3 v5's `tree` layout with `linkHorizontal` paths to connect parent and child nodes. Text labels for each country are positioned according to the layout's x and y coordinates, with font sizes scaling logarithmically based on depth. The SVG rendering supports zooming and panning through D3's zoom behavior, and the data originates from a JSON file containing the nested geographic hierarchy.

Loading thumbnail…

Interactive map?!

This example shows a single green country from a world atlas dataset, rendered with the D3.js geoPath and geoMercator projection onto an SVG canvas. The map is interactive, as the entire graphic responds to zoom gestures through D3’s zoom handler, which updates the group transform. The underlying data comes from the world-atlas countries-50m JSON, loaded via d3.json and processed with topojson’s feature function. Hovering over the country path changes its fill to black via CSS. Only one country path is drawn, as the commented-out code for all features remains inactive.

Loading thumbnail…

Choropleth Map

This choropleth map shows countries colored by income group, with a clickable color legend that highlights matching regions and a pan-and-zoom interface. It uses D3 v5 with `geoNaturalEarth1` and `geoPath` to project TopoJSON world data loaded from the World Atlas, while `scaleOrdinal` and `schemeSpectral` assign colors. A zoom behavior updates the map transform on interaction. The legend, rendered with SVG circles and text, triggers the selection filtering.

Loading thumbnail…

Cloropleth MAP

This choropleth map visualizes countries by economic classification using a natural Earth projection. A color legend built with `d3.scaleOrdinal` and `schemeSpectral` maps each income group to a distinct hue, while hovering highlights a country in red. The map supports zooming and panning via `d3.zoom`. Data comes from the World Atlas TopoJSON and TSV files, rendered as SVG paths with `d3.geoPath`.

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by economic grouping, with a legend of colored circles and a natural Earth projection. It uses d3.geoPath, d3.geoNaturalEarth1, d3.scaleOrdinal with schemeSpectral, and d3.zoom for panning. The code loads world atlas TopoJSON and TSV data via topojson.feature, rendering country paths as SVG with hover highlighting.

Loading thumbnail…

GO Choropleth Map

A world map rendered with a blue sphere and red countries is created using D3 v5 and TopoJSON. The visualization loads geographic data from the world-atlas 50m dataset, combining TopoJSON geometry with TSV metadata to label countries. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw SVG paths, with zoom functionality provided by `d3.zoom`. Hovering highlights a country in red, while the static fill is also red, making the interaction subtle.

Loading thumbnail…

Let's make a map?!

This example shows how to create a simple world map by loading TopoJSON country boundaries and rendering them as filled paths. The code uses d3.json to fetch the world-atlas dataset, topojson.feature to convert it to GeoJSON, and d3.geoMercator with d3.geoPath to project and draw the countries. All shapes are appended as SVG path elements, styled with green fills and black strokes.

Loading thumbnail…

Hover to select

This interactive example demonstrates selection through hover using D3.js within a React framework. Five circles representing fruit items respond to mouseover and mouseout events, triggering a state change that highlights the selected circle with a black stroke. The visualization shows animated transitions as fruits are removed and one apple changes to a bitter lemon. Using D3 v5's `select`, `scaleOrdinal`, and transition methods, the SVG rendering animates circle radii and positions over 1000 milliseconds, with the selection state managed through React's state variable.

Loading thumbnail…

Click to select

Five fruits, rendered as colored circles in a bowl, respond to clicks by acquiring a black outline to indicate selection. The SVG visualization demonstrates dynamic updates using D3.js v5 within a React framework, where the `fruitBowl` function handles enter, update, and exit transitions. Animated with `transition().duration(1000)`, fruits shrink on removal and change color when swapped. The example shows D3’s `scaleOrdinal` for color and radius mappings and `select` for DOM manipulation, illustrating core data-binding and lifecycle management.

Loading thumbnail…

General Update pattern

This example demonstrates the general update pattern in D3.js, showing how data joins handle enter, update, and exit selections. A row of fruit circles—apples and a bitter lemon—change over time as items are removed or modified, with each circle’s fill and radius determined by a `scaleOrdinal`. The React-like component `fruitBowl` uses `selection.selectAll()` and `.merge()` to update SVG circles and text on each render, triggered by `setTimeout` callbacks. Transitions are commented out, so updates apply instantly without animation.

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face, rendered as SVG primitives, appears centered on a dark background. D3.js code appends a circle, eyes, eyebrows, and a mouth path created with the `arc` function. The animation uses chained `transition().duration()` calls to move the eyebrows down and back up over two seconds, demonstrating fundamental DOM manipulation. The example uses d3.v5 with the `select` and `append` APIs to build the figure.

Loading thumbnail…

Modifying Bar plot to a scatter plot D3.js

This example transforms a simple bar chart of population data by country into a scatter plot using D3.js. D3's `scaleLinear` maps population values to the x-axis, while `scalePoint` positions each country name along the y-axis, with circles rendered as the marks. The visualization reads from a CSV file and uses `axisLeft` and `axisBottom` to generate the axes, with tick labels formatted using D3's `format` function.

Loading thumbnail…

Customizing axis in D3.js

This example demonstrates how to customize the axes of a bar chart in D3.js, visualizing the populations of the 11 most populous countries. The chart uses a linear scale for the population axis and a band scale for country names, with grid lines and formatted tick labels. Custom styling is applied through CSS classes, and the y-axis domain and tick lines are removed. The code imports functions like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` from D3, and uses `csv` to load data from `data.csv` and `svg` to render the result as an SVG element.

Loading thumbnail…

Making a bar chart with D3.js

This example shows a horizontal bar chart of population per country, with country names labeled along the vertical axis and population values on the horizontal axis. The chart renders population data for eleven countries, sourced from WorldoMeter, as SVG rectangles using D3.js v5 within a React framework. It uses `d3.csv` to load the data, `scaleLinear` and `scaleBand` for scaling, `axisLeft` and `axisBottom` for ticks, and `select` to append elements to the SVG container.

Loading thumbnail…

Making a bar chart with D3.js

This example shows a horizontal bar chart of population per country, with country names labeled along the vertical axis and population values on the horizontal axis. The chart renders population data for eleven countries, sourced from WorldoMeter, as SVG rectangles using D3.js v5 within a React framework. It uses `d3.csv` to load the data, `scaleLinear` and `scaleBand` for scaling, `axisLeft` and `axisBottom` for ticks, and `select` to append elements to the SVG container.

Loading thumbnail…

G says hello

A minimal D3.js example renders the text “Hello VizHub!” in large, centered type. The page uses a static HTML container with an ID, and D3’s `select` method sets the message text from a separate ES6 module. Styling is handled entirely by a local CSS file, which centers the text and scales its font size dramatically. The example demonstrates basic modular code organization and D3’s DOM manipulation without any data binding or dynamic behavior.

Loading thumbnail…

Scatter Plot w/ menus

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with red semi-transparent circles on an SVG canvas. The visualization includes labeled axes with tick marks and a title, while a dropdown menu at the top offers options A, B, and C, though the menu selection does not currently alter the chart. The code uses d3.csv for data loading, d3.scaleLinear for scales, d3.axisLeft and d3.axisBottom for axes, and a custom dropdownMenu module that creates select elements with d3 selections.