tebanieo

@tebanieo·7 public vizzes

COW - canvas

This example displays a time series of ProvisionedWriteCapacityUnits from an AWS DynamoDB cost optimization dataset, rendered as a scatterplot of circles scaled with D3 scales. It loads JSON data from an S3 bucket, parses timestamps using d3.timeParse, and maps values into SVG coordinates using d3.scaleTime and d3.scaleLinear. Users can brush along the x-axis via d3.brushX, which filters the visible time range and transitions the circles and axis to the new domain.

Feb 20, 2023

Loading thumbnail…

Daily new cases of Covid in Italy - Scatter Plot

This scatter plot displays daily new Covid cases in Italy, with time on the x-axis and provisioned write capacity units on the y-axis. It uses D3 v6 to load JSON data, parse timestamps with `d3.timeParse`, and render circles via SVG. The visualization includes an animated line path, toggleable with a button, and a brushX selection that updates the chart. The code leverages `d3.scaleTime`, `d3.scaleLinear`, and `d3.extent` for scaling and axis generation, with data sliced to the first 100 points.

Feb 17, 2023

Loading thumbnail…

Untitled

This example demonstrates a basic scatter plot where users can brush-select points to highlight them in red. It uses D3 version 7 to generate 200 random data points and render them as SVG circles. The brushing interaction is handled by `d3.brush()`, which triggers a callback that updates the fill color of selected points. The code uses `d3.select()` and the `.join()` API to efficiently manage the circle elements.

Feb 17, 2023

Loading thumbnail…

ESP D3 v7

This example shows a scatter plot of the Iris dataset, with sepal length on the x-axis and petal length on the y-axis, colored by species using a d3.scaleOrdinal with a viridis-like palette. Users can brush horizontally along the x-axis to zoom into a selected range, which updates the axis domain and repositions the circles with a transition. The visualization uses SVG rendering with d3.brushX for interactive selection, a clipPath to confine drawing, and d3.axisBottom for the dynamically re-scaled axis.

Feb 16, 2023

Loading thumbnail…

Fork of D3 Scatter Plot

This is a scatter plot of the Iris dataset, showing sepal length against petal length, with each flower species represented by a translucent circle. The visualization is built with D3 v7, using `d3.csv` to load data, `scaleLinear` and `extent` to map values, and `axisLeft`/`axisBottom` for the axes. Circles are rendered as SVG elements with a fill opacity of 0.5. The example demonstrates a modular structure with separate files for data fetching, axis rendering, and the main visualization logic.

Feb 15, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple animated sine wave created with D3 version 7, rendering fifteen circles along a horizontal axis that oscillate vertically over time. Using `d3.select`, `d3.range`, and the `join` pattern, the code updates circle positions inside a `setInterval` loop at roughly 60 frames per second. The visualization shows how D3’s data join handles dynamic updates efficiently, with each circle’s Y coordinate computed from a sine function offset by a time variable.

Feb 15, 2023

Loading thumbnail…

Sandbox

This sandbox demonstrates basic data manipulation and sorting using JavaScript and D3. It defines a custom range function to generate an array of numbers, then maps those numbers into objects with number and doubled values. The example also sorts an array of key-value entries alphabetically by their keys using the D3 `ascending` comparator. All results are logged to the console, with the page itself rendering only a large static message via CSS.

Feb 15, 2023