Alex

@getaclue00·11 public vizzes

Idempotent Reusable Barchart 101 with Lines

A reusable, idempotent bar chart with an overlaid line encodes the proportion of single-detached houses in Canada from 1986 to 2021. Built with D3 v7, it uses `scaleBand` for the year categories, `scaleLinear` for percentages, and `axisLeft` with tick lines for the grid. The chart renders as SVG, with teal bars and a maroon line generated via `line()`. The reusable component pattern exposes setters for data, dimensions, margins, labels, and title, allowing the chart to be called on a new selection each time.

Apr 11, 2023

Loading thumbnail…

Fork of Re-doing Reusable Scatterplot 101 with my data with Line

This example visualizes a time series of percentage values from 1986 to 2021 as a scatterplot with a connecting line. A D3 reusable chart module creates a time-scaled x-axis and linear y-axis, using `scaleTime()` and `scaleLinear()` to position circles and a line path generated with `line()` from the d3 library. The data is manually defined as arrays of years and percentages, converted into date objects, and rendered as SVG with axes.

Apr 11, 2023

Loading thumbnail…

Idempotent Reusable Barchart 101

This example presents an animated, reusable bar chart that visualizes the proportion of single-detached houses in Canada from 1986 to 2021. Built with D3.js (v7.8.4), it uses the `scaleBand` and `scaleLinear` functions to map census years and percentages, while `axisBottom` and `axisLeft` render the axes. The chart is implemented as an idempotent function, allowing it to be re-applied cleanly to an SVG canvas when parameters change, with bars rendered as SVG rectangles.

Apr 10, 2023

Loading thumbnail…

Re-doing Reusable Scatterplot 101 with my data

This example re-implements a reusable scatterplot using D3’s `scaleLinear` and `scaleTime` for axes, with data points rendered as SVG circles via `select` and `join`. It plots hard-coded yearly percentages against dates, showing a decreasing trend from 1986 to 2021. The visualization uses a simple layout with left and bottom axes, generated through `axisLeft` and `axisBottom`, within a full-window SVG. The data is local, not from the referenced Iris CSV.

Apr 10, 2023

Loading thumbnail…

Re-doing Reusable Scatterplot 101

This example visualizes the Iris dataset as a scatterplot, encoding petal width on the x-axis and sepal length on the y-axis. It demonstrates a refactored version of a reusable chart module, building on an earlier commented-out implementation. The code uses D3 v7 APIs including `d3.csv` for data loading, `scaleLinear`, `extent`, `axisBottom`, `axisLeft`, and selection joins to render SVG circles. The final chart is assembled through a custom `scatterPlot` function configured with width, height, margin, and radius, then invoked on an SVG element.

Apr 10, 2023

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This fork of the animated scatter plot uses dropdown menus to let users choose which Iris dataset columns map to the x and y axes. The chart displays points with a grow-in animation on entry and repositions them with a staggered transition when the axis selection changes. Axes update smoothly using D3 transitions. Data is loaded from a GitHub Gist as CSV, and the visualization is built with D3 v6 using reusable chart and menu components.

Apr 10, 2023

Loading thumbnail…

Animated Idempotent Reusable Scatterplot 101 w Menu

This visualization presents an animated scatterplot of the Iris dataset, displaying petal length against sepal width. The chart uses D3.js APIs including `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and circles, with a transition on circle positions that animates over 1500 milliseconds. The code imports data from a CSV URL and employs a reusable scatterplot module with configurable margins, radius, and value accessors. While the menu system is referenced in the title, the current implementation focuses on the static initial view, rendered as SVG with a full-window responsive layout.

Apr 10, 2023

Loading thumbnail…

Animated Idempotent Reusable Scatterplot 101

This example shows an interactive scatterplot of the Iris dataset, with petal length on the x-axis and sepal width on the y-axis, using D3 v7. The visualization is built as a reusable chart function that renders SVG circles with smooth transitions, and it includes labeled axes. Although the animation loop is commented out, the code demonstrates how to update the scatterplot’s variables and re-render it with D3’s `transition()` method. The chart uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to map data values to screen coordinates.

Apr 9, 2023

Loading thumbnail…

Idempotent Reusable Scatterplot 101

This example demonstrates a reusable scatterplot component that cycles through different pairs of Iris flower measurements every second, using the D3 library's `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The scatterplot function returns a closure that can be configured via setter methods for data, dimensions, margins, and accessor functions, then called on an SVG selection to render axes and circles. Data loading uses D3's `csv` parser, and animation is driven by `setInterval`, which updates the x and y accessors and re-invokes the plot on the SVG.

Apr 9, 2023

Loading thumbnail…

Reusable Scatterplot 101

This example demonstrates a reusable scatterplot component that visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. The code implements a closure-based scatterplot factory using d3.scaleLinear for scales, d3.axisBottom and d3.axisLeft to generate axes, and d3.csv to load data from a GitHub gist. The component accepts configurable accessors for x and y values, along with width, height, margin, and radius properties, then renders circles via SVG selections. The visualization is built with d3-selection’s join pattern to bind data to circle elements.

Apr 7, 2023

Loading thumbnail…

Scatterplot 101

This example displays the classic Iris dataset as a scatterplot, mapping petal length on the x-axis against sepal width on the y-axis to reveal species clustering. The visualization is rendered as an SVG using D3 v7, with data loaded asynchronously from a CSV file via the `csv` function. The code employs `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct linear scales and axes, then draws circles with fixed radius for each data point.

Apr 7, 2023