faRriaN

@faRriaN·5 public vizzes

Making a bar chart

Despite its title, this example does not render a bar chart. Instead, it demonstrates basic D3.js DOM manipulation by drawing a yellow smiley face with SVG shapes, including circles for the head and eyes, rectangles for eyebrows, and a path for the mouth. The code uses `d3.select` and `d3.arc` to build the shapes, then applies chained `transition().duration(2000)` calls on the eyebrows group to animate it moving down and back up over four seconds. The animation relies on D3's transition system to interpolate the `transform` attribute.

Apr 29, 2020

Loading thumbnail…

D3 v5 Zoomable Sunburst

This example shows a zoomable sunburst visualization of the Flare software package’s class hierarchy, with arc size encoding class value and color assigned by top-level category. Clicking an arc zooms into that subtree, animating the radial layout transitions. The code uses D3 v5’s `d3.partition`, `d3.hierarchy`, `d3.scaleOrdinal`, `d3.interpolateRainbow`, and `d3.arc`, with transitions driven by `transition.attrTween` and `tween` on path data. Data loads via the Observable stdlib `require` for `@observablehq/flare`. Rendering uses SVG paths and text labels.

Apr 25, 2020

Loading thumbnail…

Let's make a face with D3.js!

Despite its title, this example displays a grouped bar chart of U.S. state population data across age brackets, rendered as SVG. The chart uses `d3.scaleBand` for both state and age groups, with a `d3.scaleLinear` for the y-axis and `d3.scaleOrdinal` for color encoding. Animated eyebrow movement is not present; the code instead constructs the chart with D3's DOM-manipulation methods, including `selectAll`, `join`, and `.attr` calls to build the rectangles, axes, and legend.

Apr 22, 2020

Loading thumbnail…

Grouped Bar Chart

This grouped bar chart displays population data across multiple categories, with each group of bars representing a different region or time period. The visualization uses D3.js v5 to render the chart as SVG elements, employing `d3.scaleBand` for positioning the grouped bars and `d3.scaleLinear` for the y-axis. A legend identifies each bar’s category, while axes are formatted using `d3.axisBottom` and `d3.axisLeft`. The chart also demonstrates dynamic data handling through `d3.csvParse` with auto-typing.

Apr 22, 2020

Loading thumbnail…

Pie chart

This interactive pie chart visualizes age-group distributions for six U.S. states, toggling between "apples" and "oranges" datasets via radio buttons. Built with D3.js v5, it uses `d3.pie` to compute arc angles, `d3.arc` for rendering donut segments, and `transition.attrTween` with an arc interpolation function to animate updates smoothly. A legend of colored dots and labels appears alongside the chart, with each state’s age categories mapped to a categorical color scale. The data loads from a local JSON file, and the SVG renders with styled strokes and transitions.

Apr 22, 2020