Tell us what works and what could be better. We read every submission.
@adkinsc·4 public vizzes
This example loads a tab-separated dataset of daily temperatures for New York, San Francisco, and Austin, then parses it into per-city time series using `d3.tsv` and `data.columns`. The SVG canvas displays a single static text instruction, while the parsed city data is logged to the console for inspection. The code demonstrates how to reshape wide-format tabular data into nested arrays of date–value pairs, though it does not render the actual lines or axes. It uses D3 v4’s selection and data-binding methods, with an SVG viewport sized at 960 by 500 pixels.
This grouped bar chart displays state populations by age group, using color-coded bars for each age category across seven states. The visualization loads CSV data with d3.csv, encodes the x-position with d3.scaleBand and y-values with d3.scaleLinear, and assigns colors via d3.scaleOrdinal. It formats the y-axis tick labels with d3.format’s “s” SI prefix, computes domains with d3.max, and renders axes with d3.axisBottom and d3.axisLeft. A legend is appended manually, and the chart follows conventional margins with an SVG output.
This visualization displays the number of students enrolled in each degree program at a university, sorted from highest to lowest totals. The horizontal bar chart uses D3 v4 with SVG rendering, featuring steelblue bars that turn brown on hover and a tooltip showing exact values. The y-axis labels are hidden to reduce clutter, and the chart is animated when initially rendered. The data comes from a CSV file listing 150+ academic programs and their student counts, with the bars extending horizontally to show program popularity at a glance.
A horizontal bar chart displays letter frequencies from a TSV data file, with bars sorted ascending by frequency value. The visualization uses D3 v4’s `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis, rendered as SVG rectangles. The code applies `d3.axisTop` and `d3.axisLeft` for axes, and bars change color on hover. The data is loaded via `d3.tsv` and sorted using a comparison function on the frequency field.