Tell us what works and what could be better. We read every submission.
@apolan·6 public vizzes
This interactive D3 treemap visualizes a dataset of stock market transactions for various companies, using nested rectangles to represent hierarchical data. The view is animated, and hovering over any rectangle reveals details about the corresponding website. The data is dummy data (acciones.csv) containing financial fields such as date, ticker symbol, transaction amount, quantity, and price metrics. Users can click a rectangle to navigate to the associated website. Built with D3 v3, this block forks from a series of treemap examples and includes mouseover events for interactive exploration.
This treemap visualizes a hierarchical dataset of websites using D3’s treemap layout, with cell areas proportional to a numeric value. Hovering over any cell displays a tooltip with details about that website; clicking navigates to the corresponding site. The data is dummy data, and the example builds on a series of forked treemap blocks. The animation shows the treemap’s initial layout transition.
A treemap visualizes the assets of two political parties, A and B, with each party subdivided into individual members and their holdings across ground, building, and cash categories. A dropdown menu switches the treemap’s value metric between total, building, ground, and cash, using `d3.layout.treemap` with a sticky layout. Clicking a cell zooms into that branch with a smooth `transition`, and option-clicking returns to the root. The hierarchy comes from a JSON file, and the cells are colored by parent party using `d3.scale.category20c`.
The visualization displays the world's biggest data breaches, aggregated by year and categorized by breach method (Hacked, inside, accidentally, lost, poor). It combines a histogram showing total records breached per year with an interactive pie chart and legend that update on mouseover. Built with D3.js v3, it uses ordinal and linear scales, SVG paths for the pie, and axis components for the histogram. Data comes from a gist source.
This bar chart displays student grades, where each orange bar represents an individual student’s code and grade. Users can hover over any bar to view a tooltip with the exact grade and code, or click the "Organizar" button to sort the data by grade. The visualization uses D3 v3 with SVG rendering, applying ordinal and linear scales for axes, and the d3-tip library for interactive tooltips.
A bar chart displays the grades of a set of students, with each bar representing a student’s code on the x-axis and their grade on the y-axis. The visualization uses D3 v3 with SVG rendering, and hover interactions trigger a tooltip via the d3-tip plugin to show the exact grade and code. A button labeled "Organizar" sorts the data by grade and repaints the chart. The chart uses orange bars that darken on hover, with axes labeled "Estudiantes" and "grades".