Tell us what works and what could be better. We read every submission.
@alex-rind·32 public vizzes
A scatterplot shows the relationship between horsepower (x-axis) and miles per gallon (y-axis) for cars from the cars.json dataset, with each point’s tilt angle encoding engine displacement. Points are hollow circles with transparent fill and blue strokes, rotated from 0 to 90 degrees based on displacement. The Vega specification uses linear scales for x, y, and angle, with gridlines drawn by axes. Data filtering removes invalid values, and point descriptions display all three numeric fields on hover.
This example shows a Keybase proof document that cryptographically links a GitHub account to a Keybase identity. It presents the signed JSON object, the public key, and the resulting signature, along with instructions for command-line verification. The rendering relies on standard Markdown code blocks to display the structured data and the Keybase signature, making the audit trail explicit. The data originates from the Keybase proof system, and the example demonstrates the human-readable format of a web service binding attestation.
This example shows a scatter plot of blood pressure measurements, with systolic pressure on the x-axis and diastolic pressure on the y-axis for twelve individuals of both sexes. A semi-transparent peach-colored rectangle marks the target range (systolic 90–140, diastolic 60–90), highlighting measurements outside this range. The visualization uses Vega-Lite with a layered specification: a rectangular mark for the target region and point marks for the data, with explicit scale domains for both axes. Data is embedded directly in the specification as JSON values.
This scatter plot displays systolic versus diastolic blood pressure measurements for twelve individuals, with point size encoding BMI and point shape distinguishing biological sex (male versus female). The visualization uses a Vega-Lite specification with a layered point mark, where filled circles are positioned on fixed quantitative scales for both blood pressure axes. The code defines a quantitative size encoding for BMI and a nominal shape encoding for sex, while disabling grid lines for a cleaner presentation. Data comes from an inline JSON array within the specification, rendering through Vega-Lite’s declarative API.
A scatter plot shows glucose levels on the x-axis and BMI on the y-axis for seven diabetes patients, with a semi-transparent rectangular region highlighting the healthy glucose range (60–120) and healthy BMI range (18.5–25). The visualization uses a Vega-Lite layered specification: a rect mark defines the healthy area with fixed datum values, while circle marks encode patient data from inline JSON. The code sets a fixed width of 500 pixels and applies a 0.1 fill opacity to the background rectangle, leaving the points fully visible for comparison against the highlighted zone.
This parallel coordinate plot shows the percentage of fully vaccinated people by age group across Austrian federal states in March 2021, based on data from ORF. It uses a folded data structure with joinaggregate normalization to map each age group's percentages to a 0–1 scale. Colored lines represent regions, with Austria highlighted by a thicker stroke. Manual axes are constructed with ticks and text labels showing the original min, mid, and max values for each age category.
This example demonstrates a polar area chart that visualizes the popularity of nine programming languages, with each sector’s radius representing a randomly generated value. The chart updates every 20 seconds with fresh data, and hovering over a sector displays its current value in a separate message area. Built using the d3-ez reusable chart library, it employs the `d3.ez.chart.polarAreaChart()` API, along with `d3.ez.base()` for the overall layout, a legend component, and a title component. The data is generated client-side via a custom `randomDataset()` function, and animation is achieved through the `setInterval()` update loop.
This example displays a directed adjacency matrix, where rows represent source nodes and columns represent target nodes. It loads node and edge data from arrays and renders an SVG grid of red squares, with edge weight encoded through fill opacity. The D3 v3 code uses `d3.scale.ordinal` for axis positioning and `d3.svg.axis` for labels, while mouseover highlights rows and columns by increasing the stroke width of matching cells.
This bar chart shows the frequency of each letter in the English language, using a TSV file parsed with d3-dsv and rendered as SVG rectangles. The x-axis uses d3.scaleBand for letter categories, while the y-axis uses d3.scaleLinear with percentage formatting via d3-format. Hovering a bar changes its fill to brown, and axes are generated with d3-axis. Data loading is handled asynchronously through d3.tsv, with values converted to numbers using d3-array.
This example visualizes a small dataset of twenty numeric values using a horizon graph, a technique that increases data density by layering a single chart into multiple offset bands. The Vega-Lite specification defines four layered area marks, each with a clipped y-scale domain of 0 to 50, and uses calculated transforms to shift values upward by 50, 100, or downward by 50 to create stacked bands with varying opacity. The chart is rendered via vegaEmbed, which loads Vega-Lite v4 and Vega v5 from a CDN, and applies monotone interpolation to smooth the area curves.
This scatter plot visualizes the relationship between HbA1c levels and BMI in a diabetes dataset, with each dot representing a patient. The code uses D3 v5 to load CSV data and render SVG circles positioned by linear scales. Axis labels and tick marks are generated with d3.axisBottom and d3.axisLeft, while CSS classes style the dots with semi-transparent outlines.
This bar chart displays the BMI values of individuals from a diabetes dataset, with each bar labeled by the person’s name and the y-axis representing BMI frequency. The chart uses D3 v5’s `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, while `d3.axisBottom` and `d3.axisLeft` render the axes. Data is loaded as CSV via `d3.csv`, then parsed and mapped to numeric BMI values before being drawn as SVG rectangles with hover styling. The visualization follows a conventional margin layout.
This scatter plot visualizes the relationship between HbA1c and BMI for individuals with diabetes, with each point labeled by patient name. The data loads from a remote CSV file and uses d3.scaleLinear to map values to a 400x400 plotting area, with axes and labels added via d3.axisBottom and d3.axisLeft. Circles are styled with translucent strokes, while text labels are positioned to the left of each point. The code explicitly coerces CSV string values to numbers using the unary plus operator before computing the domain maxima with d3.max.
This scatter plot visualizes the relationship between HbA1c levels and BMI across countries, with each circle representing a country. The x-axis displays HbA1c values while the y-axis shows BMI, and hovering over a circle highlights it and reveals the country name via a tooltip. The visualization uses D3 v5 to render SVG circles, with axes labeled "employed/pop." and "unempl./pop." The code includes commented-out logic for coloring circles by sex, but currently renders all points with a consistent blue outline. Data is loaded from a remote JSON file.
This interactive force-directed graph shows character co-occurrence in Victor Hugo’s *Les Misérables*, with nodes representing characters and links representing their appearances together. The layout uses `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` to position related characters closer together. Draggable circles are colored by group using `d3.scaleOrdinal`, and link thickness reflects co-occurrence frequency. The code loads literal, inlined data instead of an external JSON file, though a separate `miserables.json` dataset is also provided.
This example shows a simple area chart of ten randomly generated values, rendered as a smooth filled path against a blank SVG canvas. The data is created inline using `Array.from` and `Math.random`, with values between 1 and 9. The code uses `d3.scale.linear` for both x and y axes, and `d3.svg.area` with a cardinal interpolation to draw the curved area from the baseline at height 500 up to each data point. The path is styled with a steelblue fill and stroke, and the visualization is fixed at 960 by 500 pixels.
A simple line graph displays ten random data points, with the area beneath the line filled in light steel blue. The chart uses d3.v4’s `d3.area` and `d3.line` generators, with `d3.scaleLinear` for both axes and `d3.axisBottom` and `d3.axisLeft` for ticks. The SVG paths are appended to a group, and the data is generated inline as an array of random integers. The fill extends from the baseline to the line, and the line itself is styled as a solid steelblue stroke.
This directed adjacency matrix visualizes a small network of five nodes, using a 5-by-5 grid where rows represent sources and columns represent targets. Cell fill opacity encodes edge weight, with darker red squares indicating stronger connections. On mouseover, the corresponding row and column are highlighted by thickening their borders. The visualization is built with D3 v3, using `d3.svg.axis()` for the ordinal name scales on both axes and a `queue()` pattern to load the CSV data, though the current code falls back to hardcoded arrays for nodes and edges.
This force-directed graph visualizes asylum flows between countries in 2016, based on a CSV dataset from UNHCR. Nodes represent countries of origin and asylum, while links show migration flows between them, with line width scaled to the flow volume using a square-root scale. The layout is computed by a physical simulation in D3 v4, where charged particles repel and springs attract connected nodes, causing related countries to cluster together. The network uses SVG circles and lines, with drag interaction to explore the graph. This example is a variant of Mike Bostock’s classic Les Misérables character co-occurrence visualization, adapted to read edge data from a CSV file and visualize asylum-seeker flows.
This example demonstrates dc.js charts for exploring the Titanic dataset. It loads the passenger data from a tab-separated values file and uses crossfilter to create dimensions for gender and age group. Two charts are rendered: a pie chart showing the distribution of passengers by gender and a bar chart displaying the distribution by age group, both using reduceSum to count passengers. The visualization is built with d3.js, crossfilter2, and dc.js, and can be used as a template for creating coordinated views with dc.js.
This interactive dashboard uses dc.js to explore European unemployment rates from 2011 to 2016, based on a CSV dataset. It combines four linked charts: a pie chart showing unemployment distribution by gender, and three bar charts visualizing unemployment sums by year, age group, and country. All charts are crossfiltered, so clicking or brushing on one chart filters the others. The visualization uses D3.js v5 with dc.js and crossfilter to enable dynamic exploration of the data, which contains unemployment values for multiple countries, both sexes, and age groups over time.
This example visualizes asylum-seeker flows between countries as a directed adjacency matrix, with source countries on the y-axis and destinations on the x-axis. The grid encodes the weight of each flow through the opacity of red squares, and hovering over a cell highlights the corresponding row and column. It loads node and edge data from CSV files using the queue library, then builds the matrix with d3.csv and renders it as SVG rectangles. Axis labels are added with d3.svg.axis, while d3.scale.ordinal positions the country names along both dimensions.
A force-directed graph visualizing asylum-seeker flows in 2016, with nodes representing countries and links representing asylum applications between them. The visualization uses D3's force layout to position nodes and draw edges, with data loaded from a CSV file containing origin and destination countries. The graph is rendered as an SVG with lines for links and circles for nodes, and the force-directed layout distributes the nodes based on the connections between countries. Data is sourced from UNHCR population statistics, showing asylum-seeker movements between countries of origin and countries of asylum/residence.
This dc.js example visualizes European unemployment rates from 2011 to 2016, broken down by country, gender, and age group. It uses four coordinated charts: a pie chart showing the gender distribution, and three bar charts displaying unemployment by year, age, and country. The data is loaded from a CSV file using d3.csv, processed with crossfilter, and aggregated with reductio to sum unemployment values. All charts are linked, so clicking on a slice or bar in any chart filters the data across all visualizations, allowing interactive exploration of the unemployment dataset.
Small multiples of scatter plots show employment-population ratio against unemployment-population ratio for eight gender-age groups, based on 2015 OECD data. The grid is organized with age categories as columns and gender as rows. Each small chart encodes the same x/y scales so the facets can be compared directly. Dots are hollow circles with a subtle stroke; female subgroups are distinguished by a pinkish stroke. Hovering highlights the same country across all panels, enabling cross-comparison between demographics. Axes and labels are provided in each panel, using D3 v4 with SVG rendering.
This scatter plot shows the relationship between employment-to-population and unemployment-to-population ratios across European countries for different age groups, using data from a CSV file. The visualization filters the data to display only the "Total" age group, with each circle representing a country. Circles are colored with pink strokes for women and blue strokes for men, and hovering over a circle highlights it in gray while displaying the country name as a tooltip. The x-axis maps the employed population ratio, the y-axis maps the unemployed population ratio, and axis labels clarify the variables. The plot uses fixed scales for both axes and is rendered as an SVG with D3 v4.
This choropleth maps unemployment rates across U.S. counties as of August 2016, using a threshold color scale to bin rates into discrete categories. County boundaries are rendered as SVG paths from TopoJSON, with color encoding based on the unemployment rate. The data is sourced from the Bureau of Labor Statistics, transformed from a fixed-width text file into CSV using command-line tools, and visualized with D3 v4.
This visualization generates a word cloud from a German legal text, displaying the most frequent terms in varying font sizes based on their occurrence. It uses the D3 word cloud layout algorithm by Jason Davies, which places words on a canvas using a spiral collision detection method. The example is initialized with a string of common German stop words to filter out frequently occurring but uninformative terms, then animates the placement of the remaining words as they are positioned into the cloud. The layout is rendered with SVG elements, and the word placement animation reveals the cloud forming word by word.
PubViz is an interactive visualization for exploring publication metadata from BibTeX files. It combines a tag cloud of keywords with a scatterplot of publications, using color highlighting to reveal relationships between terms and papers. The tool parses BibTeX data, renders titles and abstracts as animated, scalable vector graphics, and supports user-driven exploration of the corpus. The visualization is built with D3.js and jQuery, and it allows customization of highlight and decoration colors.
The bar chart displays daily closing values from a CSV dataset over a two-month period, with each bar representing a date’s stock price. The visualization uses D3 v3 with an ordinal x-scale and linear y-scale, rendering SVG rectangles with a steelblue fill. The code parses dates via `d3.time.format` and applies axes using `d3.svg.axis`, while rotating x-axis labels for readability. Data originates from the provided `data.csv` file, and the chart is built with Blockbuilder.org.
This dot plot overlays circular markers on a line chart to show stock closing prices over time, with each circle representing a daily value. The visualization uses D3 v4’s `d3.line` to draw the connected trend line and appends SVG `<circle>` elements for the individual data points. The time scale is set with `d3.scaleTime`, the linear value scale with `d3.scaleLinear`, and axes are rendered via `d3.axisBottom` and `d3.axisLeft`. Data comes from a CSV file with date and close columns, parsed using `d3.timeParse`.
This line chart visualizes stock closing prices over a 25-day period in 2012, using data from a CSV file. A single steelblue path shows the price trend, with dates on the x-axis and values on the y-axis. The visualization is built with D3 v4, using `d3.csv` to load the data, `d3.timeParse` to convert date strings, `d3.scaleTime` and `d3.scaleLinear` for the axes, and `d3.line` to generate the SVG path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`.