Tell us what works and what could be better. We read every submission.
@adammak137·7 public vizzes
A dynamic bar chart displays a shifting dataset of 20 values, with each bar’s height and color (from black to yellow) encoding its current value. Clicking the paragraph triggers a random new value, pushing it into the array and shifting out the oldest. Using d3.v4, the code binds data to SVG `rect` and `text` elements via `d3.scaleBand`, `d3.scaleLinear`, and keyed joins, animating transitions with `transition().duration()` to slide bars leftward, update their heights, and remove exiting elements.
A scatterplot displays 50 randomly generated data points as small black circles on an SVG canvas, with teal axes and tick labels. Clicking the prompt above the chart generates a new random dataset, triggering a transition where circles grow to magenta, scale based on their y-values via `d3.scaleSqrt`, and then shrink back to black after the axes update. The code uses D3 v4 with `d3.axisBottom`, `d3.axisLeft`, and `clipPath` to constrain drawing, animating position and appearance through `transition().duration()`.
This example displays a scatterplot of 50 randomly generated data points, each positioned by x and y coordinates on linear scales. The circles transition from teal to black with varying radii based on the y-value. Clicking the prompt above the chart generates new data points, triggering animated transitions that update circle positions, radii, and the axes using d3.axisBottom and d3.axisLeft. The visualization uses d3.v4 with SVG rendering, including a clipPath to contain the circles within the chart area.
This example plots a set of 2D coordinates as circles in an SVG, with each circle’s position and radius scaled using d3.scaleLinear and d3.scaleSqrt. Axis lines and tick labels are drawn via d3.axisBottom and d3.axisLeft, while red text labels display each point’s raw values. After the initial render, all circles transition over one second, shrinking to a radius of three and filling with teal, demonstrating d3.transition on SVG circle elements. The data is a hardcoded array of coordinate pairs, and the visualization uses D3 v4 with SVG rendering and animation.
This example maps an array of coordinate pairs to an SVG scatterplot, encoding each point as a circle whose radius reflects the y-value. The code uses d3.scaleLinear for the x and y axes, d3.scaleSqrt for the radius, and d3.axisBottom and d3.axisLeft to draw teal axes. It renders circles and red coordinate labels, then animates a one-second transition that recolors each circle teal and shrinks its radius to 3. The data is hardcoded in a JavaScript array.
This visualization plots a static set of 11 coordinate pairs as red-labeled circles on an SVG canvas, with each circle’s position scaled by linear x and y axes and its radius by a square-root scale. The code uses d3.scaleLinear, d3.scaleSqrt, d3.axisBottom, and d3.axisLeft to build the chart, then applies a one-second transition that recolors all circles to teal and shrinks their radii to 3 pixels. The data is an inline array, and rendering relies on SVG elements with d3.v4.
This visualization maps eleven coordinate pairs from a hardcoded data array to circles in an SVG scatterplot, with each point labeled by its x and y values. It uses d3.scaleLinear for the x and y axes, d3.scaleSqrt for circle radius, and d3.axisBottom and d3.axisLeft for the teal-styled axes. After drawing the circles and red text labels, a d3 transition animates each circle over one second, changing its fill to teal and shrinking its radius to 3.