z99876664@gmail.com

@sunnyxiu·7 public vizzes

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to choose which flower measurements to plot on the x and y axes via dropdown menus. The visualization uses D3.js version 5's scale functions for axes and a categorical color scale to distinguish the three Iris species. Upon selection, circles animate to their new positions with a 2-second transition, and the axis labels and scales update accordingly.

Sep 7, 2024

Loading thumbnail…

Scatter plot with menus

This scatter plot of the auto-mpg dataset shows relationships between vehicle attributes, with a dropdown menu controlling the x-axis variable while the y-axis displays weight. Built with D3 v5, the visualization uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes and points as SVG circles. The menu is implemented via the `dropDownMenu` module, which updates the chart on selection change. The data is loaded through `csv` from a Plotly-hosted dataset, with numeric columns parsed before rendering.

Sep 7, 2024

Loading thumbnail…

Bowl of fruit - general update pattern

A bowl of fruit visualization demonstrates a general update pattern for dynamic data changes. Initially five apples appear as circles with labels, then a series of timed updates remove fruits, change an apple to a lemon, and delete another item. Each transition animates the circle radius and text opacity over one second using `transition().duration(1000)`, while D3's `selectAll` and `.merge` handle entering, updating, and exiting elements. The code uses `scaleOrdinal` for color and size scales, with all rendering in SVG.

Sep 7, 2024

Loading thumbnail…

Area chart

This area chart displays temperature readings from San Francisco over the span of one week. The visualization maps time on the x-axis and temperature on the y-axis, using a smooth basis curve to connect data points. Built with D3 v5, the code loads CSV data from a remote repository, then applies `scaleTime` and `scaleLinear` to construct the axes. Customized axis lines, tick marks, and labels are rendered as SVG elements, with the line path styled in steel blue.

Sep 5, 2024

Loading thumbnail…

Line chart

This line chart shows the temperature in San Francisco over a week. The visualization uses D3 v5 to load CSV data from a GitHub repository and render an SVG line chart with a smooth basis curve. The code customizes D3 axes by removing the domain lines, adding tick marks that extend across the plot, and labeling the x-axis as "Timestamp" and the y-axis as "Temperature." The chart includes a title, "A week in San Francisco," and applies a steely blue stroke to the line path.

Sep 5, 2024

Loading thumbnail…

Scatter plot

This scatter plot shows the relationship between car horsepower and weight, using red semi-transparent circles. The visualization is built with D3 v5, using `scaleLinear` for both axes, `axisLeft` and `axisBottom` for gridlines, and SVG rendering. Data comes from the Plotly auto-mpg dataset, loaded via `cv`. The chart also demonstrates custom axis styling, including tick lines, rotated axis labels, and a title, all styled with CSS classes.

Sep 5, 2024

Loading thumbnail…

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

This example shows a cheerful yellow smiley face built with D3.js, whose eyebrows animate upward and back down in a looping motion. The face is rendered as SVG elements using `d3.select`, `append`, and `d3.arc` for the mouth, while `transition()` and `attr()` handle the eyebrow movement. The code constructs the face with separate groups for eyes and brows, using plain SVG shapes like `circle` and `rect`, and runs entirely client-side with d3.v7.

Sep 4, 2024