Renato Hermoza Aragonés

Fork of Interactive Stacked Bar Chart

Fork of Parallel Coordinates with Brushing

Fork of Observable Plot Starter

This example uses Observable Plot to visualize changes in income inequality and population across 59 US metro areas from 1980 to 2015. It renders a scatter plot with logarithmic x-axis, where each city is an arrow mark showing the shift from its historical to current values. A color legend encodes the change in inequality, and labels highlight select metropolitan areas. The chart is built with `Plot.plot`, `Plot.arrow`, and `Plot.text`, reading data from a CSV file, with margins explicitly set for the `figure` element and dimensions computed from the container for responsive refreshing.

Fork of Stylized Line Chart

A stylized line chart visualizes temperature trends over time for a week in San Francisco, using data from the Data Canvas Sense Your City dataset. The chart plots timestamp on the x-axis and temperature on the y-axis, with a smooth curved path rendered in SVG. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `curveNatural` from d3, with custom React components for the axes and marks. The visualization omits individual data points, focusing on the overall temperature curve.

Fork of Animated Reusable D3 Scatter Plot

This example presents the Iris dataset as an animated scatter plot that cycles through different feature combinations on the x-axis every two seconds. Built with D3 v6, it uses `scatterPlot` to define a reusable chart component, `scaleLinear` for axes, and `transition` for smooth animations. Circles grow on entry and reposition with staggered delays when data mappings change. The SVG output is styled with the Share Tech font, rendering axes via `axisLeft` and `axisBottom`.

Missing Migrants on a Map

This interactive SVG world map visualizes the Missing Migrants Dataset, where each circle represents a migration incident and its area encodes the total number of dead and missing persons. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and `geoPath` from D3, with country boundaries and graticules drawn from World Atlas TopoJSON data. Point radii are determined by a square-root scale (`scaleSqrt`) mapping the maximum casualty count to 15 pixels. The implementation leverages `d3.csv` for data loading, `topojson.feature` and `mesh` for topology processing, and React with D3 for component rendering.

World Population by 2015

This visualization displays the growth of world population over time, using an area chart that fills the space beneath the curve with a maroon color. The x-axis uses a time scale for years and the y-axis uses a linear scale for population counts, with axis labels and tick marks formatted for readability. The chart is rendered as an SVG using D3 v5, with the `area()` generator and `curveBasis` smoothing the population trend. Data is loaded from a CSV file, and scales, axes, and labels are created using D3’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`.

Hello VizHub

This example demonstrates how to use VizHub to render a simple text-based visualization. It displays the message "Hello VizHub!" prominently on a dark blue background with large, centered Ubuntu typography. The code uses D3.js version 5’s `select` method to target the `#message` div and set its text content, while importing a local ES6 module for the message string. Styling is handled via CSS, pulling the Ubuntu font from Google Fonts.