fresh block

100%

✓ Published0🌍 Public

Last edited Jun 30, 2017

Created on Jun 30, 2017

A bubble chart displays Medium articles grouped by category, with circle size encoding article views and color distinguishing Design, Development, and Data Science. The visualization uses D3’s `d3.forceSimulation` to position overlapping bubbles and `d3.scaleOrdinal` for categorical coloring. Hovering reveals a tooltip with the article’s title, category, and view count, based on data loaded from a CSV via `d3.csv`.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Untitled

The visualization is a bubble chart that maps Medium articles by their category and popularity. Each article is represented as a circle, with its size corresponding to the number of views and its color indicating the category (Design, Development, or Data Science). The chart uses D3 version 4.6, leveraging `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to position the circles, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. Hovering over a circle reveals a tooltip with the article title, category, and view count. The data is loaded from a CSV file, and the circles are rendered as SVG elements.

Rrjthompson22

81% match

Loading thumbnail…

Untitled

A reactive bubble chart visualizes January Medium articles, encoding each post's category by color and its view count by circle radius. Hovering a bubble reveals a tooltip with the article title, category, and number of hearts. The chart relies on `d3.forceSimulation` for layout, `d3.scaleOrdinal` with `schemeCategory10` for colors, and a `d3.scaleLinear` for radius. Data loads from a CSV file via `d3.csv`, and the reusable chart pattern exposes setters for width, height, and column mappings.

Ssergiofco

80% match

Loading thumbnail…

fresh block

A force-directed bubble chart visualizes task priorities and assignees from a CSV dataset. Node radii encode a priority scale (WISH, COULD, SHOULD, MUST), while colors distinguish priorities and labels show team members. The D3 v3 layout applies gravity and collision detection via a quadtree, and a fixed root node follows the mouse to repel bubbles interactively.

JJdlv00

79% match

Loading thumbnail…

fresh block

This interactive circle-packing visualization displays a hierarchical dataset from flare.json, using nested bubbles to represent categories and their relative sizes. The view begins with a zoomed-out root node and supports click-to-zoom transitions between hierarchy levels, with labels fading in for parent nodes. Built with D3 v4, it uses the `d3.pack` layout, `d3.hierarchy` for tree traversal, and `d3.interpolateZoom` for smooth zoom animations. Circle fills follow a linear color scale applied by depth, while SVG rendering and CSS hover effects highlight nodes. The root background shifts to a warm hue, and clicking anywhere resets the view.

AAkriti97

76% match

Loading thumbnail…

fresh block

A stacked area chart displays how four unnamed data categories change over time, with each layer labeled at the right edge and a y-axis formatted as a percentage. The code loads tab-separated data via `d3.tsv`, parses dates with `d3.timeParse`, and builds the visualization using `d3.stack`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. SVG rendering and axes are created with `d3.axisBottom` and `d3.axisLeft`.

AAsilve00

76% match

Loading thumbnail…

fresh block

A monthly time-series line chart displays a dataset of twelve alphabetical categories (A–L) with associated values. The visualization uses an SVG line and red circular markers to trace value changes over time. Built with D3.js v3, it employs ordinal and linear scales, a line generator, and custom mouseover/mouseout interactions that highlight data points with blue fills, dashed vertical guide lines, and enlarged value labels. The chart reads from an external JSON file, rendering axis labels as text elements and supporting smooth transitions during hover effects.

BBrunoDumas

76% match

Loading thumbnail…

fresh block

A horizontal bar chart displays the number of cases by resolution type, using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Rectangles represent each value, with a custom tooltip showing the category and amount on mouseover. Data loads from a CSV file via d3.csv, and axes are drawn with d3.axisBottom and d3.axisLeft under d3.v4.

GGoomble

76% match

Loading thumbnail…

fresh block

A horizontal bar chart displays categorical data as colored rectangles, where each bar's length corresponds to a numeric range (start to stop) and its color and vertical position encode an orientation (forward or reverse). The visualization uses D3 v4 to load JSON data via `d3.json`, bind it to SVG `rect` elements, and set attributes like `x`, `width`, `y`, and `fill` based on the data values. Forward-oriented bars appear in aqua on the upper row, while reverse-oriented bars are blue on the lower row, clearly separating the two categories.

BBrieLewis

75% match