mrharis1

@mrharis1·5 public vizzes

D3

This example demonstrates an animated pie and bar chart using the D3.js v3 library. The pie chart visualizes an array of six numeric values with arc segments, while the bar chart displays a separate dataset with an elastic growth animation. The charts are rendered as SVG elements, with the bar chart featuring interactive hover effects that change bar colors and display tooltips. The code utilizes D3 APIs including `d3.layout.pie`, `d3.svg.arc`, `d3.scale.ordinal`, and `d3.scale.linear` for data binding, scaling, and animation transitions.

Dec 5, 2021

Loading thumbnail…

Letter Count Visulization

This interactive letter-count visualization displays the frequency of each alphabetic character in a user-editable text area. It dynamically updates an SVG bar chart as the text changes, using D3.js v3 scales and axes to map letter counts to bar heights. The visualization loads initial text from a local file and animates bar transitions via D3 transitions when the input is modified.

Dec 5, 2021

Loading thumbnail…

Fork of Step 1 - A Basic Pie Chart

This example shows a basic pie chart created with D3 v4, rendering an SVG visualization of four labeled data categories with proportional slice sizes and distinct colors from the Category 20b scheme. The code loads D3 via UNPKG, uses `d3.select`, `d3.arc`, `d3.pie`, and `d3.scaleOrdinal` to generate the chart dynamically from a JavaScript array of label-count pairs. The repository also includes a separate Canvas-based pie chart implementation in `pie.js`, which draws segments and labels using context methods like `arc`, `fillText`, and `rect`, with data defined in a Module.

Dec 5, 2021

Loading thumbnail…

HTML Cars Report

This example presents a plain HTML page titled “Cars Report” that lists three car entries in an unordered list. It demonstrates basic HTML structure and styling rather than interactive visualization. The page loads a stylesheet that applies a monospace font and enlarges the body text, while a CSS class `highlighted` turns the first car entry red. No JavaScript libraries or data-loading APIs are used; the content is entirely static markup. The focus is on highlighting a single list item through simple CSS selectors.

Dec 3, 2021

Loading thumbnail…

Cars Report

This report displays a single car manufacturer’s name from an in-memory dataset, with a focus on filtering and formatting car records. It loads D3 via UNPKG, but the script primarily uses plain JavaScript array methods like `filter()`, `map()`, and `join()` to prepare a list of cars priced under $2000, though only the first make is rendered to the page. The data comes from a local ES6 module `cars.js` which exports parsed JSON. The page updates a `<pre>` element’s text content via `document.getElementById` to show the result.

Dec 1, 2021