Albert Zarate

@albertzarate·7 public vizzes

Responsive Image Slider | Autoplay With Navigation Visibility

This example presents a multi-slide narrative visualization of the World Happiness Report 2021 data, using a responsive image slider with manual navigation buttons. The first slide displays a choropleth world map colored by happiness score using a sequential spectral scale, with an annotation highlighting Northern Europe’s high scores. Subsequent slides show horizontal bar charts of the top ten happiest and least happy countries, rendered with SVG rect marks and band scales. Built with React, D3 v5 (including `scaleSequential`, `geoNaturalEarth1`, and `scaleBand`), and TopoJSON for country boundaries from World Atlas, the data is loaded via D3’s CSV fetcher from a GitHub repository.

Aug 1, 2021

Loading thumbnail…

test

This example displays the top 10 most populous countries as horizontal bars, with country names on the y-axis and a numeric score on the x-axis. Built with React and rendered as SVG, it uses D3 v5’s `scaleBand` for the categorical axis, `scaleLinear` for the value axis, and `csv()` to load data from the World Happiness 2021 dataset. The `Marks` component generates rectangles with tooltips, while custom `AxisBottom` and `AxisLeft` components handle tick labels and grid lines.

Aug 1, 2021

Loading thumbnail…

test

This example displays a horizontal bar chart of the top 100 countries by happiness score, using the World Happiness 2021 dataset. The chart includes x- and y-axis tick labels but omits axis titles and a chart title, rendering as an SVG via React. The code constructs the visualization with d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, d3.max for scaling, and d3.csv to fetch and parse the data. Each country is drawn as a `<rect>` element positioned by the scales.

Aug 1, 2021

Loading thumbnail…

test

This example displays the top 10 most populous countries from the World Happiness Report 2021 data as a horizontal bar chart without axes. The chart uses React hooks to load data with d3.csv, then renders SVG rectangles scaled by each country’s happiness score. The visualization employs d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, with a fixed 960×500 viewport and margins.

Aug 1, 2021

Loading thumbnail…

test

This example displays CSS named colors as a radial burst of pie slices, each representing one color from a CSV dataset. The visualization uses React hooks to load the data with `d3.csv` and compute the pie layout using `d3.pie`, while `d3.arc` generates the SVG path for each slice. Rendering is handled via React’s `ReactDOM.render`, producing a full-circle arrangement where every color occupies an equal arc segment. The data originates from a remote CSV listing color names and their RGB hex values, which directly set the fill of each path.

Aug 1, 2021

Loading thumbnail…

test

This example verifies CSV data loading and parsing through the D3.js library. It displays the file size in kilobytes, row count, and column count from the World Happiness 2021 dataset in a large text preformatted element. The code demonstrates two data-fetching methods—using `d3.csv` with promises and an alternative commented-out approach using `fetch` with `async` and `await`. The interface updates the message container with statistics about the successfully parsed dataset.

Aug 1, 2021

Loading thumbnail…

sdasad

A large yellow circle with a thick black outline and two solid black eyes forms a simplified smiley face, centered on a full-screen SVG. The face is missing a mouth, as noted in the README, making it an incomplete icon. Built with React and D3 v7, the visualization uses the `arc` import and basic SVG circle elements, with positions calculated from the window dimensions to ensure it scales to the viewport.

Aug 1, 2021