songr0

@songr0·7 public vizzes

Select a Year form Chart

This visualization shows global population trends by region over time, with a movable vertical line that selects a specific year to highlight the corresponding values across all displayed series. Users can hover to change the selected year, updating the line’s position via `d3.mouse` and `scale.invert`. The chart renders multiple region lines using `d3.line` and `curveBasis`, with a color legend generated by the custom `colorLegend` module. Data comes from UN population estimates and medium-variant projections, processed with `d3.csv` and `nest`, and drawn as SVG paths.

Aug 2, 2019

Loading thumbnail…

Let's make a face with D3.js!

This interactive network graph uses D3’s force simulation to arrange a hierarchical dataset of experts and technology topics, with draggable nodes and zoom/pan support via `d3.zoom`. A button triggers a custom `switch` event that toggles the graph between a tree layout and a face-like arrangement, animating the eyebrows. Rendered as SVG elements (`circle` and `line`), the visualization demonstrates DOM manipulation with D3’s data joins and scales.

Aug 2, 2019

Loading thumbnail…

Temperature in San Francisco

This visualization shows how temperatures in San Francisco vary over time, with each orange circle representing a daily temperature reading plotted against its timestamp. The chart uses D3 v5 with an SVG renderer, employing d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for grid lines, and d3.extent to set domains. Data is loaded from a CSV file, with timestamps parsed and temperatures converted to numbers before rendering.

Jul 25, 2019

Loading thumbnail…

Bowl of fruits - click to select

A bowl of fruits visualizes a dataset of apples and lemons as colored circles within a bowl-shaped rectangle. Hovering over a fruit selects it, highlighting its outline in blue. Built with D3 v5, the example uses `selection.data`, `transition.attr`, and `scaleOrdinal` to map fruit types to colors and radii. Fruits are added, removed, and transformed via timed `setTimeout` calls, with enter, update, and exit selections animating their appearance and disappearance.

Jul 18, 2019

Loading thumbnail…

Selecting a Year on a Line Chart

This interactive line chart displays global population trends across regions from 1950 to 2100, with a vertical marker indicating the currently selected year. Users hover over the chart to update the marker and select a new year. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `nest`, and `line` with `curveBasis`, rendering in SVG. Data comes from UN population estimates and medium-variant projections, processed via CSV loading and a custom melt function.

Jul 17, 2019

Loading thumbnail…

Selecting a Year on a Line Chart

This line chart displays population trends over time for world regions, with a visual selection mechanism for a specific year (2019). The visualization uses D3 v5 to render an SVG, loading data from UN population estimates CSV files. The code employs `d3.nest()` to group data by region, `d3.scaleTime` and `d3.scaleLinear` for axes, and a custom color legend built with `d3-selection`. A `parseYear` function converts year values, while the chart updates interactively when a new year is selected.

Jul 16, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It highlights how to customize D3 axes, with styled tick labels, grid lines, and an axis label using CSS. The visualization is built with D3 v5, using the `select`, `csv`, and `scaleLinear` methods to load and scale the data from a CSV file, rendered as SVG rectangles.

Jul 13, 2019