Tell us what works and what could be better. We read every submission.
@adgramigna·10 public vizzes
A bar chart displays the marital status of adults, with bars representing counts for categories such as married, widowed, and never married. The visualization uses D3.js v4 to load CSV data, scale values with d3.scaleBand and d3.scaleLinear, and render rectangles in an SVG. Axes are added via d3.axisBottom and d3.axisLeft, with the chart’s dimensions and margins set explicitly. The data originates from a CSV file processed using d3.csv.
This bar chart displays the marital status of adults, with bars representing the number of people in each category, such as “Married, spouse present” and “Never married.” It uses d3.v4’s `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, rendering SVG rectangles via `d3.selectAll` and `.enter()`. Data is loaded from a CSV file using `d3.csv`, and axes are added with `d3.axisBottom` and `d3.axisLeft`. The chart is styled with a simple steelblue fill.
This bar chart displays the relative frequency of each letter in the English alphabet, using a simple, static SVG visualization. The code loads letter-frequency data from a TSV file and maps it to rectangles using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, with y-axis ticks formatted as percentages. Hovering over a bar changes its fill from steelblue to brown via CSS, while the chart itself is built with D3 v4’s data-join pattern (`enter().append`).
This bar chart displays the frequency of letters in the English language, loaded from a TSV file. The visualization uses conventional margins and D3 features including d3.tsv for data parsing, d3.format for percentage labels, ordinal and linear scales for positioning, and SVG axes. The chart animates the bars on load, with each bar representing a letter’s frequency. The data source is a gist by adgramigna, rendered with SVG animation under the MIT license.
This visualization shows the percentage of women in each age group whose highest level of education is a bachelor’s degree, based on data from Table_1F.csv. The chart renders as a pie chart using SVG, where each slice is colored via a d3.scaleOrdinal with a categorical range. The code uses d3.pie to compute the angles, d3.arc for the slice geometry, and d3.csv to load the data. Labels outside each slice display the age range and the percentage value, calculated by dividing each y value by the total sum, with the title text added manually to the SVG.
This example shows a donut chart that visualizes categorical data as percentage-labeled arcs, with each slice colored from a seven-color ordinal scale. The visualization is built with D3 v4, using `d3.pie` to compute arc angles, `d3.arc` for both the filled slices and their labels, and `d3.scaleOrdinal` for coloring. Data is loaded from a CSV file via `d3.csv`, with values parsed to numbers and percentages calculated relative to the total. The SVG rendering positions labels using `labelArc.centroid`, and the chart is centered on a 960×500 canvas.
A pie chart displays the percentage of men whose highest level of education is a bachelor’s degree, broken down by age group from 18 to 75 years and over, based on data from Table_1M.csv. Each slice is labeled with the age range and its corresponding percentage of the total. The visualization uses d3.pie to compute the arc angles, d3.arc for the SVG path geometry, and d3.scaleOrdinal for the categorical color palette. The chart includes a title and uses d3.csv to load the dataset.
A pie chart displays the percentage distribution of values from a CSV file, with each slice labeled by its share of the total. The visualization uses D3 v4’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute angles, draw SVG paths, and assign a categorical color palette. Labels are positioned via `labelArc.centroid` and formatted with `d3.format`. Data is loaded asynchronously with `d3.csv`, and the chart is rendered as SVG centered on a 960×500 canvas.
A simple bar chart displays the numeric values from a two-column CSV file, with each bar’s length proportional to the `y` value. The chart uses D3 v4’s `d3.scaleLinear` to map data to pixel widths, and appends `rect` and `text` elements within grouped `g` containers. Data is loaded via `d3.csv` and coerced to numbers using a custom `type` function. The bars are vertically stacked, with each row’s height fixed at 20 pixels, and the chart’s total height adjusts based on the number of data rows.
Five small squares are positioned along the x-axis, each mapped from a data value of 1 through 5. The example demonstrates a basic linear scale using d3.scaleLinear, which translates the data domain into pixel coordinates for the SVG rendering. The code loads D3 v4, appends an SVG to the body, and binds the array [1, 2, 3, 4, 5] to rect elements. It sets each rectangle’s x attribute with the scale function, with a fixed y and dimensions of 20 by 20.