Tell us what works and what could be better. We read every submission.
@aax951·7 public vizzes
This example animates a line chart of population projections, showing how individual series grow, decline, and change direction over time. Using D3 v3 with SVG and animation, it draws multiple lines simultaneously and animates them by manipulating the `stroke-dasharray` and `stroke-dashoffset` SVG properties. The dataset, loaded from a CSV file, contains 28 different population projection scenarios for each year from 2012 to 2031, with the animation revealing each line progressively to illustrate trends. The `animateLines` function demonstrates a technique for animating lines by transitioning dash properties, which is particularly useful for highlighting growth, decline, or geographical movement in time-series data.
This interactive visualization combines a geographic map of San Francisco neighborhoods with a line plot of Airbnb listing activity over time. Using D3.js, the map displays neighborhood boundaries with circles sized by the number of listings, scaled with a square-root power scale. The line plot shows the time series of Airbnb activity for each neighborhood. Both views are linked: hovering or selecting a neighborhood on the map highlights its corresponding time series. Data comes from Inside Airbnb and is presented under a CC0 public domain license. The visualization allows users to explore how Airbnb listings are distributed across SF neighborhoods and how activity changes over time, providing insight into the company's civic impact.
This dashboard presents a real-time operations overview with nine labeled panels, each showing a different metric such as sales by hour, sales today, and bundles today. The center panel displays an animated donut chart that loads sales data from a CSV, while the bottom includes a scrolling ticker with breaking news and sales updates. A force-directed network diagram with custom-colored nodes and links is also incorporated. The entire layout is built with D3 v3 and rendered as SVG, with smooth animations for transitions and the ticker.
This interactive US state map visualizes sample data for each state using an SVG-based choropleth. States are colored according to randomly generated low, average, and high values per state, using a yellow-to-dark-red interpolated color scale. Hovering over a state triggers a tooltip displaying its name and the low, average, and high values. The map is rendered with D3 v3 and includes simple hover animations that adjust fill opacity. Data is randomly generated for each state on load, with tooltips providing detailed numeric information.
This example shows a bar chart of letter frequencies from a TSV dataset, where hovering over a bar triggers two visual effects: a purple highlight and a custom tooltip displaying the frequency value. The chart uses d3.v3 with SVG rendering and animated transitions. Tooltips are implemented with the d3-tip library, while an additional HTML div tooltip follows the mouse position. The bars animate into place with an elastic easing effect on load, and the axis uses a percentage format.
A bar chart displays letter frequencies from a tab-separated data file, with green bars that turn purple on hover. The d3-tip plugin adds a tooltip showing each letter's exact frequency value when the mouse moves over a bar. Built with d3.v3 and SVG, the chart uses ordinal and linear scales, axis components, and the `.on('mouseover', tip.show)` and `.on('mouseout', tip.hide)` event handlers to trigger the tooltip.
This example shows a d3.v3 bar chart of letter frequencies in English, loaded from a TSV file, with interactive tooltips that display each bar’s exact frequency on mouseover. The chart uses ordinal and linear scales for positioning, SVG rectangles for bars, and axis components for the x and y scales. Tooltips are added via the d3-tip library, which attaches a styled HTML tooltip to each bar through the `tip.show` and `tip.hide` event handlers, with a custom `html` function formatting the displayed value.