Debaliena

@Debaliena·12 public vizzes

D3: Stack layout stacked bar chart

This stacked bar chart uses D3’s `d3.stack` layout to divide five categories into layered segments for apples, oranges, and grapes. Each series is rendered as SVG `rect` elements within grouped `<g>` elements, with `d3.scaleBand` positioning bars along the x-axis and `d3.scaleLinear` mapping cumulative values to heights. Colors come from `d3.schemeCategory10`, and the chart reads the static dataset directly from the script.

May 23, 2022

Loading thumbnail…

Untitled

A yellow smiley face with black eyes and a curved mouth sits centered on a black background, while its rectangular eyebrows bounce up and down in a looping two-second animation. The example demonstrates fundamental DOM manipulation using D3.js v3, building the face from SVG shapes like circles, rectangles, and an arc path. The eyebrows move via chained `transition()` calls with a 2000-millisecond duration, toggling their vertical offset back and forth. All rendering is done through D3 selections and the `arc()` helper, with no external data source.

Feb 16, 2022

Loading thumbnail…

BA 401 EXERCISE

A yellow smiley face with moving eyebrows demonstrates fundamental DOM manipulation using D3.js. The visualization is created with SVG elements, including circles for the face and eyes, rectangles for eyebrows, and a path for the mouth. D3 selections and the `arc` generator construct the face, while chained `transition` calls with `.duration(2000)` animate the eyebrows up and down. The source code is provided as an HTML file with a bundled JavaScript module.

Feb 16, 2022

Loading thumbnail…

401 E5

This example visualizes Olympic medal counts for nine countries as a scatterplot, with gold medals mapped to the x-axis and silver medals to the y-axis. Each circle’s radius scales with the square root of the Euclidean distance between the two medal values, while its fill color blends the gold and silver counts into an RGB value. The SVG is built dynamically using D3 version 6’s data join, with `selectAll`, `data`, and `enter` appending circles, and the dataset is hardcoded within the HTML script rather than loaded from an external file.

Jun 7, 2021

Loading thumbnail…

backup

This example presents a stark, browser-based visualization: a nearly blank page with the single word "backup" rendered in enormous type. The page uses a minimal HTML structure and an inline CSS style to set the text alignment and font size to 13em. The actual rendering is handled by a JavaScript bundle, though the visible output is static text. It demonstrates how a simple data-visualization context can be framed within a webpage, relying on the browser's default text rendering rather than any charting library.

Jun 7, 2021

Loading thumbnail…

D3.js | d3.axisRight() Function

This example demonstrates the D3.js v4 `d3.axisRight()` function, which generates a vertical axis with tick labels positioned to the right of the axis line. The code creates an SVG canvas with a linear scale mapping a domain of 0–10 to a pixel range, then appends a group element translated to the right and calls the axis on it. The resulting axis is rendered with green, left-aligned text labels using D3’s SVG text elements. It shows a simple static axis without data points, focusing solely on axis configuration and placement.

Jun 3, 2021

Loading thumbnail…

Untitled

This example shows a simple bar chart rendered as static SVG rectangles with value labels. The chart displays three bars with heights proportional to the data values 5, 10, and 12, using inline SVG elements styled with orange fills and white text. The code uses D3 version 6 only for loading the library, while the visualization itself is hand-coded in HTML with hardcoded `rect` and `text` elements, not generated through D3 data joins or scales. A separate `index.js` file imports `select` from D3 to append a text message to the page body.

Jun 3, 2021

Loading thumbnail…

BA 401 Data loading exercise

This example demonstrates a minimal client-side data-loading exercise. It fetches a raw text dataset from a GitHub Gist URL using the `fetch` API and prints the retrieved content to the browser console. The page consists of an HTML skeleton with a single script block that initiates the asynchronous request, then logs the response text without any parsing or visualization. The code uses only native JavaScript `fetch` and `response.text()`, with no additional libraries or rendering layers present.

May 20, 2021

Loading thumbnail…

Untitled

This example demonstrates the results of JavaScript comparison operators on two numeric variables. It shows how the relational operators `==`, `<`, `>`, `!=`, `>=`, and `<=` evaluate to boolean values when applied to `a = 10` and `b = 20`. Each comparison is written to the HTML document using `document.write`, with the output displayed in the browser. The page uses vanilla JavaScript within an HTML script tag, requiring no external libraries or frameworks.

May 20, 2021

Loading thumbnail…

Untitled

This example demonstrates D3.js data joins by rendering a list of five numeric values as `<li>` elements, with a button to remove the fourth item. The initial list combines pre-existing elements bound to data with dynamically appended entries using `d3.select().data().enter()`. Clicking the button triggers a function that resets the data array to four values and uses `exit().remove()` to remove the now-orphaned list item. The page uses D3 v4 with a minimal HTML structure and inline CSS for font styling.

May 10, 2021

Loading thumbnail…

BA 401 E2

This example demonstrates the initial stage of a data-visualization project, showing how an external dataset is fetched and its loading process is logged to the browser console. The visualization itself has not yet been rendered; instead, the code uses the native `fetch` API to request data from a GitHub gist URL and then calls `console.log` on both the returned `Promise` object and the response variable. No charting or drawing libraries are implemented at this point, leaving the final output undefined. The project relies on plain JavaScript within an HTML file, with the data source hosted as a raw text file on GitHub.

May 6, 2021

Loading thumbnail…

BA 401 EXERCISE

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The face, including its red eyes and arc-shaped mouth, is drawn using SVG elements such as `circle` and `path`, with the mouth generated via the `d3.arc` function. Both eyebrows, implemented as `rect` elements, move upward and then return to their original position using chained `transition().duration()` calls over two seconds each. The code uses D3’s `select` API to manipulate the SVG directly, with all coordinates and sizes defined as constants.

May 3, 2021