Charisma9

@Charisma9·4 public vizzes

fresh block

This visualization shows the changing age distribution of the U.S. population over time, using a sliding time window controlled by arrow keys. The chart displays population counts for each birth year as horizontal bars, with the current year prominently labeled. Built with D3.js version 3, it loads data from a CSV file and uses scales, axes, and nested data structures. Rectangular bars and text labels are rendered as SVG elements, with smooth transitions animating the bars as the displayed year updates.

Aug 2, 2016

Loading thumbnail…

Heat map chart

This heat map visualizes hourly activity across the days of a week, using color intensity to represent quantitative values. Built with d3.v3, it renders SVG rectangles arranged in a grid, with day and time labels on the axes. The code defines a reusable `heatmapChart` function that loads TSV data via `d3.tsv`, applies a quantile color scale (`d3.scale.quantile`), and animates transitions between datasets with `transition().duration(1000)`. A legend displays the color buckets, and a dataset picker allows switching between two TSV files.

Aug 1, 2016

Loading thumbnail…

pie chart block

This example displays a pie chart of mean maximum temperatures for three different zip codes, using weather data from CSV files. The D3 v3 pie layout calculates the arc segments, while d3.svg.arc generates the SVG path shapes for each slice. The code nests and aggregates the data with d3.nest and d3.mean, then assigns distinct colors based on the zip code key. The chart is rendered as SVG with a single series, and each slice’s size reflects the temperature average for that region.

Aug 1, 2016

Loading thumbnail…

House / d3

A static SVG scene depicts a stylized house with a red roof, a yellow sun, a green lawn, and a white door, all composed of basic geometric shapes. The code uses d3.v4 to render the graphic, explicitly drawing each element with `<rect>`, `<circle>`, and `<path>` tags. Two rotated rectangles form the door, while a transparent path outlines the ground. The visualization relies on hard-coded coordinates and SVG styling, with no data or interaction.

Aug 1, 2016