Tell us what works and what could be better. We read every submission.
@alokkshukla·8 public vizzes
A D3.js v4 scatter plot displays 50 randomly generated data points, with circle size encoding the y-value via a square-root scale and stroke width proportionally mapped to it. Linear scales map the data to x/y positions within the SVG canvas, with a padding offset of 30 pixels. Teal dashed guide lines extend from each circle to the bottom axis, enhancing readability. The chart includes styled axes rendered with `d3.axisBottom` and `d3.axisLeft`, featuring customizable tick counts and a teal color scheme with bold text. Axes are positioned using SVG group elements and transform translations, demonstrating D3's modular axis API.
A scatter plot displays 50 randomly generated data points, with circles scaled in size and stroke width based on their y-values. The chart includes x and y axes generated using D3 v4's `d3.axisBottom` and `d3.axisLeft`, which use linear scales (`d3.scaleLinear`) for positioning. The SVG rendering also adds light gray vertical guide lines from each point to the baseline, while the axes are styled with teal strokes and bold text via CSS. Tick counts are configured on each axis.
This line chart visualizes the closing price of AAPL stock over several years, with the date on the x-axis and the closing value on the y-axis. The data is loaded from a tab-separated values (TSV) file and parsed with d3-dsv, while d3-time-format handles date parsing and formatting. The chart uses d3-scale for position encodings, d3-array for data processing, d3-axis for the axes, and d3-shape to draw the line. The visualization follows conventional margins and renders in SVG using D3 v4.
This interactive line chart uses d3.annotation to add responsive callout labels to a time-series visualization of stock close prices. The annotations—three labeled badges marking specific dates—can dynamically change annotation type and support hover events. On mouseover, each annotation displays additional context (the close price and date) via appended text, which is removed on mouseout. A separate resize annotation lets users drag to change the chart’s width, demonstrating how annotations can be reconfigured responsively. The SVG chart is built with D3 v4, using a line path, axes, and d3-annotation’s callout elbow type.
This example demonstrates how to use the d3.annotation library to create annotations that can change type responsively and support hover interactions. It renders an SVG line chart of stock closing prices from a TSV dataset. The visualization includes several annotations on the chart; when the user hovers over an annotation, its type dynamically switches (for example, between a callout and a curve), and the annotation responds interactively. Built with D3 v4, this block shows how to combine d3.annotation with event handlers to create dynamic, responsive data annotations.
A packed bubble chart displays a static set of food items and their associated counts as proportionally sized, colored circles arranged in a tight cluster. The visualization uses D3 v4’s `d3.pack` layout on a hierarchical dataset, with each leaf node rendered as an SVG circle and labeled with its name and count. Color is assigned via `d3.scaleOrdinal` with `d3.schemeCategory20`, and text size scales relative to each circle’s radius.
A bar chart displays a dataset of random values, with bars and labels that animate when a button triggers new data. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. On click, transitions with staggered delays, durations, and easing functions (`d3.easeBounceOut`, `d3.easeCircleIn`) update bar heights, colors, and label positions smoothly.
A scaled scatter plot displays 50 random data points with circles sized by a square-root scale, positioned by linear x and y scales. The visualization includes axis ticks styled in teal, with guide lines extending from each point to the bottom. Built with D3 v4, the code uses `d3.scaleLinear`, `d3.scaleSqrt`, `d3.axisBottom`, and `d3.axisLeft`, rendering to SVG. The axes are appended as groups with CSS classes, and the `call()` function applies the axes to the chart.