Jesus Angel

@jgangel·5 public vizzes

Fork of Organization Graph Diagram

A fork of the Organization Graph Diagram visualizes the network of connections between the Kenneth Rainin Foundation’s partner organizations, with four main color-coded nodes (like Arts Web and AmbitioUS) linked to child nodes and smaller leaves. Using D3.js v6, it employs `d3.forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while SVG circles, lines, and text render the graph. Dragging is enabled via D3’s `drag` interface, and the data is predefined in a JavaScript module with colors generated from Paletton.

Jul 14, 2021

Loading thumbnail…

Fork of Heat Map: Monthly Global Land-Surface Temperature

This fork of a FreeCodeCamp project renders a heat map of monthly global land-surface temperature anomalies from 1753 to 2015, with color encoding temperature values relative to a base of 8.66°C. Each cell represents a month-year combination, and hovering reveals a tooltip with the exact temperature and variance using the d3-tip library. The visualization uses d3.v5 with SVG rendering, fetching data from a remote JSON file, and implements custom color scales, time-based axes, and a color legend within a `d3.select`-driven SVG container.

Jul 12, 2021

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country

This chart displays cumulative COVID-19 deaths over time for countries beginning with the letter "C", using a logarithmic y-axis to reveal relative growth rates. Built with React and D3 v5, it renders SVG line paths from Johns Hopkins time-series data, filtering out provincial rows and parsing dates from CSV columns. The visualization leverages `d3.scaleTime` and `d3.scaleLog` for axes, `d3.line` for generating paths, and custom React hooks to fetch and transform the data via `d3.csv`.

Jul 6, 2021

Loading thumbnail…

Fork of Interactive Color Legend

This example displays the classic Iris dataset as a scatter plot of petal length against sepal width, with points colored by species. Hovering over a species in the interactive color legend highlights only the corresponding points while fading the rest. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes, `scaleOrdinal` for colors, and reusable axis components. The legend itself is implemented as a custom `ColorLegend` component that manages hover states and applies a configurable fade opacity to non-matching data points.

Jul 6, 2021

Loading thumbnail…

Fork of Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

This visualization displays the relationship between COVID-19 vaccination rates and 7-day average case counts in the United States using a dual-axis scatter plot. Steel-blue circles represent the proportion of the US population vaccinated, while gray circles show infection counts, with animations transitioning the radius and positions of points. The chart annotates the maximum vaccination percentage and case count reduction over time. Built with D3 v6, it utilizes `scaleTime`, `scaleLinear`, axis components, and `selection.join` for data binding, drawing from Our World in Data and NYT rolling averages datasets.

Jul 5, 2021