fresh block

100%

✓ Published0🌍 Public

Last edited Jul 1, 2017

Created on Jul 1, 2017

The visualization shows a bubble chart of music artists' album sales, using a force-directed simulation to position circles sized by sales figures. Users can toggle between two modes: "Decade split" groups artists into pre-2000 and post-2000 clusters, while "Combine" merges them into a single central field. The circles are colored light blue and rendered with SVG, with a neon gradient defined in the background. Clicking an artist logs its data to the console.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A radial bubble chart shows the relative frequency of 50 data points, where each count is rendered as a red or blue circle. Clicking any bubble increments its count and repositions all circles along a ring, with the selected bubble moving to the center. The visualization uses d3.scaleSqrt and d3.scaleLinear to map count values to circle radius and color, and d3.select transitions animate the position and fill changes over 800 milliseconds. The data is generated randomly with d3.range and Math.random.

MMadelijn

79% match

Loading thumbnail…

fresh block

This network visualization maps associations between music artists based on co-occurrence in recommendation lists. Nodes represent artists, with size scaled by the number of associated tags, and links indicate item-set support values from the recommendation data. The code uses d3.forceSimulation to compute the physics-based layout, with d3.forceLink and d3.forceManyBody managing edge and repulsion forces. Artist tags are parsed from a CSV file to assign node colors via d3.scaleOrdinal, and hover interactions display artist images using d3.select and tooltip divs.

MMelanieSalignat

78% match

Loading thumbnail…

fresh block

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`.

335degrees

76% match

Loading thumbnail…

fresh block

A simple bar chart displays sales figures per salesperson, using steel-blue bars with labeled x- and y-axes. The visualization loads data from a CSV file with d3.csv, formats the numeric sales column, and applies d3.scaleBand with padding for the categorical axis and d3.scaleLinear for the value axis. SVG rectangles are bound to the data via d3.selectAll and enter().append, while d3.axisBottom and d3.axisLeft render the axes. The chart is built with D3 v4 and rendered entirely as SVG, with margins handled through a group transform.

SSebDelSab

75% match

Loading thumbnail…

fresh block

This example, built with D3 v5 and SVG, visualizes a Gapminder-style dataset using a bubble chart. The x-axis represents GDP per capita, the y-axis shows life expectancy, circle size encodes population, and color maps to geographic region. The chart animates through years 1964 to 2013, showing how countries' development indicators evolve over time. A play button and time slider allow users to scrub through the years, with circles transitioning smoothly between states. The visualization highlights global trends in health and wealth, with tooltips providing country-specific data on mouseover.

AAitorCCE

75% match

Loading thumbnail…

fresh block

A line chart displays monthly values for twelve categories labeled A through L, with circles marking each data point and dashed vertical guides from the baseline. Hovering a circle highlights it in red, fades in the corresponding value label and guide line, then restores them on mouseout. The visualization uses d3.line, d3.scaleTime, and d3.scaleLinear to position marks, with transitions on opacity for interactive feedback. Data comes from a local JSON file, and rendering occurs in SVG with a monospace font for numeric labels.

KKylaste

75% match

Loading thumbnail…

fresh block 123

A bar chart displays a dynamic set of numeric city values, with buttons to add or remove random data points. Each bar animates its height and position using D3 v4 transitions, growing from the bottom when entering and shrinking downward when exiting. The chart uses `d3.scaleBand` for x-axis positioning, `d3.scaleLinear` for the y-axis, `d3.axisBottom` for ticks, and `d3.schemeCategory20c` for bar colors. All elements render as SVG within a fixed-size canvas.

Aallyraza

75% match

Loading thumbnail…

fresh block

A clustered force-directed layout shows 200 colored circles grouped into 10 distinct clusters, with circle size varying randomly. The visualization uses d3.v4’s `d3.layout.force` for simulation and `d3.geom.quadtree` for collision detection, while custom cluster and collide functions enforce intra-cluster padding and inter-cluster separation. Rendering is SVG, with color assigned via `d3.scale.category10` and circles positioned on each tick. The data is procedurally generated in the browser using random radius and cluster assignments.

Aangelferroey

75% match