ginnyching

@ginnyching·14 public vizzes

Fork of Iris Scatter Plot-0616053

An interactive scatter plot of the Iris flower dataset, colored by species, allows users to explore relationships between four flower measurements. The visualization uses D3 v5 to render an SVG chart with selectable X and Y axes, dynamically updating the plot when the user changes the dropdown menus for sepal and petal dimensions. The data is loaded from a local CSV file using `d3.csv`, and the chart is drawn with `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear`, applying species-specific colors and translucent points.

Apr 24, 2023

Loading thumbnail…

Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, showing how sepal length, sepal width, petal length, and petal width vary across the three Iris species. Each semi-transparent polyline represents a single flower, with its color encoding species membership, making it easy to compare distributions and correlations between the four numeric dimensions. The visualization uses d3.scaleLinear for each axis and d3.line to construct the paths. Users can drag the axis labels left or right to reorder the dimensions, a feature implemented with d3.drag, which triggers smooth animated transitions via the `.transition()` method. The SVG is rendered with a clean, white background and a legend.

Dec 30, 2022

Loading thumbnail…

Spotify

This interactive scatterplot visualizes a dataset of Spotify tracks, plotting pairs of audio features such as acousticness, energy, and valence on x- and y-axes. Users select features from two dropdown menus, and the visualization updates the axes and data points accordingly. Rendered as an SVG using D3.js version 5, the chart uses `d3.scaleLinear` for both axes and draws semi-transparent circles to indicate track distributions. The code reads from a local CSV file and updates the chart dynamically via a polling function that checks selector changes.

Nov 22, 2022

Loading thumbnail…

Spotify_Tracks

This visualization explores the relationship between a selected audio feature and song popularity using Spotify track data. Users can switch among features like danceability, energy, and valence via a dropdown, and adjust the number of bins with a slider. The chart combines a bar chart of average popularity with a lower panel showing track counts, colored by loudness and duration using d3 scales. The React app uses d3.rollups, d3.pairs, and scaleBand/scaleLinear to aggregate and render the SVG with animated transitions.

Nov 22, 2022

Loading thumbnail…

making a bar chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v7 with an SVG rendering approach, employing `scaleLinear` for the x-axis population values and `scaleBand` for the y-axis country categories. The code customizes the axes with `axisLeft` and `axisBottom`, and applies styling for tick labels and grid lines. Data is loaded from a CSV file and converted from thousands to full numbers before rendering.

Nov 22, 2022

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset, with each of the 150 flowers represented as a polyline connecting four axes for sepal length, sepal width, petal length, and petal width. Lines are colored by species (setosa, versicolor, virginica) and shown at partial opacity to reveal density patterns. Built with D3 v5 and React, the visualization uses `scalePoint` and `scaleLinear` for axis positioning and y-scaling, while `drag` and `transition` enable users to reorder the axes interactively, with updates handled through the `dragged` and `dragended` callbacks.

Oct 20, 2022

Loading thumbnail…

scatter plot Forked

This scatter plot displays the population of the top 10 most populous countries, with each circle positioned by country on the y-axis and population on the x-axis. The code uses D3 v5’s `scaleLinear` and `scalePoint` for axes, `axisBottom` and `axisLeft` for tick marks, and `format` to abbreviate large numbers like “B” for billions. It loads data from a local CSV file converted from the 2018 UN World Population Prospects estimate. SVG circles are rendered with a steelblue fill, and custom styling is applied via CSS for tick text, labels, and the title.

Oct 20, 2022

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal length and width as colored circles representing Iris setosa, versicolor, and virginica species. Users can dynamically change the x- and y-axis features via dropdown menus, causing the visualization to re-render. Built with D3 v7, the chart uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and SVG circles with opacity to plot data points. The color legend matches each species, and axes are labeled based on the selected feature.

Oct 19, 2022

Loading thumbnail…

car scatter plot

This scatter plot visualizes the relationship between engine cylinders and horsepower for a dataset of automobiles. The D3 v5 code loads CSV data from an external URL, scales the values linearly, and renders each car as a semi-transparent steelblue circle. Customized axes include tick formatting and labels for both the x-axis (cylinders) and y-axis (horsepower), with a title displayed at the top. The SVG rendering approach draws the circles within a margin-adjusted group, using D3’s scaleLinear, axisBottom, and axisLeft APIs.

Oct 1, 2022

Loading thumbnail…

scatter plot

This scatter plot displays the population of the ten most populous countries from the 2018 United Nations World Population Prospects estimate. Each circle’s horizontal position encodes population on a linear scale, while the vertical position uses a point scale for country names. The code uses D3 v7 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, with SVG rendering via data joins. The population values are converted from the CSV’s raw numbers into actual estimates by multiplying by 1,000. Custom tick formatting replaces “G” with “B” to show billions.

Oct 1, 2022

Loading thumbnail…

making a bar chart

This example renders a blank SVG bar chart canvas sized 960 by 500 pixels. It demonstrates how to load D3 v7 from UNPKG, import the `select` function from the `d3` module, and parse SVG dimensions using both `parseFloat` and the unary `+` operator. The code selects the existing SVG element and converts its height and width attributes from strings to numbers for later use. The example shows the foundational setup for building a chart, with no actual bars or data plotted yet.

Oct 1, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file of the Iris dataset. It fetches the remote CSV text using the `fetch` API and then parses it with `d3.csvParse`, logging the resulting tabular data structure to the console. The implementation highlights both the async/await pattern and a commented-out alternative using `d3.csv`. The page itself displays no visual chart, only raw console output, serving as a minimal demonstration of D3’s CSV handling capabilities.

Oct 1, 2022

Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face composed of D3.js shapes animates as its right eyebrow jumps upward every two seconds. The SVG drawing uses `d3.select` to build circles for the face, eyes, and a donut-shaped mouth from `d3.arc`. The right eyebrow animates via chained `transition().duration(1000)` calls that translate the path vertically, while the left eyebrow remains static. The example loads D3 v7 from the UNPKG CDN and shows basic SVG manipulation and arc geometry rendering.

Oct 1, 2022

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and external CSS classes. The code shows how fill colors can be set via hex, RGB, or named values, and how CSS rules like `.lines` apply stroke properties. It uses plain SVG markup without D3 dependencies, though the README notes the project can load D3 via UNPKG and supports ES6 module imports. The rendering approach uses a transformed `<g>` element to scale and position all shapes.

Oct 1, 2022