Petrando

@Petrando·4 public vizzes

fresh block

This example shows an interactive slider that controls the background color of the page, with a draggable circular handle positioned along a horizontal axis labeled in degrees from 0 to 180. A brushed value updates the hue of the background using `d3.hsl`. The code uses D3 v3’s `d3.svg.brush`, `d3.scale.linear`, and axis components to build the slider, while the `brush` and `brushend` events handle dragging and snap the value to the nearest ten degrees. The rendering is done through SVG elements, with a transition animating the initial brush extent.

Feb 3, 2018

Loading thumbnail…

Age range of genders

A side-by-side bar chart compares male and female population counts across age ranges, displayed as mirrored horizontal bars. Users can toggle between viewing all data combined or separated by gender, and can sort the age categories. The visualization uses D3 v3 with SVG rendering and animated transitions, leveraging ordinal and linear scales, stack layouts, and axes. Data is loaded from a CSV file and formatted with d3.format. Radio buttons and a checkbox control the display modes.

Oct 7, 2017

Loading thumbnail…

Age range of genders

This visualization presents age-range distributions for male and female populations using a diverging bar chart, with each gender extending from a central axis. Users can toggle between showing combined totals or gender-separated views and optionally sort the age ranges. The chart is built with D3 v3, rendering as SVG with animated transitions. It loads data from a CSV file, stacks the gender values using `d3.layout.stack`, and maps ordinal age ranges to y-axes, while linear x-scales handle population counts formatted with `d3.format`. Color scales differentiate genders and age ranges, with tooltips providing additional detail.

Oct 7, 2017

Loading thumbnail…

data for pyramid barchart

This example shows an age-sex population pyramid for a region, comparing male and female counts across age brackets. It uses a mirrored horizontal bar chart layout, with males extending left and females right from a central axis. The code loads data from a CSV file and renders the bars with D3.js, using standard scales and SVG elements to encode the values. The chart displays raw population numbers from the provided dataset, with age groups sorted from youngest at the bottom to oldest at the top.

Oct 7, 2017