F

fahmijaafar

@fahmijaafar·20 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example builds a playful face using D3.js, using circles for the eyes, mouth, and other facial features. The page initializes a minimal HTML structure and applies a large font to a greeting text, while the main rendering relies on D3’s selection and append methods to add SVG elements. The code references D3 v5 from a CDN, though the JavaScript file itself is empty, so the actual face-drawing logic is not yet implemented. The visual result displays a simple static scene with a centered message rather than an interactive chart.

Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays temperature readings from multiple cities over a one-week period, with each city represented by a distinct colored line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. A custom `colorLegend` component renders ordinal color categories, while axis labels and a title annotate the SVG output. The data is loaded from a CSV hosted on VizHub.

Loading thumbnail…

Circles on a Map

This visualization displays population data on a world map using circles sized by a square root scale. The map is rendered with d3.geoPath and a Natural Earth projection, with circles positioned at country centroids via d3.geoCentroid. A size legend and color legend are added using custom d3 modules. The code loads CSV population data and TopoJSON world boundaries, processing them with Promise.all to combine the datasets.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the auto-mpg dataset, with dropdown menus allowing viewers to select which numerical columns appear on the x- and y-axes. Built with D3 v5, it uses scales, axes, and SVG circles to render the data, while a custom `dropdownMenu` module and D3’s `transition` animate points to new positions over two seconds when the axis selections change. The scatter plot code reuses `axisBottom`, `axisLeft`, and `scaleLinear` for the chart structure.

Loading thumbnail…

Choropleth Map

A choropleth map colors world countries by their economy category using a spectral ordinal color scale, with an interactive color legend rendered as circles and labels. The visualization loads country geometries from TopoJSON and joins them with tabular metadata via a promise-based data pipeline. Rendered as SVG, it uses `d3.geoPath` with a Natural Earth projection and supports zooming through `d3.zoom`. Hovering highlights countries, while the legend is built using the exported `colorLegend` helper, with styling defined in external CSS.

Loading thumbnail…

Choropleth Map

This choropleth map displays world countries colored by economic classification using an ordinal color scale with a spectral palette. The visualization renders geographic boundaries through a natural Earth projection and topojson-processed data, with country names and economic groups shown on hover via SVG title elements. Built with D3 v5, the example uses `d3.geoPath` for map geometry, `d3.scaleOrdinal` for color mapping, and a custom legend component that visualizes discrete color categories. A zoom behavior enables interactive panning, while hover effects highlight individual countries in red.

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered in SVG, with countries displayed in dark green against a dark blue sphere. Hovering highlights each country in red, and users can zoom and pan using the mouse. It uses D3 v5 with `d3.geoPath` and `d3.geoNaturalEarth1` for geographic projection, `d3.zoom` for interaction, and TopoJSON to load world boundaries. The map pulls country names from a TSV file paired with the world-atlas 50m JSON dataset.

Loading thumbnail…

World Countries Tree

This example shows a hierarchical tree of world countries, grouped first by continent and then by subregion. The visualization uses a horizontal tree layout with curved links to connect parent nodes to their children. It labels each node with its name, with font size decreasing at deeper levels. The diagram is created with d3.tree and d3.hierarchy, rendered as SVG paths and text elements, with zooming enabled through d3.zoom. The data comes from a static JSON file.

Loading thumbnail…

Let's make a face with D3.js!

D3.js v5 builds a smiley face from primitive SVG shapes, with rectangles and semicircular arcs animating into place over two seconds via chained `transition().duration()`. The code uses `select`, `line`, and `arc` from the D3 module, drawing a circle for the head and moving blocks for features. An embedded video demonstrates the eyebrow movement, while the SVG canvas (960×500) hosts the static, animated construction.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl of fruit demonstrates the general update pattern special cases as apples are eaten and replaced with lemons over time. The SVG visualization uses d3 data joins to handle entering, updating, and exiting elements, with d3.scaleOrdinal mapping fruit types to colors and radii. The code imports scaleOrdinal and select from d3 v5, binding fruit data to groups that contain circles and text labels, while timeout-driven mutations trigger re-renders. The bowl is rendered as a rounded rectangle, and clicking a fruit logs to the console.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples appear as a bowl of fruit; over time, the visualization removes fruit and swaps an apple for a lemon, demonstrating enter, update, and exit selections in D3 v5. Clicking is not implemented in the provided code. The example uses a scaleOrdinal for color and radius, appending SVG groups and circles within a fixed 960x500 viewport, with data changes triggered by setTimeout.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3.js, showing how data joins handle entering, updating, and exiting elements. It visualizes a bowl of fruit—apples and lemons—as circles with color and radius scales, with text labels. Over time, fruits are eaten (removed), replaced, or filtered from the dataset, and the SVG updates accordingly. The code uses `d3.scaleOrdinal` for color and radius mapping, along with `selection.enter()`, `selection.merge()`, and `selection.exit().remove()` to manage SVG groups, circles, and text elements.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the D3 general update pattern using a static bowl of fruit rendered as SVG circles. Five apples appear in a row, then one fruit is removed after one second, and a third apple transforms into a lemon after two seconds, illustrating enter, update, and exit selections. It uses d3.select, d3.range, d3.scaleOrdinal, and a custom fruitBowl function that merges entered and updated elements before applying radius and fill attributes from color and radius scales.

Loading thumbnail…

Let's make a face with D3.js!

A yellow face is drawn with D3.js as a set of SVG shapes, including a head, eyes, and eyebrows, centered in the viewport. The eyebrows animate, moving up and down in a two-second cycle using D3's `transition` API, while the mouth is created with an `arc` path. The example demonstrates basic shape construction and animation with the D3 v5 library, rendering in SVG.

Loading thumbnail…

World Population by 2015

This visualization shows the growth of world population from 1960 to 2015 using a filled area chart with a smooth curved baseline. The code uses d3.csv to load the data, then applies d3.scaleTime and d3.scaleLinear for the x and y axes, with d3.area and d3.curveBasis to generate the path. Axis labels and a title are added via SVG text elements, and grid lines are drawn through tick sizes. The y-axis formats values in billions using d3.format.

Loading thumbnail…

Temperatures - San Francisco

This visualization displays daily temperature measurements in San Francisco as a smooth line chart over time, with individual data points marked as circles. The temperature values are plotted on the y-axis, while the x-axis maps timestamps using d3.scaleTime, and d3.scaleLinear handles the temperature scale. The line is generated with d3.line and curveBasis, and axes are rendered with d3.axisLeft and d3.axisBottom. Data is loaded asynchronously from a CSV file using d3.csv, and the SVG output includes a title and labeled axes.

Loading thumbnail…

Hello VizHub

A cheerful yellow smiley face is drawn in an SVG canvas using D3 v5, with black outlined eyes and a mouth. The example demonstrates basic SVG shape creation and manipulation through D3’s `select` and `append` methods. Two rectangular eyebrows animate vertically using `transition().duration()`, moving up and then back down over two seconds each. The code also utilizes D3’s `arc` path generator to construct the mouth, showing fundamental drawing and animation capabilities on a static 900x600 canvas.

Loading thumbnail…

Hello VizHub

A horizontal bar chart displays the populations of the ten most populous countries from a CSV file, with animated bars that grow in width over two seconds upon load. The visualization uses D3 v5 to parse the data, apply linear and band scales, and render axes with custom tick formatting that abbreviates large numbers using `format('.3s')`. SVG elements are positioned with margins, while the title and axis labels are appended as text. Population values are multiplied by 1000 during data preprocessing.

Loading thumbnail…

Temperature in San Francisco

This example visualizes hourly temperature readings in San Francisco as animated bars over time, with a time-based x-axis and linear temperature y-axis. Using D3 v5, it loads CSV data, applies a time scale and linear scale, and renders SVG rectangles that transition their widths over two seconds to reveal the temperature pattern. The chart includes labeled axes, grid lines, and a title, with styling handled through external CSS.

Loading thumbnail…

Hello VizHub

This example demonstrates how to display a simple text message using D3.js within the VizHub environment. It imports the `select` function from D3 and an ES6 module to set the content of a `div` element. The message is rendered in large, styled text against a dark background using a custom CSS file with the Ubuntu font. The visualization highlights basic DOM manipulation with D3 and modular JavaScript, using the v5 API.