peesarie

@peesarie·10 public vizzes

7

This animated scatter plot cycles through four attribute pairings of the Iris Dataset, switching the x-axis variable every two seconds while keeping sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a reusable `scatterPlot` function inspired by Towards Reusable Charts. SVG circles and axes update via `selection.join`, with a `setInterval` driving the data-value changes. The visualization is rendered as full-window SVG with a custom Share Tech font and no interactive tooltips.

Jul 1, 2022

Loading thumbnail…

7

This animated scatter plot cycles through different axis pairings of the classic Iris Dataset, updating every two seconds. The visualization is built as a reusable chart with D3’s `scaleLinear`, `axisLeft`, and `axisBottom`, using `selectAll` and `.join` to bind data to SVG circles. A `setInterval` swaps which four flower measurements—petal width, sepal width, petal length, and sepal length—map to the x-axis, while the y-axis remains fixed on sepal length. The SVG rendering fills the browser window with styled text from the Share Tech font.

Jul 1, 2022

Loading thumbnail…

Fork of D3 Starter

This example displays a scatter plot comparing age and weight for six data points, with labeled axes and a title. It uses the Google Charts loader and its `google.visualization.ScatterChart` API to render the chart inside a `chart_div` element, while also loading D3 v7 via a script tag. The code defines the dataset inline with `google.visualization.arrayToDataTable` and sets axis ranges and legend options before drawing. Although the page includes D3, the visible functionality relies entirely on Google Charts, not D3 methods.

Jul 1, 2022

Loading thumbnail…

ICE7

An animated scatter plot cycles through four Iris dataset variable pairs every two seconds, revealing different correlations between measurements. Each circle represents a flower sample, with axes rescaling to the current variable selection. The reusable chart module updates its x-value accessor while preserving the same SVG rendering. D3's `scaleLinear`, `axisLeft`, `axisBottom`, and data joins create the idempotent visualization, with `setInterval` driving the sequential column switching.

Jul 1, 2022

Loading thumbnail…

Ice6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while encoding sepal dimensions through each circle’s horizontal and vertical radius. Points are colored by species (blue, purple, or cyan) using D3’s `scaleLinear`, `axisLeft`, and `axisBottom`. The SVG is rendered full-screen, with data loaded asynchronously via `d3.csv`.

Jun 27, 2022

Loading thumbnail…

Fork of Ice-6

A horizontal bar chart displays the number of not-outs for cricket batsmen in test matches, with player names on the y-axis and counts on the x-axis. The visualization uses d3.csv to load the dataset from a GitHub gist, then d3.scaleLinear and d3.scaleBand map the data to screen coordinates. The chart is rendered as SVG with d3.axisBottom and d3.axisLeft for axes, and the x-axis tick labels are formatted using d3.format. A title and axis label accompany the bars.

Jun 27, 2022

Loading thumbnail…

Ice-6

This example displays a horizontal bar chart of cricket batsmen’s number of not-outs in test matches, with player names on the y-axis and the count on the x-axis. The visualization uses D3 v5 with an SVG renderer, employing `d3.scaleLinear` and `d3.scaleBand` for scales and `d3.axisBottom` and `d3.axisLeft` for axes. Data is loaded from a CSV file via `d3.csv`, and each number of not-outs is parsed as a numeric value before rendering the bars.

Jun 26, 2022

Loading thumbnail…

ICE5

This visualization displays summary statistics of the CSS Named Colors dataset, showing the file size in kilobytes, row count, and column count. The code loads the CSV data from a GitHub gist using either D3's `d3.csv` method or the browser's native `fetch` with async/await and `d3.csvParse`. The results are rendered as large text inside an HTML `<pre>` element, updated dynamically through the DOM. It demonstrates both D3 v5's data loading functions and alternative JavaScript approaches for fetching and parsing CSV data.

Jun 21, 2022

Loading thumbnail…

ICE5

This example displays a static HTML page that centers the message "Hello HTML!" in large text. It demonstrates a minimal setup using plain CSS for styling and JavaScript as the programming language, with no external libraries or frameworks. The rendering approach relies on the browser’s built-in HTML parsing and CSS layout, and the data source is the hardcoded text within the `div` element. The example serves as a basic template for embedding custom interactive content.

Jun 21, 2022

Loading thumbnail…

Fork of Let's make a face with D3.js

A stylized face rendered in SVG using D3.js v5, composed of layered circles and rectangles with animated eyebrows. The code builds the face by appending groups and shapes to a centralized `<svg>` element, positioning elements via translation transforms. D3 transitions animate the eyebrow group by shifting its transform over two seconds, creating a bobbing motion. React integrates the D3 selection and arc API for the mouth path, all within a minimal HTML page.

Jun 17, 2022