Tell us what works and what could be better. We read every submission.
@alina-zhu·7 public vizzes
The visualization displays the best TV series of 2016–2017 as a force-directed bubble chart, with each circle sized by rating and colored by genre. Two buttons let users toggle between combining all shows into a single cluster or splitting them into two groups by year (2016 on the left, 2017 on the right), using D3's force simulation to reposition the bubbles. Hovering over a circle reveals the show's title in a tooltip, while a legend identifies genre colors. The chart is built with D3 v4 and rendered as SVG, using data from a CSV file listing titles, years, ratings, and genres.
A force-directed bubble chart visualizes TV series from 2016 and 2017, with each circle’s radius scaled by viewer rating and color-coded by genre. Two buttons toggle the x-axis force: "Split by year" separates the bubbles into 2016 and 2017 clusters, while "Combine" merges them into a single group. Hovering over a circle reveals the series title in a tooltip. The visualization uses d3.v4 with SVG rendering and a collision-based simulation to arrange the bubbles.
This visualization displays TV series from 2016 and 2017 as circles, with size encoding user ratings and color encoding genre. Two buttons let viewers split the chart by year or combine the data. When split, the force-directed layout positions 2016 titles on the left and 2017 titles on the right; when combined, all circles move to the center. Hovering reveals a series title, implemented with D3 v4 and SVG.
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.
This visualization displays a geographic dataset of coordinates in Alaska and northern Canada as red circles overlaid on a map-like SVG background. The points are plotted using latitude and longitude values from the provided JSON data, rendered with D3 v4. The visualization uses an SVG projection to map the geographic coordinates, with each data point represented as a circular mark. The example is built with Blockbuilder and forks an anonymous author's original block, demonstrating how D3 can project raw geographic coordinate data onto a two-dimensional canvas.
A simple SVG scene displays three basic geometric shapes: a green circle, a yellow rectangle, and a blue line. The circle is positioned at coordinates (90, 90) with a radius of 50, while the rectangle has a width and height of 20 and appears at the default origin (0, 0). The line stretches from (0, 100) to (200, 300) with a stroke width of 3. The visualization uses D3.js v4 to append these SVG elements to a 960-by-500 canvas, demonstrating basic shape creation with d3-selection.
Four orange circles sit on a plain white canvas, positioned diagonally across the SVG. Their sizes and positions derive from an array of four numeric values, with each circle’s radius and vertical coordinate equal to its data point, while horizontal spacing adds a fixed offset per index. The visualization uses D3 v4’s data join, `selectAll`, `data`, and `enter` to append SVG `circle` elements, setting `fill`, `cx`, `cy`, and `r` attributes. Data comes from a hardcoded array in the script, rendered as static SVG within a 768-by-1024 viewport.