A

amakanju@nyit.edu

@tokunbo-makanju·97 public vizzes

Loading thumbnail…

26. D3 Bar Chart Heights

A simple bar chart displays twenty numeric values as vertical SVG rectangles. The chart uses a fixed width of 500 pixels and height of 100 pixels, with each bar’s height scaled by a factor of four. The code creates the visualization by selecting the body, appending an SVG element, and binding the dataset using `d3.select`, `.data`, and `.enter()`. Rectangles are positioned using `attr('x')` and `attr('y')`, with width calculated by dividing the total width by the number of data points, minus a one-pixel padding.

Loading thumbnail…

20. D3 Drawing SVGs Colors

Five circles of varying radii render in a horizontal row on an SVG canvas. D3’s data join binds an array of five numbers to circle elements, mapping each value to the circle’s radius and stroke width. The example demonstrates basic SVG color styling by setting all fills to yellow with orange outlines through the `attr` method, producing a static visualization.

Loading thumbnail…

14. D3 Power of Data Rounded

This example demonstrates a simple bar chart constructed from 25 randomly generated rounded values. The visualization uses D3 version 4.5.0, with the code generating a fresh dataset of integers between 0 and 29 and rendering each as a teal vertical bar. The chart employs D3’s `selectAll`, `data`, `enter`, and `append` methods to create div elements, with each bar’s height dynamically set via the `.style` method based on the data value multiplied by five. The animation metadata refers to the random generation process rather than a temporal transition.

Loading thumbnail…

09. D3 Drawing Divs

This example demonstrates how to bind a simple array of numbers to HTML elements using D3.js, creating five div elements with a teal background class. The code uses the d3.select and data binding methods (selectAll, data, enter, append) to generate the visual elements. Each div is assigned the “bar” class with fixed inline CSS styling. The dataset values influence the number of rendered bars but not their size, as the visualization focuses on the fundamental pattern of entering data-driven DOM elements.

Loading thumbnail…

06. D3 Paragraphs Counting

This example demonstrates how to bind a small array of numbers to paragraphs in the DOM, dynamically inserting text that counts up to each value. Using D3.js version 4.5.0, the code employs `d3.select`, `selectAll`, `data`, `enter`, and `append` to create new paragraphs, then applies the `text` function to render the counting sentence. The visualization is rendered entirely as HTML text elements, with no external data source.

Loading thumbnail…

05. D3 Paragraphs Text

This example demonstrates how to bind an array of numbers to paragraph elements and display each value as text content. The code uses D3’s selection methods `selectAll`, `data`, `enter`, and `append` to create `<p>` elements for each data point, then sets their text with the `text` function. The dataset `[5, 15, 20, 25]` is hardcoded, and the visualization relies on D3’s data-join pattern to render static, non-animated output.

Loading thumbnail…

02. D3 New Element

This example demonstrates how to dynamically add an HTML element to a web page using D3.js. The code selects the body element and appends a new paragraph containing the text "New paragraph!" through D3's `select` and `append` methods. It uses the D3.js version 4.5.0 library, imported via a script tag, and is rendered as an animation in the browser. The page also includes commented-out alternative approaches and a stylesheet definition for a message class.

Loading thumbnail…

03. D3 CSV Loading

This example demonstrates how to load tabular data from an external CSV file using D3.js. The code uses `d3.csv('food.csv', ...)` to fetch the file and pass the parsed data, containing food names and deliciousness ratings, to a callback function for processing. The visualization itself renders no graphical output; instead, the loaded data is logged to the browser’s console for inspection. It serves as a foundational pattern for integrating external datasets into larger D3 applications.

Loading thumbnail…

53. D3 Updates All Data

A bar chart demonstrates how D3 updates existing visual elements when the underlying dataset changes. Clicking the text triggers an alert and replaces the original 20 data values with a new array of 20 numbers. The code uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, initially binding data to SVG `rect` elements via `enter()`. On click, `selectAll('rect').data(dataset)` rebinds the new values, and the `y` and `height` attributes are updated in place without removing or re-adding elements.

Loading thumbnail…

47. D3 Axes No Labels

A scatterplot displays 50 randomly generated data points as circles, with their horizontal position mapped from a linear scale and their vertical position from a second linear scale. Circle area encodes the y-value through a square-root scale. The chart includes x and y axes with ticks, created via `d3.axisBottom` and `d3.axisLeft`, but all text labels are removed. The SVG is built dynamically with random data generated in JavaScript, using `d3.scaleLinear` and `d3.scaleSqrt` for coordinate and size mappings.

Loading thumbnail…

46. D3 Axes Random

This example demonstrates how D3.js v4.5.0 dynamically generates axes based on the minimum and maximum values of a randomized dataset. The code creates 50 random data points with varying ranges, then displays them as circles with radii scaled by their y-values, along with red text labels. Using `d3.scaleLinear` for x and y positions, `d3.scaleSqrt` for circle sizes, and `d3.axisBottom` and `d3.axisLeft`, the visualization renders in an SVG element with both axes showing five ticks each.

Loading thumbnail…

44. D3 Axes Clean

This example shows a scatter plot of coordinate pairs plotted with D3.js version 4.5.0. It renders circles and red text labels in an SVG canvas, using `d3.scaleLinear` for x and y axes and `d3.scaleSqrt` for circle radius sizing based on the y-value. The X-axis is customized with `d3.axisBottom` and `tickValues` to display only four specific tick marks (0, 100, 250, 600), demonstrating how to reduce axis clutter.

Loading thumbnail…

41. D3 Time Scale

This visualization plots a daily time series from January 2017, showing a semi-random “Amount” value for each date. It uses D3’s `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. The SVG renders small circles for each data point, with date labels placed behind them. The data is loaded from a CSV file using `d3.csv` and a row converter that parses dates with `d3.timeParse`.

Loading thumbnail…

67. D3 Randomized Data

A bar chart displays 20 vertical bars whose heights and blue color intensities correspond to values in a static array. Clicking the text prompt replaces the dataset with 20 new random integers between 0 and 24, then animates the bars and their value labels using `transition` with `delay` and `duration`. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with SVG `rect` and `text` elements. Data is updated via a click handler on a paragraph element.

Loading thumbnail…

66. D3 Delay Dynamic Scaled Few

A dynamic bar chart displays ten data values as vertical bars with numeric labels. Users can click a text prompt to trigger a one-time update to a new dataset. The chart uses D3.js version 4.5.0 with `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `transition().delay()` to create a staggered animation effect. As the data updates, both the rectangle heights and label positions animate sequentially, with fill colors shifting from dark to light blue based on the new values.

Loading thumbnail…

65. D3 Delay Dynamic Scaled

This example demonstrates a bar chart with 30 rectangular bars and corresponding value labels, rendered as SVG elements using D3.js version 4.5.0. Initially, the chart displays a static dataset, but clicking on the text above the visualization triggers a one-time update with a new dataset. The update uses d3.transition with a staggered delay, calculated as `(i / dataset.length) * 1000` milliseconds per element, and a 500-millisecond duration to animate changes in bar height, vertical position, fill color (using an RGB scale based on data values), and label text and position. The chart employs d3.scaleBand for x-axis positioning and d3.scaleLinear for y-axis scaling.

Loading thumbnail…

64. D3 Delay Dyanmic

This example shows a bar chart that updates its values when the user clicks on a text prompt. The chart displays a sequence of numeric values as vertical bars, each labeled with its value. The visualization uses D3.js version 4.5.0 to render the chart as SVG elements. Upon clicking, the bars and labels transition to new data with a staggered delay, where each subsequent element waits an additional 100 milliseconds before starting its 500-millisecond animation. The code uses D3's `scaleBand`, `scaleLinear`, and `transition().delay()` API to manage the layout and animated updates. The data is a hardcoded array of twenty numbers.

Loading thumbnail…

63. D3 Delay Static

This example shows a static bar chart updating its values when the user clicks on text, with all rectangles and labels transitioning simultaneously after a fixed one-second delay. The chart initially displays 20 data points as vertical bars with white numeric labels, then replaces them with a new dataset on click. Built with D3.js version 4.5.0, the code uses `d3.scaleBand` and `d3.scaleLinear` for positioning and sizing, and applies a `.delay(1000)` followed by `.duration(2000)` to both the rect and text transitions, animating height, fill color, and label positions as SVG elements.

Loading thumbnail…

62. D3 Ease Bounce

A bar chart displays twenty numeric values, with bars colored by value in shades of blue and labeled with their data values. Clicking the text updates the dataset to a new sequence of values, triggering a transition that animates the bars' heights, positions, and labels over two seconds. The animation uses D3 v4's `d3.easeBounceOut` easing function to create a bouncing effect as the bars settle into their new sizes. The visualization is rendered with SVG elements created via `d3.select`, `append`, and scale functions `d3.scaleBand` and `d3.scaleLinear`.

Loading thumbnail…

61. D3 Ease Elastic

This example demonstrates the elastic easing animation effect in D3.js version 4.5.0. A bar chart displays a dataset of 20 numeric values, rendered as SVG rectangles with color intensity proportional to the data values. When the user clicks on the text prompt, the chart transitions with new data over a 2-second duration, using `d3.easeElasticOut` to create a spring-like bouncing motion as the bars and their white text labels adjust to their new heights and positions. The visualization uses `d3.scaleBand` and `d3.scaleLinear` for positioning and scaling.

Loading thumbnail…

60. D3 Ease Circle

This example demonstrates how easing functions can animate bar chart updates in D3.js version 4.5.0. A static bar chart, built with SVG rectangles and text labels, initially displays a dataset of 20 values. Clicking the paragraph text triggers a two-second transition that updates all bars and labels with a new dataset, using the `d3.easeCircleIn` easing function to control the animation’s acceleration. The bar positions, heights, and colors are recalculated from the new data via linear and band scales.

Loading thumbnail…

59. D3 Ease Linear

A bar chart displays a dataset of 20 values, initially rendered in blue. Clicking a text prompt triggers a 2-second transition where the bars' heights, positions, and labels animate to a new dataset. The animation uses `d3.transition()` with `.duration(2000)` and `.ease(d3.easeLinear)`, demonstrating linear easing. The SVG elements are created programmatically, with bar positions scaled via `d3.scaleBand()` and `d3.scaleLinear()`, and label positions updated alongside the rectangles.

Loading thumbnail…

58. D3 Duration Slow Labels Fixed

A bar chart displays twenty data values as vertical bars with numeric labels. Clicking the text triggers a five-second transition that updates the bars and labels with new data. The visualization uses D3 v4.5.0 with `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `transition().duration(5000)` to animate both `rect` heights and `text` positions. The labels move and change numbers smoothly alongside the bars, demonstrating coordinated transitions across SVG elements.

Loading thumbnail…

57. D3 Duration Slow

A static bar chart with value labels responds to a mouse click on a paragraph. The transition updates the bar heights, positions, and fill colors over a deliberately slow five-second animation. Built with D3.js version 4.5.0, the SVG elements animate using the `.transition()` and `.duration(5000)` methods. The `d3.scaleBand` and `d3.scaleLinear` functions map data indices and values to pixel coordinates, while the dataset is an inline array of twenty integers.

Loading thumbnail…

56. D3 Duration

A bar chart displays twenty data values as vertically oriented rectangles, each labeled with its numeric value. Clicking the prompt text triggers a one-time update with a new dataset. The visualization uses D3 v4.5.0 to construct an SVG scene with `d3.scaleBand` for x-axis positioning and `d3.scaleLinear` for bar heights. The update applies a `transition` with a controlled `duration` of 1000 milliseconds, smoothly animating the rectangles' y-coordinates, heights, and fill colors. Text labels update instantly without transition.

Loading thumbnail…

55. D3 Transition

A bar chart demonstrates smooth animated transitions between two datasets using D3 v4. The initial bars and value labels render with SVG elements, scaled via `d3.scaleBand` and `d3.scaleLinear`. Clicking a text paragraph triggers a `.transition()` on all rectangles, interpolating their height, y-position, and fill color to match the new values. The labels also update their positions and text content within the same interaction.

Loading thumbnail…

54. D3 Updates All Data Fixed

This example demonstrates how a D3.js bar chart can update all of its displayed data at once in response to a user click. A static dataset of 20 numeric values is initially rendered as blue-hued bars with white value labels. After clicking the paragraph text, the chart swaps in a second, reordered dataset. The update process uses D3's selectAll, data, and attribute methods to apply new heights, vertical positions, fill colors, and label text to the existing SVG rectangles and text elements, without re-creating the chart structure.

Loading thumbnail…

52. D3 Bar Chart Scales

This example demonstrates a flexible, scalable bar chart built with D3.js (v4.5.0), using ordinal and linear scales to map a static dataset of 20 values to SVG rectangles. The chart uses `d3.scaleBand` for the x-axis positioning with padding and `d3.scaleLinear` for y-axis height, rendering bars and white value labels. The bars’ fill colors are dynamically computed from their values, creating a gradient from dark to light blue. The visualization appears static with no animation or interactions.

Loading thumbnail…

51. D3 Bar Chart

This is a simple D3.js bar chart that visualizes a numeric dataset of 20 values, displaying each value as a rectangle scaled in height and colored in varying shades of blue. The chart uses an SVG element sized 500 by 100 pixels, with rectangles positioned horizontally and vertically scaled by a factor of four. Each bar is labeled with its corresponding number, rendered in white text. The example demonstrates basic D3 v4.5.0 APIs including `d3.select`, `svg.selectAll`, `.data()`, `.enter()`, and `.attr()`, with a static dataset defined as an array of integers.

Loading thumbnail…

50. D3 Time Axis Prettier

A time-series line chart displays daily values for January 2017, using vertical guide lines and circles to mark each data point. The visualization loads data from a CSV file and employs d3.scaleTime with a padded domain for the x-axis, while d3.axisBottom with nine ticks and a custom time format prettifies the date labels. d3.scaleLinear handles the y-axis, and the SVG is built with d3.select and appended elements.

Loading thumbnail…

49. D3 Time Axis

This example shows a time-series scatter plot where each daily data point is represented by a small circle, with formatted date labels placed beside the points and a time-based x-axis. The visualization uses D3.js version 4.5.0 with `d3.scaleTime()` for the x-axis, `d3.scaleLinear()` for the y-axis, and `d3.axisBottom()` and `d3.axisLeft()` for the axes. Data is loaded from a CSV file containing dates and amounts, with values parsed using `d3.timeParse()` and displayed using `d3.timeFormat()`.

Loading thumbnail…

48. D3 Axes Format

This example demonstrates how to format axis tick labels as percentages in an SVG scatterplot using D3.js version 4.5.0. The code creates random data points, scales them with `d3.scaleLinear` and `d3.scaleSqrt`, and applies a custom percentage format via `d3.format(".1%")` to both the bottom and left axes using `d3.axisBottom` and `d3.axisLeft`. The axes are rendered as SVG groups, with circles representing the data.

Loading thumbnail…

45. D3 Axes Y

A scatterplot displays 11 data points as circles, with each point labeled by its x,y coordinates in red text. The visualization implements two linear scales for the x- and y-axes using `d3.scaleLinear()`, plus a square-root scale (`d3.scaleSqrt()`) to encode the y-values as circle radii. Vertical and horizontal axes are added using `d3.axisBottom()` and `d3.axisLeft()`, both with five ticks, and rendered as SVG groups. The chart uses a 500×300 SVG canvas with explicit padding.

Loading thumbnail…

43. D3 Axes Bottom

A scatter plot displays eleven data points as circles with square-root-scaled radii, alongside red text labels showing each coordinate pair. The example emphasizes positioning the x-axis at the bottom of the SVG canvas rather than the default location. Using D3 v4.5.0, the code creates linear scales for x and y coordinates, applies `d3.axisBottom()` to generate the axis, and translates the axis group to the bottom edge with `svg.append("g").attr("transform", ...)`. Circle positions use the scaled values, demonstrating axis placement alongside standard scatter plot rendering.

Loading thumbnail…

42. D3 Axes

This example demonstrates how to add an axis to a scatter plot using D3.js version 4. A dataset of coordinate pairs is plotted as circles, with each circle’s size scaled by its y-value using a square-root scale. The visualization renders in SVG and includes a bottom axis created with `d3.axisBottom()`, while linear scales (`d3.scaleLinear`) map the data domain to the visual range. Red text labels display each point’s coordinates next to the circles.

Loading thumbnail…

41. D3 Scale Plot Sqrt Scale

A scatterplot displays eleven data points as circles, with a square root scale determining circle area based on the y-value. The visualization uses D3 v4.5.0 with `d3.scaleLinear` for x and y positioning and `d3.scaleSqrt` for radius mapping. Each circle includes a red text label showing its original coordinates. The SVG-rendered chart demonstrates how this scale creates proportionally smaller circles for lower values.

Loading thumbnail…

40. D3 Scale Plot Large

This example presents a scatterplot of eleven data points using D3.js version 4.5.0, rendered as SVG circles with red text labels. Each point’s x and y coordinates are mapped to the plot area through linear scales (`d3.scaleLinear`), while a third scale determines the circle radius based on the y-value. The chart is resized to a larger 500x300 pixel canvas with padding, and labels display the raw coordinate pairs alongside each point.

Loading thumbnail…

39. D3 Scale Plot Big

A scatterplot maps a small dataset of eleven coordinate pairs onto an SVG canvas, with circle positions scaled by d3.scaleLinear functions for the x- and y-axes, and circle radii scaled by another linear scale based on the y-value. Each point is labeled with its original coordinates in red sans-serif text. The chart demonstrates basic scaling and data-binding patterns within D3 version 4.5.0, using standard selection and enter-append methods to generate SVG elements from the array. No axes, tooltips, or interactivity are included.

Loading thumbnail…

39. D3 Scale Plot Radii

A scatterplot displays ten data points as circles with adjusted radii, each labeled with its coordinate pair. The plot uses D3.js version 4.5.0 scaleLinear functions to map x and y values to screen positions, while a third scale maps the second coordinate to circle radius between 2 and 5 pixels. The SVG visualization renders with red text labels and sans-serif font, demonstrating how D3 scales control both position and size.

Loading thumbnail…

38. D3 Scale Plot Padding

This example shows a scatterplot of ten data points, with each point labeled by its coordinates in red text. The visualization demonstrates how to apply padding to D3 linear scales, using `d3.scaleLinear` to map the dataset's x and y values to positions within the SVG canvas, keeping points inside the chart boundaries. The `padding` variable reserves space on all sides, and circle radii are calculated as the square root of the height minus the y-value.

Loading thumbnail…

37. D3 Scale Plot Inverted

This example demonstrates an inverted linear scale plot using D3.js. Ten data points, each represented as a circle and a red text label, are positioned on a 500x100 pixel SVG canvas. The visualization shows how the y-axis is flipped by mapping the domain’s maximum value to the bottom of the range and the minimum to the top, using `d3.scaleLinear()`. The circle radius is calculated as the square root of the height minus the y-value, creating a size variation tied to the data.

Loading thumbnail…

36. D3 Scale Plot

A scatterplot positions ten data points as circles on an SVG canvas using linear scales. The `d3.scaleLinear()` API maps the dataset’s x- and y-value domains to pixel ranges of 500 by 100, while circle radii derive from the square root of the height minus each y-value. Red text labels display the original coordinate pairs.

Loading thumbnail…

35. D3 Scale Test

The page loads D3.js 4.5.0 and defines a sample dataset of coordinate pairs. It serves as a blank canvas for testing the library’s scale functions in the browser console, with no visual output or animation. The code initializes an empty HTML document with a script reference to the D3 library, then declares a simple array of 2D data points for potential experimentation. The example demonstrates a minimal setup for prototyping D3 scale and transformation functions directly in a developer console.

Loading thumbnail…

92. D3 DIV Tooltip

This example demonstrates an interactive bar chart with a hover tooltip. It shows a dataset of 20 numeric values represented as vertical bars, where hovering over a bar reveals its value in an HTML tooltip that follows the cursor. Clicking a bar triggers a sorting animation, alternating between ascending and descending order. The visualization uses D3.js v4.5.0 with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and SVG rect elements. The tooltip is positioned absolutely and updated on mouseover events.

Loading thumbnail…

91. D3 SVG Tooltip

A bar chart of twenty values rendered as SVG rectangles uses D3.js version 4.5.0 to display a dynamic tooltip on mouseover. The tooltip is created by appending a text element to the SVG at the bar’s position, showing the data value, and removed on mouseout. Clicking a bar triggers a sorting animation using `transition().delay()` and `duration()` to reorder bars by value. Bars also change color to orange on hover via CSS.

Loading thumbnail…

90. D3 Browser Tooltip Text

A bar chart displays a dataset of 20 values as clickable, blue-tinted rectangles. Clicking a bar sorts the bars in either ascending or descending order, with a staggered transition that animates each bar to its new position over one second. The chart is rendered with SVG and uses D3 v4.5.0, specifically `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.ascending`/`d3.descending` for sorting. A native browser tooltip appears on hover, showing each bar's value via an appended `title` element. The bars also change color to orange on mouseover.

Loading thumbnail…

89. D3 Browser Tooltip

A collection of vertical bars displays a static dataset, with a default browser tooltip appearing on hover. The bars, colored with a blue scale based on their value, are rendered as SVG rectangles using a band scale for positioning and a linear scale for height. Clicking a bar triggers an animated sort that reorders the bars in either ascending or descending order, with each bar transitioning to its new x position with a staggered delay. The example uses d3.scaleBand, d3.scaleLinear, and transition.attr to implement the sorting behavior.

Loading thumbnail…

88. D3 Delay

A bar chart displays a dataset of 20 values as vertical bars with numeric labels. Clicking any bar triggers a transition that re-sorts the bars by value, alternating between ascending and descending order. The animation uses `d3.ascending` and `d3.descending` with a `sort()` method, followed by a `transition()` that staggers each bar's horizontal movement using a `delay()` of 50 milliseconds per index and a duration of 1000 milliseconds. The SVG rectangles and text elements are rendered with D3 v4.5.0 scales, including `scaleBand` and `scaleLinear` for positioning and sizing.

Loading thumbnail…

87. D3 Resort

Animated bar chart shows a dataset of 20 values as vertical bars that re-sort between ascending and descending order when clicked. Built with D3.js version 4.5.0, the SVG visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and a transition with `duration(1000)` to animate bar repositioning. Each bar’s fill color is derived from its value via an RGB string, and click events toggle the `sortBars` function, which applies `d3.ascending` or `d3.descending` ordering.

Loading thumbnail…

86. D3 Sort Hover

A bar chart displays 20 rectangular bars of varying heights, rendered in SVG with a blue gradient based on value, and white numeric labels above each bar. Clicking any bar triggers a transition that sorts all bars in ascending order by value over one second using `d3.ascending` and the `transition` API with `duration` and `attr` for repositioning. Hovering over a bar changes its fill to orange via CSS. The chart uses `d3.scaleBand` for x positioning and `d3.scaleLinear` for y scaling, with the dataset hardcoded in the code.

Loading thumbnail…

85. D3 Sort

Animated bar chart displays 20 numeric values as vertical bars, color-coded by intensity, that rearrange into ascending order when clicked. Built with D3.js v4.5.0, the visualization uses `d3.scaleBand` for x-axis positioning and `d3.scaleLinear` for y-axis scaling. The code demonstrates sorting via `d3.ascending` comparator within a `sort()` method on rect elements, with mouseover highlighting and mouseout color transitions, all rendered as SVG with 1000ms transition animations.

Loading thumbnail…

84. D3 Smoother

A bar chart displays a dataset of 20 values as vertically oriented rectangles, with each bar labeled by its numerical value. Hovering over a bar immediately changes its fill color to orange, while moving the mouse away triggers a smooth 250-millisecond transition that gradually restores the original blue color. The visualization uses D3.js version 4.5.0, specifically `d3.select`, `d3.scaleBand`, `d3.scaleLinear`, and the `transition` method with a `duration` parameter to animate the color changes.

Loading thumbnail…

83. D3 Mouseout

A bar chart uses D3.js mouse events to demonstrate interactive color changes. The SVG bars initially display a blue gradient derived from the dataset values. On mouseover, the selected bar turns orange, and on mouseout its original blue fill is restored using the bound data. The code uses d3.scaleBand and d3.scaleLinear for positioning and sizing the bars, with event handlers attached via .on("mouseover") and .on("mouseout").

Loading thumbnail…

82. D3 Mouseover

A static bar chart displays a dataset of 20 numeric values as vertical bars with blue fills and white value labels. Using the D3.js v4 library, the example demonstrates a basic mouseover interaction: hovering over any rectangle changes its fill color to orange. The visualization is built with SVG elements generated through `d3.scaleBand` for x-axis positioning, `d3.scaleLinear` for y-axis scaling, and event listeners attached via the `.on("mouseover", ...)` method. The code creates the SVG container, binds data to rectangle and text elements, and applies the color change directly to the selected node.

Loading thumbnail…

81. D3 Hover

A simple bar chart displays twenty numeric values as vertical bars, with each bar labeled by its value and colored in a blue gradient. The example demonstrates a CSS-only hover effect, where hovering over any rectangle turns it orange. Built with D3.js version 4.5.0, the code uses `d3.scaleBand` to position bars along the x-axis, `d3.scaleLinear` for the y-axis, and SVG `rect` and `text` elements for rendering, with hover styling defined via CSS `:hover` selector.

Loading thumbnail…

80. D3 Click

A bar chart displays a dataset of 20 numeric values, rendered as blue SVG rectangles with white value labels. Each bar darkens as its value increases. When a user clicks any bar, the corresponding data value is logged to the browser's developer console. The visualization uses D3 v4.5.0, employing `d3.scaleBand` and `d3.scaleLinear` for positioning and height, with the click event handled via `.on("click", ...)`. The y-axis is implied through bar heights that grow from the bottom, and the chart is static apart from the logging interaction.

Loading thumbnail…

79. D3 Start

A static SVG bar chart displays a dataset of twenty numeric values, with each bar’s height and blue color intensity proportional to its value, and white value labels positioned atop each bar. The code uses D3 v4’s `scaleBand` and `scaleLinear` to map data indices to horizontal positions and values to bar heights, alongside `selectAll`, `data`, `enter`, and `append` to create the SVG rectangles and text elements. The visualization demonstrates a basic D3 bar-chart setup without animations or interactivity.

Loading thumbnail…

78. D3 Dynamic Labels

This example demonstrates a bar chart with dynamic labels that update as data values are added or removed. Clicking the "Add" or "Remove" text elements triggers transitions that shift bars and their corresponding numeric labels using D3.js version 4.5.0 with SVG rendering. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with data bound via a key function. Entering bars slide in from the right, exiting bars slide out to the left, and labels move in sync with each 500-millisecond transition.

Loading thumbnail…

77. D3 Adding Removing

This example demonstrates how to add and remove data values from a bar chart in real time. Clicking the "Add a new data value" button pushes a randomly generated number onto a dataset, while clicking "Remove a data value" shifts the first element off the array. The SVG bars and text labels update with smooth transitions using D3’s `transition` and `duration` methods, with the x-scale domain recalculated via `d3.scaleBand` and `d3.range` to reflect the changing data length.

Loading thumbnail…

76. D3 Data Join Key

Clicking the text removes the first value from a bar chart, demonstrating D3's data join with a custom key function. Each bar is an SVG `rect` bound to an object with `key` and `value` properties; removal triggers an exit transition that slides the bar off-screen left. The remaining bars animate to new positions via `transition.attr`, while labels update text but not exits, a known limitation. The example uses `d3.scaleBand`, `d3.scaleLinear`, and D3 v4.5.0.

Loading thumbnail…

75. D3 Removing Values

Clicking the text above the chart removes the first value from a 20-point dataset, shifting the remaining bars left and shortening the tallest bar as the y-axis rescales. Built with D3.js version 4.5.0, the visualization uses SVG rectangles and labels, with `d3.scaleBand` and `d3.scaleLinear` mapping data to positions. The update pattern demonstrates the enter, update, and exit selections, merging new and existing elements with `selection.merge`, then animating transitions over 500 milliseconds via `transition.attr` and `.remove()`.

Loading thumbnail…

74. D3 Adding Values

Clicking the text at the top adds a new random value to a dataset, causing a bar chart to update with a smooth transition. The example demonstrates the D3 data join pattern, using selections and `merge` to handle entering and updating rectangles. It employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and SVG transitions over 500 milliseconds to animate the bars and their labels.

Loading thumbnail…

73. D3 Clip Path

This example demonstrates a dynamic scatterplot of 50 randomly generated data points, where each point is represented as a circle. The visualization updates its scales and redraws the circles and axes when the user clicks on the text prompt, with each update using a transition that briefly highlights the circles in magenta before returning them to black. The code uses D3.js version 4.5.0 to define linear scales for the x and y axes, an SVG clipping path to contain the plot area, and transition methods to animate the data updates.

Loading thumbnail…

72. D3 Chained Transitions

This example demonstrates chained transitions in D3.js, showing a scatterplot of 50 randomly generated data points that react to user interaction. Clicking on the text updates the dataset with new random values, causing both the circles and the axes to animate smoothly over time. The visualization uses `d3.scaleLinear` for coordinate mapping and `d3.axisBottom` and `d3.axisLeft` for the axes. The circles employ a two-stage transition: first turning magenta and enlarging, then returning to black at original size, while axis labels animate simultaneously.

Loading thumbnail…

72. D3 On Combo Transition

Clicking the text triggers a transition of 50 randomly generated data points in a scatterplot, rendered as SVG circles with D3 axes. The chart uses `d3.scaleLinear` to map values and `d3.axisBottom`/`d3.axisLeft` for scales. Upon click, `d3.select` updates the dataset, recalculates axis domains, and calls `.transition()` with a 1000-millisecond duration. The code chains `transition.on("start", ...)` to turn circles magenta and enlarge them, then `transition.on("end", ...)` to trigger a second transition that restores black and shrinks them back.

Loading thumbnail…

71. D3 On HTML

Clicking the text updates a scatterplot with new random data. The example shows how to use D3's `on()` method with `transition` to change circle styling at the start and end of the animation, turning circles magenta and larger during the transition before returning them to black. It uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes, with circles drawn as SVG elements and transitions animating their positions over 1000 milliseconds.

Loading thumbnail…

70. D3 Axes Dynamic

Clicking the text updates a scatterplot of 50 circles with new randomized data values. D3 version 4.5.0 is used to render the SVG, with d3.scaleLinear domains recomputed on each click and axes redrawn. The circles and axis lines transition over one second via d3.transition, showing how scales and axes rescale dynamically.

Loading thumbnail…

69. D3 Axes Static

A scatterplot displays 50 randomly generated points within an SVG canvas, which initially render as static circles. Clicking the text updates the dataset with new random values, and the points animate smoothly to their new positions via D3 transitions. The example uses `d3.scaleLinear` for axes and coordinate mapping, `d3.axisBottom` and `d3.axisLeft` for ticks, and `transition().duration(1000)` for the animation.

Loading thumbnail…

68. D3 Dynamic Scale

Clicking the text triggers the chart to regenerate with twenty new random values between 0 and 100. The bar chart and its labels then transition smoothly, updating their positions and heights as the y-axis scale recalibrates to accommodate the new maximum value. Using d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis, the code applies staggered transition delays to create a cascading animation effect across all bars.

Loading thumbnail…

33. D3 Scatterplot Sqrt

A scatterplot displays ten data points on a 500-by-100 SVG canvas, with each circle positioned according to its x and y coordinates. The circle radius is computed as the square root of the difference between the canvas height and the y-value, creating larger points toward the bottom. Built with D3.js version 4.5.0, the visualization uses the `selectAll`, `data`, and `enter` pattern to bind the dataset and append circles, setting the `cx`, `cy`, and `r` attributes through anonymous functions.

Loading thumbnail…

32. D3 Scatterplot

Ten fixed data points appear as circles in an SVG scatterplot, with position determined by x/y coordinates from a two-dimensional array. The example uses D3 version 4.5.0 to select the body, append an SVG element, and bind the dataset through the data join pattern, setting circle attributes with anonymous functions. Static rendering shows the basic scatterplot construction without scales or axes.

Loading thumbnail…

29. D3 Bar Chart Labels

This D3.js bar chart displays a static dataset of twenty numeric values as vertical bars. The SVG rendering uses blue-filled rectangles whose height and color intensity scale directly with the data value. Each bar includes a white, sans-serif text label positioned inside the bar, showing its corresponding value. The chart is constructed procedurally using D3's `select`, `append`, and `attr` methods, with no external data file.

Loading thumbnail…

15. D3 Power of Data Random

A dynamic bar chart displays 25 randomly generated values as vertical teal bars. The visualization uses D3.js version 4.5.0 to bind an array of random numbers between 0 and 30 to HTML div elements, setting each bar’s height proportional to its data value. The animation updates the bar heights, demonstrating how D3 can render and update data-driven visualizations.

Loading thumbnail…

10. D3 Drawing Divs Height

Five vertical divs display a bar chart, each bar's height corresponding to a value in a small JavaScript array. The visualization demonstrates how D3 version 4.5.0 maps data to visual properties using a simple pipeline. The code uses `d3.select` to target the body, `selectAll` and `data` to bind the dataset, then `enter` and `append` to create divs with class 'bar'. A style function dynamically sets the `height` attribute in pixels, overriding the initial CSS. This example illustrates D3's core selectors and data-binding methods.

Loading thumbnail…

08. D3 Paragraphs Style Function

This example demonstrates how D3.js can set paragraph styles conditionally based on data values. It selects the body element and appends a paragraph for each number in the dataset [5, 10, 15, 20, 25], with text displaying the count. Using the `.style()` method, paragraphs with data values greater than 10 are colored red, while others remain black, illustrating data-driven styling with D3’s selection and data-binding APIs.

Loading thumbnail…

07. D3 Paragraphs Style

This example demonstrates how to apply styling to HTML paragraphs created with D3’s data join. The code selects the `body` element, binds an array of five numbers to `p` elements, and appends a paragraph for each value, setting its text to “I can count up to” followed by the number. The paragraphs are then styled with red text using the `.style()` method with the property `color`. This showcases D3’s declarative approach to DOM manipulation and element styling.

Loading thumbnail…

34. D3 Scatterplot Labels

This example shows a simple D3 scatterplot that displays each point’s coordinate values as red text labels directly beside the corresponding circles. The code uses a fixed dataset of ten [x, y] pairs and an SVG rendering approach, with d3.select and data joins to append both circle and text elements. The circles’ radii are calculated as the square root of the height minus the y-coordinate, while the labels reveal the raw data values in an 11-pixel sans-serif font. The visualization is static, with no animation or interactive behavior.

Loading thumbnail…

30. D3 Bar Chart Aligned

This example displays a static bar chart of 20 numeric values using D3 v4, with each bar rendered as an SVG rectangle and labeled with its corresponding data value in white sans-serif text centered within the bar. The chart uses a fixed SVG width of 500 pixels and height of 100 pixels, with bar heights scaled by a factor of four and a one-pixel padding between bars. Each rectangle’s fill color is a blue gradient calculated from its data value, and the labels are positioned inside the bars using `d3.selectAll` with data binding and `.attr` methods.

Loading thumbnail…

28. D3 Bar Chart Blues

A bar chart displays a fixed dataset of 20 numeric values in a viewport 500 pixels wide and 100 pixels high. Each bar’s height is proportional to the data value, scaled by a factor of four, and its horizontal position is computed from the array index and overall width. The bars are rendered as SVG rectangles using the D3.js v4.5.0 library, with a dynamic fill color that transitions from dark to lighter blue based on the data value. This example demonstrates simple data-driven styling without any animation or interactive elements.

Loading thumbnail…

27. D3 Bar Chart Teal

This bar chart displays a static dataset of 20 numeric values, rendered as teal-colored rectangles in an SVG container. The code uses D3.js version 4.5.0 to bind the array of numbers to SVG `rect` elements, calculating each bar’s x-position, width, and height based on the dataset length and value. The bars are vertically scaled by a factor of 4, with a 1-pixel padding between them. The chart does not include axes, labels, or interactivity, focusing solely on the basic bar-encoding technique.

Loading thumbnail…

25. D3 Bar Chart Widths

This example demonstrates a bar chart with dynamic widths and spacing. It renders 20 rectangles in an SVG container, positioning each bar horizontally and calculating its width based on the dataset length with a fixed padding. The chart uses D3.js version 4.5.0, applying the `selectAll`, `data`, and `enter` pattern to bind the array of numbers to SVG `rect` elements. All bars are drawn with a constant height of 100 pixels, and the x-coordinates are computed using the index multiplied by the width divided by the dataset size.

Loading thumbnail…

24. D3 Bar Chart Even

Twenty vertical SVG rectangles form a static bar chart from a hardcoded array of 20 numeric values. The bars are evenly spaced along the x-axis using a calculated offset based on the dataset length, with a fixed width and full chart height, so no data variation is encoded. The example uses D3 v4’s `d3.select`, `append`, `data`, and `enter` to bind the array and create the rectangles, demonstrating a basic SVG rect-based bar chart without axes or scales. An animation is not present in the visible code.

Loading thumbnail…

23. D3 Bar Chart Offset

A D3.js bar chart displays an array of twenty numeric values as SVG rectangles. The bars are arranged horizontally, with each one positioned using a small offset to create consistent spacing between them. While all rectangles share the same starting y-coordinate and fixed dimensions, the varying data values are not yet mapped to bar heights. Instead, the visualization demonstrates the foundational step of binding a dataset to SVG elements, using the `d3.select`, `append`, and `attr` methods to generate the chart structure.

Loading thumbnail…

22. D3 Bar Chart Rects

A row of identical black rectangles is drawn on an SVG canvas, one for each value in a hardcoded array of twenty numbers. Using D3.js version 4.5.0, the code selects the SVG element, binds the dataset with `selectAll('rect')` and `.data()`, then appends rectangles via `.enter()`. All rectangles are initially positioned at x=0, y=0 with fixed dimensions of 20 pixels wide and 100 pixels tall, so the visualization currently shows no variation in height or position despite the differing data values.

Loading thumbnail…

D3 Bar Chart Rects

This example demonstrates a simple bar chart built with D3.js, where an array of twenty numeric values is visualized as a series of teal, inline-block rectangles. The chart uses D3's selection and data-binding API (`d3.select`, `.data`, `.enter`, and `.append`) to dynamically create `div` elements with a CSS class. Each bar’s height is set via the `.style` method, multiplying the data value by a fixed factor to produce a pixel height, resulting in an animated rendering of the dataset.

Loading thumbnail…

21. D3 Bar Chart Divs

A simple bar chart displays a dataset of twenty numeric values as vertically sized divs. The chart uses D3 v4’s data join pattern, calling `d3.select`, `.data`, and `.enter` to bind each number to a `div.bar` element. The height of each bar is set inline via `.style("height", ...)`, scaling the data value by five pixels. The static, non-animated visualization relies solely on HTML divs and CSS styling, with no axes or scales defined.

Loading thumbnail…

19. D3 Drawing SVGs Circles

Five SVG circles are drawn horizontally across a browser canvas, their radii determined by a small inline dataset of five numbers. A D3.js v4.5.0 script selects the body element, appends an SVG of width 500 and height 50, then uses chained selection methods—`selectAll`, `data`, and `enter`—to create each circle. The `cx` attribute is computed from each element’s index, while `cy` centers it vertically and `r` maps directly to the data value, producing an animated-free, static rendering.

Loading thumbnail…

18. D3 Drawing SVGs Size

This example demonstrates how to create a basic SVG element in D3 v4 by assigning its width and height to JavaScript variables. It shows the initial setup of an SVG container, setting its dimensions to 500 pixels wide and 50 pixels high, and appending it to the page body. The visualization uses d3.select and .append to construct the SVG, with no additional data binding or drawing operations shown. The resulting blank SVG serves as a foundation for future graphical elements.

Loading thumbnail…

17. D3 Drawing SVGs

This example demonstrates how to create an empty SVG container using D3.js version 4.5.0. The code selects the body element and appends an SVG with fixed width and height attributes, establishing the canvas for future visualizations. It uses d3.select and the append method to build the SVG structure, with no style rules or additional elements yet present.

Loading thumbnail…

D3 Power of Data More Points

An animated D3.js bar chart demonstrates the power of scaling data values through visual encoding. The visualization displays a dataset of 25 numbers, rendered as teal bars whose heights are directly proportional to their corresponding data points. Using D3's selection, iteration, and binding APIs, the code assigns each value to a DOM element and dynamically sets the CSS height property, multiplying each datum by a factor of five for visual clarity. The static HTML and CSS structure provide the initial bar styling, while D3 handles the data-to-visual mapping.

Loading thumbnail…

12. D3 Power of Data

A static webpage displays a simple bar chart built with D3.js, representing a small dataset of five numeric values. The visualization uses D3's selection and data-binding APIs to dynamically create and style HTML `div` elements, with each bar's height proportional to its corresponding data value. The chart appears as a series of teal-colored vertical bars aligned horizontally.

Loading thumbnail…

11. D3 Drawing Divs Spaced

Five teal bars appear in a row across the page, each representing a value from the static dataset `[5, 10, 15, 20, 25]`. Using D3 v4.5, the code selects the body, binds the data, and appends a `div` for each number. The bars are spaced with inline-block styling and margin, while each height is set dynamically via `.style('height', ...)` as the data value multiplied by five pixels. This example demonstrates the basic data-join pattern and the use of D3’s `.selectAll`, `.data`, and `.enter` methods to generate DOM elements.

Loading thumbnail…

04. D3 Paragraphs

An animation demonstrates how D3.js can dynamically create HTML paragraphs from a dataset. The script defines an array of five numbers and uses the `d3.select` and `data` methods to bind the dataset to the `selectAll` query, then appends a `<p>` element for each value via the `.enter()` and `.append` chain. Each new paragraph is given the static text "New paragraph!" and the animation runs in a browser. The example highlights D3’s declarative approach to data-driven document manipulation.

Loading thumbnail…

01. Empty D3 Starter

This example is a minimal HTML page that loads D3.js version 4.5.0 and provides an empty template for building custom visualizations. It includes a placeholder script tag where D3 code would be inserted, along with an index.js file that logs “hello world” to the console and a styles.css file defining a large centered message class. The page demonstrates the basic file structure and setup required to start a new D3 project, though it does not render any visual output or animation yet.

Loading thumbnail…

Test 2

This is a minimal D3.js starter template that displays a large “Hello D3!” message in the center of the page. The example uses D3 version 4.5.0, imported as a module, alongside standard HTML, CSS, and JavaScript files. The visualization demonstrates basic page rendering with a styled text element, showing how to set up a simple D3 project structure with separate files for styling and script logic.

Loading thumbnail…

D3 Scale Plot Large

This example shows a scatterplot of 11 data points, each represented by a circle with a red text label showing its x,y coordinate. The visualization uses D3.js v3 scale functions (`d3.scaleLinear`) to map the data values to SVG circle positions and radii, with padding applied to the plotting area. The SVG rendering is created programmatically by appending circles and text elements to the document body, demonstrating how scales handle a large data value (600,150) without manual axis adjustment.

Loading thumbnail…

Test

This example is a minimal HTML starter page that displays the message “Hello HTML!” in large, centered text. The page loads a simple JavaScript file that logs “hello world” to the console, demonstrating the basic structure of an HTML document with linked CSS and module scripts. No data visualization or external libraries are used.