Tell us what works and what could be better. We read every submission.
@YannLive·4 public vizzes
This example demonstrates a simple bar chart built with D3.js v4, where each bar’s width corresponds to a value in a static array. It shows how data can be bound to HTML elements and used to drive visual properties. The code uses `d3.select` to target the chart container, then chains `.selectAll('div')`, `.data()`, `.enter()`, and `.append('div')` to create one bar per data point. Each bar is styled via a CSS class, and its width is set directly from the data value using `.style('width', function(d) { return d + 'px'; })`. The data source is an inline array of five numbers.
This example demonstrates how D3.js scale functions map input domain values to output range values, printing results directly to the page. It uses `d3.scaleLinear()` to transform numbers between 0 and 20 into a range of 0 to 1, showing outputs for boundary and mid-point inputs. The code then applies the `.clamp(true)` method to restrict output values beyond the specified domain, so inputs like -10 and 200 return clamped results. Written in French comments, it also suggests experimenting with `invert`, `power`, `log` scales, and color ranges. The visualization is purely text-based, using `document.writeln` to display results in a `<pre>` element.
This example demonstrates number formatting in D3.js by printing a series of values computed from 0.1 increments and a fixed variable, then applying various format specifiers such as '.1f' and '.2s' to show fixed-point and SI-prefix notation. It also defines a custom French locale with comma decimal separators and period thousands separators, then reapplies the format to illustrate localized output. The code uses the d3-format module’s `d3.format` and `d3.formatDefaultLocale` APIs, rendering results directly into the page’s HTML via `document.writeln`.
This chart compares daily temperatures in New York and San Francisco over a four-month period using a bivariate area chart. Two overlaid lines show the temperature series for each city, while the area between them is filled in green when New York is warmer and red when San Francisco is warmer, using clipping to alternate colors based on the difference. The visualization is rendered in SVG with D3 v4 and is a modern update to an original block by Mike Bostock. The data is loaded from a TSV file containing date, New York, and San Francisco temperature values.