Tell us what works and what could be better. We read every submission.
@annemariet·4 public vizzes
Ten bars animate in a loop, changing height and color every half second. The bars represent random values between 0 and 1, with a linear color scale mapping low values to yellow and high values to green. The code uses D3 v4 with SVG, updating the bars via `d3.selectAll("rect").data(data).transition()`. It sets `d3.scaleBand` for x positioning, `d3.scaleLinear` for y and color, and generates new random data each interval.
This block loads a small CSV dataset on street harassment experiences and renders it as a static grouped bar chart in SVG. The data records counts of reported actions (e.g., “sexual comments about a woman/girl’s body parts or appearance,” “whistling while a woman or a girl is passing by”) across perceived types of assault, respondent gender, and age group. Each row is drawn as a thin rectangular bar with no fill, and a separate black line marks the overall value per category. The visualization demonstrates a minimal approach to binding external tabular data to SVG elements using D3 v4, without animation or data-binding complexities.
This visualization displays a series of red circles connected by a smooth line, with each circle representing a value from a static array. The circles react to mouse hover by transitioning to black, then back to red on mouseout. Built with D3 v4, it uses a linear scale to map data values to vertical positions and a d3.line path with curveBasis for the connecting curve. The SVG rendering is animated through D3 transitions triggered by mouse events.
This visualization displays a series of red circles along a horizontal axis, with their vertical positions determined by a dataset of numeric values. The circles are drawn using D3 v4's data binding and selection methods, with a linear scale mapping the data range to pixel heights. The SVG canvas is populated by appending circle elements, each styled with a fixed red fill and positioned using calculated `cx` and `cy` attributes. The data values, ranging from 10 to 87, are mapped so taller circles appear higher on the screen, demonstrating a basic scatterplot-like layout with no axes or labels.