sourcebox-bug

Scatter Plot With Menus - cis_602

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. It renders circles on an SVG canvas using D3 v5, with axes, labels, and a title. The code uses D3’s `csv` loader, `scaleLinear`, `axisBottom`, and `axisLeft`, along with a custom `menu` function to provide simple A/B/C selector options. Data preprocessing converts numeric fields from strings to numbers before scaling and plotting.

Scatter Plot with Menus

This interactive scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. Users control which columns map to the X and Y axes through dropdown menus, with animated transitions moving circles to their new positions over two seconds. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().delay()` to render the SVG, while `dropdownMenu` handles the interactive selections.

Scatter Plot with Menus

This interactive scatter plot lets users explore car data from the UCI Machine Learning Repository's Auto MPG dataset. Two dropdown menus allow selection of which data columns map to the X and Y axes. Built with D3 v5, the visualization uses dropdownMenu to handle menu interactions and scatterPlot with scaleLinear, axisBottom, axisLeft, and transition delays to animate circles into position. The SVG rendering includes gridlines and axis labels.

Scatter Plot with Menus

This interactive scatter plot explores car data from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which columns to plot on the X and Y axes via dropdown menus that update the chart dynamically. The visualization uses D3 v5 with SVG rendering, including `d3.csv` for data loading, `d3.scaleLinear` and `d3.extent` for scales, and `d3.axisBottom`/`d3.axisLeft` for axes. Each point’s position animates over two seconds via `transition().duration(2000)`, with a delay per circle, creating a smooth reapportionment when variables change.

Bar Chart

A bar chart displays population counts for ten countries, with horizontal bars labeled by country name and sized proportionally to population. The example demonstrates basic D3.js v5 DOM manipulation by loading data from a CSV file, converting string values to numbers, and using `scaleLinear` and `scaleBand` to map data to pixel dimensions. The SVG rendering appends rectangles directly to the chart based on the loaded dataset.

Apr 15, 2019

Let's make a face with D3.js!

A smiling face built entirely with D3.js SVG elements animates its eyebrows upward and downward in a repeating loop. The example demonstrates fundamental DOM manipulation through D3 selections, appending circles for the face and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. Using `d3.select`, `transition().duration()`, and the `arc()` generator, it shows how to bind data from a CSV file and apply chained transitions to transform SVG attributes. The face is centered via a group transform, with the population dataset loaded from `data.csv` though not visually mapped to the graphic.

Apr 15, 2019

Making a Bar Chart

This bar chart visualizes the 2018 population estimates for the ten most populous countries, with data from the United Nations World Population Prospects 2017. It displays horizontal bars ordered by population, using a linear scale for the x-axis and a band scale for country names on the y-axis. The visualization is built with D3 v5, using `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG elements. Population values are converted from thousands to raw numbers before plotting.

Apr 12, 2019

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through CSS. It uses raw SVG markup within an HTML page, applying inline attributes for fill, stroke, and transforms, while a linked stylesheet (`styles.css`) defines classes for line width, color, and path join styles. The scene groups elements to show how attributes and CSS rules combine, with a global scale transform enlarging the entire composition.

Apr 11, 2019

Let's make a face with D3.js!

This example shows how to build a smiley face with animated eyebrows using D3.js and SVG. It uses D3’s `select` and `arc` APIs to create circles for the eyes and face, and a path for the mouth, while the eyebrows are not yet implemented in the sampled code. The face is drawn on an SVG canvas sized 960 by 500 pixels, with yellow fill and black stroke. The code demonstrates fundamental DOM manipulation and attribute setting with D3 v5.

Let's make a face with D3.js!

A D3.js animation draws a yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth. The code builds the face using SVG primitives like `circle`, `rect`, and `path`, selected and appended via `d3.select`. An animated eyebrow movement uses chained `transition().attr()` calls over two two-second intervals, shifting the eyebrow group vertically. The `d3.arc` generator defines the mouth’s curved path, and the layout centers the face within a 960×500 SVG using an offset group and width/height attributes.

Let's make a face with D3.js!

This example shows a yellow smiley face with eyes, eyebrows, and a mouth built from SVG shapes using D3.js. The face is centered in an SVG canvas, with a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. D3’s `selection.append`, `attr`, and `transition` APIs animate the eyebrows by shifting their group’s transform down and back over two two-second intervals. The code imports `select` and `arc` from the d3 module and uses chained transitions to create the movement.

Let's make a face with D3.js!

This example draws a smiling face using SVG shapes built with D3.js selections and the `d3.arc` path generator for the mouth. A yellow circle forms the head, with two dark eyes and rectangular eyebrows positioned via coordinate offsets. The eyebrows animate upward and back down over four seconds using chained `transition` calls with `attr` updates on the group’s transform. All elements are centered by translating a parent `<g>` based on the SVG’s dimensions, demonstrating fundamental DOM manipulation and data-driven styling without external data or force simulation.

Let's make a face with D3.js!

This example builds a yellow smiley face with eyes, eyebrows, and a mouth using SVG elements created through D3.js version 5. The face is centered in a 960×500 viewport, with the mouth drawn via the `d3.arc` shape generator. A two-second `transition` animates the eyebrows upward and then back to their original position, demonstrating sequential attribute changes on a group element. The code uses basic selections like `select` and `append` to construct the face from circles, rectangles, and a path.

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG, including lines and paths, styled through an external CSS file. The visualization is built using D3 version 5 to select and manipulate the SVG container, while the rendering relies on native SVG elements and CSS properties for stroke color, width, line joins, and caps. The CSS classes, such as `.lines`, apply styling to path elements within the SVG, resulting in round-cornered, dark teal strokes. The code shows how D3 and SVG can be combined for simple vector graphics without a dataset.

Shapes with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling. A single SVG canvas is rendered, and D3 is loaded to manipulate it, referencing CSS classes for line properties. The visualization uses the SVG rendering approach and D3 v5 framework, with styles defining stroke colors and widths for path elements. The code sets up the SVG element with a fixed width and height, but the specific shape-drawing logic is incomplete in the provided file.

Shapes with SVG and CSS

This example demonstrates a collection of geometric SVG shapes styled through CSS, showcasing how vector primitives can be visually customized. The code initializes an SVG canvas with a fixed width and height, then relies on CSS rules to define stroke colors, line joins, and line caps for path elements. It uses D3 version 5 to select the SVG element, though the visible JavaScript is incomplete. The stylesheet applies a dark teal stroke and rounded line endings to all paths within a `.lines` class, while the body has no margin to maximize the canvas display area.