Tell us what works and what could be better. We read every submission.
@andrewwitherspoon·18 public vizzes
A treemap visualization displays the relative sizes of corporate donations among Fortune 100 companies, with each rectangle's area proportional to the company's listed contribution amount. The visualization uses color to encode different parent groups, though the single-level hierarchy results in each company receiving a distinct color. Built with D3 v4, the code uses `d3.treemap()` with the `d3.treemapResquarify` tiling algorithm to compute the layout, and renders cells as SVG groups with rectangles and text labels. Data comes from a local JSON file, and the animation transitions between size-based and count-based sums.
A treemap shows the distribution of shelter assault incidents across geographic regions, with rectangle area encoding case counts and color distinguishing regional categories like Africa and the Americas. The visualization animates between two aggregation metrics—case size and equal weighting per incident—using a 750-millisecond transition triggered by radio inputs. Built with D3 v4, it employs `d3.hierarchy`, `d3.treemap`, and the squarified tiling algorithm to recursively subdivide space, while SVG rectangles, clip paths, and text labels render the hierarchical data from a local JSON file.
This treemap visualizes the geographical distribution of Google requests by recursively subdividing a rectangle into nested rectangles, where the area of each rectangle is proportional to the number of requests for that country, and color encodes continents. The squarified layout algorithm from d3.treemapResquarify arranges the tiles efficiently, while a categorical color scale with a white fade distinguishes the four continent groups—Africa, Americas, Asia, and Europe. The visualization is rendered with SVG and includes an animation effect. The data, sourced from a gist, shows the relative volume of Google requests across countries, with larger areas representing higher request counts. The design is a fork of Mike Bostock's treemap, adapted from the Flare visualization toolkit dataset, with the treemap concept originally invented by Ben Shneiderman and the squarified layout by Bruls, Huizing, and van Wijk.
A treemap recursively subdivides a rectangle into smaller areas, where each node’s size corresponds to its value. This example encodes Flare visualization toolkit packages by color, using a squarified layout. The D3 v4 code loads hierarchical JSON data, applies `d3.hierarchy` with `.sum()`, and renders SVG rectangles and text with clip paths. A radio button toggles between size-based and count-based sums, triggering animated transitions via `cell.transition()` over 750 milliseconds.
A treemap visualizes asylum applications by country in 2016, with the area of each rectangle proportional to the number of asylum seekers from that country. The visualization uses D3 v4 to recursively subdivide a 960×570 SVG canvas into rectangles, with color encoding different countries via a faded categorical color scale. Users can toggle between summing values by size, though the count mode is disabled. The animation and squarified treemap layout are rendered using SVG, with data loaded from a JSON file.
This scatterplot shows the relationship between state-level teacher salary changes from 2000 to 2016 (horizontal axis) and 2016 average salaries (vertical axis), with each point labeled by state name. The code loads data from a TSV file using d3.tsv, applies linear scales for both axes, and uses an ordinal color scale for categories. Axes are rendered with d3.svg.axis, while circles are drawn as SVG elements with text labels overlaid.
This scatterplot displays the relationship between gun ownership and gun death rates across U.S. states, with each state labeled directly next to its data point. The visualization uses D3 v3 to load and parse a TSV file, apply linear scales to both axes, and render circles and text labels in an SVG. The code employs d3.tsv, d3.scale.linear, d3.extent, and d3.svg.axis to compute domains, draw axes, and encode the two quantitative variables, while a categorical color scale is applied but not visibly used for differentiation.
This gist demonstrates a Keybase identity proof, binding the GitHub account `andrewwitherspoon` to the Keybase user `awitherspoon88`. It contains a signed JSON object with cryptographic details, including the public key, Merkle root, and a signature, all formatted for verification. The proof is presented as a Markdown file with embedded JSON and a command-line instruction for lookup. The code uses no data-visualization libraries, serving solely as a static authentication document.
This line chart displays the annual GDP percent change for 52 African countries from 2008 to 2013, with each country represented by a separate line colored using d3.scale.category10. The data is loaded from a TSV file, and the visualization uses d3.tsv for parsing, d3.time.format for dates, d3.time.scale for the x-axis, and d3.scale.linear for the y-axis. Hovering over the chart reveals the specific country's values through an interactive tooltip, making it easy to compare economic growth trends across the continent. The chart is rendered with SVG and follows conventional margins.
This treemap visualizes NAFTA trade data, with each rectangle representing a product category and its area proportional to trade value. Color encodes the parent country (Mexico, Canada, or the United States), using a faded categorical color scheme. Built with D3 v4 and rendered in SVG, the view includes radio buttons to switch the treemap's value metric between size (trade value) and count. The rectangles are labeled with product names and values, and the layout uses the squarified treemap algorithm with animated transitions when switching modes.
A treemap of U.S. trade with Canada visualizes the value of exported goods across 99 product categories. Each rectangle's area encodes the export value in US dollars, while color encodes the product category using a faded categorical palette. The visualization uses D3 v4’s hierarchical treemap layout with the squarified tiling algorithm to recursively subdivide the space. A radio button labeled “Size” is provided, though it only toggles the single available mode; hovering is not implemented, and the animation is limited to the initial layout transition. The data is from the Flare toolkit and Jeff Heer’s dataset, adapted by andrewwitherspoon.
This scatterplot displays the financial performance of 57 health-sector companies, plotting their 2016 growth against 2017 growth. Each company is represented by a dot colored by its industry type (pharmaceutical, medical device, health insurance, provider, drug supply chain, or other) using D3’s categorical color scale, with a label identifying the company name next to each point. The visualization uses linear scales for both axes, computes their domains from the data with d3.extent, and renders axes via d3.svg.axis. Data is loaded from a TSV file with d3.tsv, and circles are positioned using the 2016 and 2017 values.
This multi-series line chart visualizes the annual percent change in GDP for 20+ countries from 2000 to 2016, with each country represented by a colored line. The x-axis encodes time using d3.time.scale, while the y-axis uses a linear scale for percent change values. Data is loaded and parsed from a TSV file using d3.tsv, with dates parsed via d3.time.format. The chart computes its domains using d3.extent, d3.min, and d3.max, derives column names via d3.keys, and applies color encoding with d3.scale.category10. Axes are rendered using d3.svg.axis, and the multi-series lines are drawn with d3.svg.line. The visualization uses conventional margins and an SVG rendering, displaying each country's annual GDP percent change since the year 2000.
This scatterplot visualizes the relationship between Twitter and Facebook engagement scores for 24 news organizations, with each point labeled by company name. The chart uses D3 v3 with SVG rendering, employing `d3.tsv` to parse the data file and `d3.scale.linear` for x- and y-position encoding. `d3.scale.ordinal` assigns categorical colors, while `d3.extent` computes the axis domains and `d3.svg.axis` displays the axes. The code applies conventional margins and overlays text labels near each dot, though the color mapping relies on a `correlation` field not present in the provided data.
This line chart shows the percent change in GDP for 55 countries from 1990 to 2014, with each country represented by a single multi-line series. The chart uses conventional margins and D3 v4 features including d3.tsv for data loading, d3.time.scale for the x-axis, d3.scale.linear for the y-axis, and d3.scale.category10 for color encoding. Data is parsed from a TSV file with d3.tsv, dates are parsed using d3.time.format, and the chart computes domains with d3.extent, d3.min, and d3.max. Axes are rendered with d3.svg.axis and the lines with d3.svg.line. The visualization reveals the varying economic growth trajectories across 55 countries from 1990 onward, with noticeable divergences and spikes in percent change GDP over time.
This line chart visualizes the daily average temperatures of New York, San Francisco and Austin over the last year, using a multi-series line chart to compare seasonal patterns across the three cities. The chart uses D3 v4 with SVG rendering, loading a TSV file and employing conventional margins. It leverages d3.tsv for data parsing, d3.time.format for date parsing, d3.time.scale and d3.scale.linear for position encodings, and d3.scale.category10 for color encoding. Domains are computed with d3.extent, d3.min, and d3.max; d3.keys derives column names; axes and lines are rendered with d3.svg.axis and d3.svg.line. The visualization displays daily average temperatures for New York, San Francisco and Austin over the past year, with each city represented by a distinct colored line.
This line chart displays the daily closing price of AAPL stock from April 2007 to January 2008, with time on the x-axis and price on the y-axis. The data is loaded from a TSV file and parsed using d3-dsv, with dates formatted via d3-time-format. The chart uses d3-scale for position encodings, d3-array for data processing, d3-axis for the axes, and d3-shape to generate the line. Following conventional margins, the visualization renders as an SVG with a single smooth line, an x-axis showing dates, and a y-axis showing closing price in dollars, making the stock's upward trend and fluctuations clearly visible.
This line chart shows the month-over-month inflation rates across U.S. states from November 2015 through February 2017. Each state is represented by a colored line, with values plotted as percentages along a shared y-axis and dates along the x-axis. The chart uses conventional margins and a time scale for the x-axis, a linear scale for the y-axis, and a categorical color scale to distinguish states. Data is loaded from a TSV file and parsed with d3.tsv, while axes and lines are rendered using d3.svg.axis and d3.svg.line.