Jepyagg

@Jepyagg·11 public vizzes

00000000000

This example presents an interactive parallel coordinates plot of the Iris dataset, with each polyline colored by flower species (setosa, versicolor, or virginica) using an ordinal color scale. Users can drag dimension axes to reorder them and brush along any axis to filter highlighted lines. The visualization uses D3 v3 with SVG paths for both background and foreground lines, d3.svg.brush for filtering, and d3.behavior.drag for axis manipulation. Data loads from a remote CSV, with axes normalized to a 0–9 scale rather than their natural extents.

Oct 18, 2020

Loading thumbnail…

0616027.html

This example presents an interactive parallel coordinates plot of the Iris dataset, with each of the three flower species colored distinctly (setosa in purple, versicolor in green, virginica in yellow). The visualization uses D3 v3 with SVG rendering, allowing users to drag axes to reorder dimensions and brush along any axis to filter the displayed lines. The code builds the chart with `d3.svg.axis`, `d3.scale.linear`, and `d3.svg.brush`, while animated transitions via `d3.transition` support smooth axis reordering during drag interactions.

Oct 18, 2020

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot of the Iris Dataset visualizes petal length against sepal width, with points colored by species. Hovering over a color legend entry highlights that species’s points while fading others, implemented through React state and mouse events. The visualization uses d3.scaleLinear and d3.scaleOrdinal for scales, renders SVG circles via React components, and loads CSV data with d3.csv.

Oct 4, 2020

Loading thumbnail…

Iris3

This interactive scatter plot displays the classic Iris dataset, letting users explore relationships between sepal and petal measurements across three species. The visualization uses drop-down menus to switch which quantitative variable is plotted on each axis, with points colored by species. Built with D3 v5, the code employs `d3.scaleLinear` for axes, `d3.scaleOrdinal` for categorical colors, and SVG circles for rendering.

Oct 4, 2020

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars in the Auto MPG dataset from the UCI Machine Learning Repository. Each red semi-transparent circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis, with gridlines and labeled axes from d3.axisLeft and d3.axisBottom. The code uses d3.csv to load the data, d3.scaleLinear for both scales, and d3.extent to set the domains, rendering the SVG in a D3 v5 framework.

Oct 4, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements by selecting different attributes for the x and y axes via dropdown menus. The visualization uses React for the component structure and D3’s scaleLinear, extent, and max functions to map data values to pixel coordinates. Each point renders as an SVG circle with a tooltip showing the x-axis value. The chart includes polished axis labels, tick formatting with d3.format, and a clean Poppins font styling.

Sep 27, 2020

Loading thumbnail…

Iris Scatter Plot

This is a D3.js scatter plot that visualizes the Iris dataset, showing petal length against petal width for 150 flowers of three species. Each species is represented by a colored circle, with colors assigned using `d3.scaleOrdinal` (Iris-setosa in dark blue, Iris-versicolor in magenta, and Iris-virginica in light blue). The visualization uses `d3.scaleLinear` for both axes and renders the SVG elements with `axisBottom` and `axisLeft` for labeled tick marks. Data is loaded from a TSV file via `d3.tsv` and parsed before rendering.

Sep 24, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It shows how to customize D3 axes, including removing the default domain lines, adjusting tick formatting to abbreviate large numbers (e.g., converting "G" to "B" for billions), and adding a custom axis label. The code uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisBottom with tickSize to draw grid lines. Data is loaded from a CSV file using d3.csv.

Sep 21, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG demonstrates fundamental D3.js DOM manipulation and transitions. The code selects the SVG element, appends groups, and builds the face from circles, rectangles, and an arc-generated mouth using `d3.arc`. Two eyebrow rectangles animate upward and back via chained `transition().duration(2000)` calls, shifting their parent group's transform attribute. The example uses D3 v5 and relies on `select` and `arc` from the d3 module.

Sep 17, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates a range of SVG shape elements—circles, rectangles, lines, and paths—styled through both inline attributes and external CSS. It shows how fill colors, stroke widths, and stroke styles can be applied directly on elements or inherited from parent `<g>` groups. The code uses plain SVG markup with CSS selectors like `.lines` and `.lines path` to set stroke properties, and employs transforms for scaling and translation. No JavaScript libraries are used; rendering relies entirely on native SVG and CSS.

Sep 17, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of cars filtered by price. The page initially displays "Loading..." and, after a simulated two-second delay, renders a list of cars priced under $2,000, formatted as "year make model: $price". The code uses JavaScript objects, arrays, promises, and ES modules, with functions like `getCars`, `formatCar`, and `generateReport` to manage data asynchronously and update the DOM.

Sep 17, 2020