Small multiple histograms

Simple histogram using v7

A monthly histogram of earthquake magnitudes from a CSV file displays the distribution of seismic events over time, with bars showing the number of occurrences per month. The visualization uses d3.bin and d3.scaleTime to group the parsed date values into monthly thresholds, while d3.scaleLinear maps the counts to bar heights. Rendered as SVG rectangles with axes generated by d3.axisBottom and d3.axisLeft, the chart handles data loading via d3.csv and time parsing with d3.timeParse.

72% match

Simple histogram using v4

This histogram visualizes the frequency of earthquake magnitudes recorded in a CSV file, binning dates into monthly intervals. The chart uses D3 v4’s `d3.histogram()` and `d3.scaleTime()` to group data, with bars styled in steel blue via SVG. Axes are generated using `d3.axisBottom()` and `d3.axisLeft()`. The example demonstrates D3’s data-binding methods like `selectAll().data().enter().append()`, and the dataset is parsed with `d3.timeParse()`.

71% match

Simple histogram using v6

This histogram displays the distribution of earthquake magnitudes over two years, with the frequency of recorded values binned by month. The chart uses a time-scaled x-axis and a linear y-axis representing bin counts. Built with D3 v6, the code loads earthquake data from a CSV, parses dates with `d3.timeParse`, and applies `d3.bin` with monthly thresholds to group the values. Bars are rendered as SVG rectangles, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The data is sourced from a local `earthquakes.csv` file.

Simple histogram using v5

This histogram displays the frequency of earthquake magnitudes recorded in the `earthquakes.csv` dataset, binned by month. Using d3.v5, it parses dates with `d3.timeParse`, applies the `d3.histogram` API with monthly thresholds set via `x.ticks(d3.timeMonth)`, and renders the bins as SVG rectangles. The x-axis uses `d3.scaleTime`, while the y-axis is scaled with `d3.scaleLinear`. Axes are added with `d3.axisBottom` and `d3.axisLeft`.

Small multiple bar charts with tooltips

Small multiple bar charts show two text-analysis measures, Analytic and Continental, across four categories: self mentions, words per sentence, STTR, and directives. Each chart uses horizontal bars to display percentages, with a color scale from red to blue mapping value magnitude. The visualization, built with D3 v3, loads data from a TSV file and nests it by country. Hovering over a bar triggers a tooltip via the `d3.tip` library, revealing the exact country, year, and percentage value.

MMNoichl

Eethanrampersaud@gmail.com

Histogram Using D3

This example shows a histogram of numeric price data loaded from a CSV file, rendered as an SVG bar chart using D3 v4. It uses `d3.histogram()` to bin the values into 70 thresholds, `d3.scaleLinear()` for both the x- and y-axes, and `d3.axisBottom()` and `d3.axisLeft()` to draw the axes. Each bin is drawn as a rectangle whose width and height are derived from the bin’s x0/x1 domain and the count of records in that bin. The data comes from a remote GitHub-hosted CSV, and bars are styled with a fixed fill color.

Small multiples

This example demonstrates small multiples by rendering five separate line charts, one for each month, showing sales trends across the years 2011 to 2015. Each chart displays an area, line, and point series created with d3fc series components, alongside an average annotation line. The charts are generated using the d3fc chartSvgCartesian component, which is applied to each group of data via a data-join. The y-axis is hidden on all but the first chart using CSS, and the chart height adapts to screen width through a media query.

KKuerzibe