C

cindy203cc

@cindy203cc·16 public vizzes

Loading thumbnail…

Iris Parallel Coordinate Plots

This interactive visualization displays the classic Iris dataset through parallel coordinate plots, with each flower’s sepal and petal measurements drawn as a polyline across four vertical axes. The paths are colored by species, and hovering over a line highlights all specimens of that species while dimming the rest. Users can drag any axis horizontally to reorder the dimensions, which dynamically repositions the axes and rescales the connecting lines. Built with D3 v5, it uses scales, axes, and line generators, along with drag behavior and transitions to animate the reordering and highlighting effects.

Loading thumbnail…

Spotify Tracks Dataset

This interactive histogram explores the distribution of numerical audio features and metadata from a Spotify tracks dataset. Users select an attribute (e.g., popularity, danceability, tempo) for the x-axis, choose between raw counts or percentages for the y-axis, and adjust the number of histogram bins via dropdown menus built with a local `dropdownMenu.js` module. The visualization is rendered as an SVG using D3 v5 APIs including `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`, with bars that highlight on mouseover. Data is loaded from a CSV file and processed with D3's `csv` function.

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the ten most populous countries, using horizontal bars sorted by population. The visualization employs d3.csv to load the data, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the numeric x-axis. Customized axes are drawn with d3.axisBottom and d3.axisLeft, including formatted tick labels that convert large numbers to abbreviated units like "B" for billions. The chart is rendered as SVG, with grid lines created via tickSize and a custom "Population" axis label added to the bottom.

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, letting users compare any two of its four measurements (sepal length, sepal width, petal length, petal width) via dropdown menus. Points are colored and grouped by the three Iris species, with a legend identifying each. The chart renders as an SVG using D3 v5, with axis labels and tick marks styled for readability. On initial load and whenever a new column is selected, the circles animate from the center to their positions using a two-second `transition` with staggered delays. The code leverages `d3.csv` for data loading, `scaleLinear` for positioning, and `axisBottom`/`axisLeft` for the axes.

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset, showing how sepal length, sepal width, petal length, and petal width vary across three Iris species. Each flower is drawn as a colored line (red, blue, or green) using d3.line with SVG paths, with a legend mapping species to colors. Users can drag any axis via d3.drag, reordering the dimensions and smoothly animating the paths and axis positions with transition. The plot uses d3.scalePoint for categorical axes, d3.scaleLinear for the numeric range, and d3.axisLeft for tick marks.

Loading thumbnail…

Fork of Iris Parallel Coordinates

This interactive parallel coordinates plot visualizes Fisher’s Iris dataset, with each line representing a flower specimen across four measurement dimensions. Line colors encode the three species (setosa, versicolor, virginica) via an ordinal color scale. Users can drag axis labels to reorder dimensions, and the chart includes a legend. The implementation uses D3 v3 for SVG rendering, ordinal and linear scales, axis components, and drag behavior, with the slider-like interaction built through `d3.behavior.drag`.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates interactive draggable circles on an SVG canvas using D3.js v5. Seven data points are rendered as translucent green circles with purple strokes, and users can drag them around the 500x500 pixel space. The code imports D3 modules via ES6 syntax, uses `d3.drag()` for interaction, and `d3.pointer()` to track mouse coordinates. It also showcases local module imports and DOM selection through `select()`.

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top ten most populous countries, with each circle positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization is rendered as SVG using D3 v5, with axis labels, tick marks, and a title. The code loads population data from a CSV file, multiplies each value by one thousand, and uses `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the chart.

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, displaying four morphometric traits for three iris species. The SVG rendering uses semi-transparent, colored polylines to represent individual flowers, with the user able to reposition axes by dragging them. The code relies on D3's `d3.scalePoint`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.line` to construct the plot, while a `select` element toggles between `union` and `self` Y-axis scaling. A drag interaction updates the axis positions and animates the transition using D3's `.transition()` method.

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG Data Set. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render the coordinate system. Each data point appears as a semi-transparent red circle positioned via SVG circle elements, with axis labels and a title added through SVG text elements.

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of population figures for the ten most populous countries, with each bar’s length proportional to its population value. The visualization loads data from a CSV file, converts the population strings to numbers, and renders the bars as SVG rectangles using D3 v5. It employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` to generate the axes.

Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple cartoon face from SVG shapes using D3.js v5, including circles for the eyes, rectangles for eyebrows, and a path generated with d3.arc for the mouth. The face is centered on a yellow circle, and the eyebrows animate vertically using chained transition.attr calls with a two-second duration each. The code selects the SVG element directly and applies transforms to group elements, demonstrating basic shape creation, layout, and animation in a declarative D3 workflow.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and paths—inside an HTML page. It shows how to style these shapes with inline attributes and external CSS, including the use of classes like `.lines` to group styling rules. The code uses no libraries or APIs; it relies solely on raw SVG markup and CSS. The rendering approach is directly visible in the `index.html` file, which contains a single `<svg>` element with a `transform` attribute to scale the content.

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML-based report listing three cars with their model years and prices, using a red highlighted entry to draw attention to the first item. It demonstrates VizHub’s ability to load local CSS and structure content through standard HTML elements like headings, lists, and list items. The visualization relies on plain HTML and CSS, with the `styles.css` file setting the font size, monospace typeface, and the `.highlighted` class for the red emphasis. No JavaScript libraries or data-loading APIs are used; the car data is hardcoded directly within the `index.html` file.

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of cars, filtering a hardcoded list to display models priced under $2,000. It shows a loading state before using `getCars`, a simulated asynchronous promise with a delay, to fetch the data. The app then uses `generateReport` to filter and format each car with `formatCar`, outputting lines like "2009 Ford F150: $1950" to a `pre` element. The code highlights importing local ES6 modules and using JavaScript promises without external libraries.

Loading thumbnail…

Cars Report

This example presents a bare-bones HTML page titled “Cars Report,” which currently displays a large, centered message reading “Hello HTML!” using a custom CSS class. The page is built with standard HTML and CSS, and includes a JavaScript reference for future interactivity, though no data or visualization logic is yet implemented. The code uses plain DOM elements and inline styles, with no external libraries or frameworks active in the current version. It serves as a minimal starter template, aligning with the React Starter example referenced in the README.