Tell us what works and what could be better. We read every submission.
@ammarasmro·6 public vizzes
HeapSort implementation demonstrates the classic heapsort algorithm sorting a randomly generated integer array. The code builds a max heap from an unsorted array of ten random integers, then repeatedly extracts the maximum element to produce a sorted sequence. The visualization uses Java's `SimpleWriter` and `SimpleWriter1L` APIs from the components library to output both the initial unsorted values and the final sorted result to the console. The program generates its data source internally using `Math.random()` to create pseudorandom integers between 0 and 199, then prints each stage of the process, showing the array before and after sorting.
The visualization displays conference registration data, plotting each attendee as a point along a timeline of purchase dates and grouping them by school affiliation and year of study. It uses D3 v4 to bind the dataset to SVG circles, positioning them with a linear time scale on the x-axis and categorical spacing on the y-axis. Animated transitions adjust circle positions as the data updates, while the color encoding distinguishes between universities and other post-secondary institutions. The example is built with blockbuilder.org and is part of a workshop series exploring data-driven documents.
This visualization displays conference registration data, showing each attendee's school affiliation, year of study, and area code as individual points. The SVG elements are bound to the dataset and rendered as circles, with the code using D3 v4 selections and data binding to map each record to a visual marker. The visualization is static, displaying the raw dataset without aggregation or filtering, and uses the standard `d3.select` and `d3.selectAll` methods to manage the SVG container and its child elements.
This interactive workshop demonstrates how to build and animate SVG shapes with D3 v4. A button triggers transitions that move a green rectangle and data-bound rectangles to random positions, while cycling their fill colors. The code uses d3 selection, data joins with `enter()`, and chained `transition().duration()` calls to animate attributes. Static SVG elements—blue, red, and yellow shapes—serve as the initial canvas.
This example visualizes conference registration data, showing the distribution of attendees by school affiliation and year of study across a timeline of order dates. It uses d3.v4 to bind the dataset to SVG elements, rendering each order as an animated point that updates its position based on categorical groupings. The visualization employs d3-selection and d3-transition methods to smoothly move circles between states, with the raw JSON data embedded directly in the script.
This example demonstrates a step-by-step tutorial for learning D3 v4 data binding and DOM manipulation. It shows how a button click triggers D3 code that updates existing paragraph elements, changing their font size and text content, and also appends new paragraphs from a JavaScript array using the data join pattern. The code uses `d3.select`, `selectAll`, `data`, and `enter` to bind data, with event listeners that respond to paragraph clicks by altering styling and text. The page includes checkboxes for tracking exercise progress, which are styled using CSS selectors based on checked state.