Tell us what works and what could be better. We read every submission.
@Tedables·4 public vizzes
This example presents a series of interactive charts exploring the relationship between education level and income, using data from Table_2A.csv and Table_2J.csv. One view is a bar chart of median income by education level, annotated with a red dashed line for the mean and a green linear regression line. Another is a line chart showing months worked over the last four months by education level, using a steelblue path. The code uses D3 v4’s `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to render SVG graphics.
This interactive D3.js visualization demonstrates the relationship between a person's highest level of education and their total income, using bar charts and histograms generated from CSV data. The visualization features tooltips that display data points on hover, with a red dashed line marking the mean income. Built with D3.v4, the code uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` to render responsive SVG charts, while also incorporating a scatterplot of cereal nutritional data with color-coded manufacturers.
This interactive example presents two linked bar charts comparing giving and bonus data for named items. The visualization uses D3.js to render both charts as SVG elements, each with its own linear scale and axis. Users can re-sort the linked dataset by clicking buttons that arrange the bars by giving, bonus, or rank, with all charts updating consistently. Sorting transitions are animated, and highlighting reveals label text on bars. The code demonstrates how D3's selection, transition, and scale APIs can coordinate multiple charts from a shared dataset.
This example shows a stacked bar chart comparing the estimated population of eight religious groups across five countries (China, India, USA, Indonesia, and Brazil) in 2010. The visualization uses D3.js with `d3.layout.stack` to layer the bars, `d3.svg.axis` for axes, and `d3.legend.color` for the interactive legend. Hovering over a legend entry fades the underlying bars with a semi-transparent overlay and re-renders only the selected layer in the foreground, with tooltips via `d3.tip`. The data is the Pew Research report on the global religious landscape.