JONATHAN SIMON

@dejetem·7 public vizzes

Fork of D3 Git History Streamgraph

This streamgraph visualizes weekly commit counts for repositories in the D3 ecosystem, with each layer representing a separate D3 package. Layer order reflects when each repository first appeared, showing the original monolithic D3 development from 2010 to 2014, followed by the 4.0 package explosion and later ongoing maintenance. The visualization applies smoothing via `array-blur` and arranges layers using `stackOffsetWiggle` and `stackOrderAppearance`. Labels are placed using `d3-area-label`. Interactive links connect each layer to the corresponding GitHub repository.

Nov 15, 2021

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three iris species. Users can hover over the color legend to highlight data points of a specific species while dimming others, implemented through React state management. The visualization uses D3 scale functions including `scaleLinear` for axes and `scaleOrdinal` for categorical colors, with SVG rendering for marks and axes. Data is loaded via `d3.csv` from a GitHub gist, and hover interactions are handled through mouse events in the `ColorLegend` component.

Nov 15, 2021

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width and encoding species by color. Users can hover over a species in the color legend to highlight corresponding data points while dimming others to 20% opacity. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and SVG circles for marks. The legend leverages mouse events to trigger state changes that filter the rendered data, creating a focused comparison between species groups.

Nov 15, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This chart displays the top 10 most populous countries in 2020 as horizontal bars, sorted by population with a labeled x-axis and country names on the y-axis. It uses React with D3’s `scaleBand`, `scaleLinear`, `max`, and `format` to position and style SVG rectangles, with hover tooltips via SVG `<title>`. Data comes from the United Nations World Population Prospects 2019 CSV, loaded using `d3.csv`. The design features a teal color scheme and Poppins font, with axis ticks and labels styled through CSS.

Nov 15, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 and React. It fetches a dataset of CSS Named Colors from a GitHub gist and displays the file size, row count, and column count in a large text block. The primary implementation uses `d3.csv` with a promise, while commented alternatives show equivalent approaches using `fetch` with `async`/`await` and `d3.csvParse`, highlighting different asynchronous patterns. The interface presents the parsed data summary without any visual chart.

Nov 14, 2021

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the classic Iris dataset, plotting petal length against sepal width in a minimalist scatter plot. React renders the SVG, with d3.scaleLinear mapping the measurement ranges and generating axis ticks. Axes are styled per the Poppins font, while the circle marks use the default SVG tooltip via the `<title>` element. The data is loaded asynchronously from a GitHub-hosted CSV using d3.csv, and the graph emphasizes clean typography and muted colors.

Nov 14, 2021

Loading thumbnail…

Fork of Stylized Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. The visualization uses React components to render SVG circles and axes, with D3 v5 providing the scaleLinear, extent, max, and format functions for data scaling and tick formatting. Styling is applied via CSS class selectors, and a native SVG title element displays tooltips on hover. The data is loaded asynchronously from a CSV file using D3’s csv function.

Nov 14, 2021