ms-aus

@ms-aus·13 public vizzes

DUMMY Test

A horizontal bar chart displays the population of the world's 10 most populous cities, using a pink background and steel-blue bars. The visualization ranks cities like Tokyo, Delhi, and Shanghai, with the x-axis formatted to show population figures with billion abbreviations. The chart is built with D3 v5, using `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` and `axisLeft` for the axes. Data is loaded from a CSV file and styled using external CSS.

Aug 31, 2019

Loading thumbnail…

Marcus' scatter plot #1

This visualization displays the populations of the world’s 10 most populous cities as a horizontal bar chart, with metro population on the x-axis and city names on the y-axis. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to render axes, with tick formatting via d3.format. Bars are drawn as SVG rectangles within a grouped element, and the chart includes custom labels for the title and axes, rendered with a pink background.

Aug 31, 2019

Loading thumbnail…

Marcus' bar chart with axis formatting

This example shows a horizontal bar chart ranking the world’s 10 most populous cities by metro population, with formatted axis labels and gridlines. Data is loaded from a CSV file via `d3.csv`. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map values, `d3.axisBottom` with a custom `.tickFormat` to abbreviate numbers (e.g., converting G to B), and `d3.axisLeft`. Bars are rendered as SVG `rect` elements with a pink background and steelblue fill.

Aug 31, 2019

Loading thumbnail…

HW1 Q3 MS

This bar chart displays the population of the world's ten most populous cities, sorted by metropolitan population in descending order, using data from `worldData.csv`. The chart is rendered using D3.js, specifically employing `scaleLinear` and `scaleBand` for the x and y axes, with `axisBottom` and `axisLeft` to generate the axes. The visualization is built by creating rectangles for each bar, with a pink background and steelblue bars, and includes formatted axis labels and a title.

Aug 30, 2019

Loading thumbnail…

Marcus' bar chart with axis formatting

Aug 19, 2019

Loading thumbnail…

Marcus' bar chart exercise

This example shows the population of the 10 most populous cities as a horizontal bar chart, with city names on the y-axis and population counts on the x-axis. The visualization is rendered as an SVG using D3 v5, and the code imports specific modules (`select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`) from the D3 library. Population data is loaded from a local CSV file and converted from strings to numbers. The chart uses a band scale for the categorical axis and a linear scale for the quantitative axis, with axes generated via `axisLeft` and `axisBottom`. A pink background and steelblue bars style the output.

Aug 19, 2019

Loading thumbnail…

Marcus' starter template

A minimalist SVG template demonstrates a blank canvas with a pink background, rendered by an HTML page that loads D3 v5 and a bundled JavaScript file. The code selects the `<svg>` element and sets its background color via the `select` function, while also extracting its height and width attributes as numeric values for future layout calculations. No data or chart elements are drawn; the example focuses on establishing the basic structure and styling hooks for a D3 project, with CSS applied for a full-bleed page layout.

Aug 19, 2019

Loading thumbnail…

Marcus' D3 create a face #1

A yellow face with blue stroke, green eyes, brown eyebrows, a black nose, and an open mouth animates on a pink background. The eyebrows and mouth move up and down in a looping transition. Built with D3 v5, the example uses SVG elements and D3's `transition()` method to animate the brow group and mouth path. The face is constructed via `d3.select` and `d3.arc` for the mouth.

Aug 19, 2019

Loading thumbnail…

Marcus' D3 set pink background #1

This example demonstrates a minimal web page that renders an SVG element with a solid pink background. The visualization is created using the D3.js library (version 5) to select the SVG canvas and apply the background color through the `d3.select` API, accessed via the `select` import. The HTML structure defines the SVG with fixed dimensions, while the bundled JavaScript script (`bundle.js`) executes the color styling. The accompanying stylesheet removes default page margins, ensuring the colored SVG fills the viewport without visual interruption.

Aug 19, 2019

Loading thumbnail…

Marcus' shapes with SVG and CSS

SVG shapes—circles, rectangles, polygons, lines, and paths—are drawn directly in an HTML document, with each shape's fill, stroke, and position set through inline presentation attributes or grouped CSS classes. The view is scaled using an SVG transform, and a duplicated set of shapes is translated horizontally to show how group-level style inheritance works; for instance, the translated group applies a yellow fill and blue stroke to all contained shapes, while a `.lineClass` group sets its stroke color and linejoin properties via an external stylesheet. No JavaScript or data files are used; the markup and CSS in `index.html` and `myStyles.css` fully determine the static composition.

Aug 18, 2019

Loading thumbnail…

Marcus' HTML Cars Report

This HTML report displays a simple list of two used cars with model years, makes, and prices, styled with a large monospace font and a light blue background. The page uses a linked CSS file (`carStyles.css`) to set global typography and color rules, including a gold-colored `h2` heading and a bold class for a preferred car. The content is marked up in `index.html` as a static HTML list without any JavaScript or external charting libraries.

Aug 17, 2019

Loading thumbnail…

Marcus Car Report

This example demonstrates a simple text-based report that filters a local car database by year and displays the results in the browser. It shows how JavaScript modules, Promises, and DOM manipulation can create a dynamic, data-driven view. The code uses `getCars()` to asynchronously load a hardcoded JSON array of cars via a simulated 2-second delay, then `generateCarReport(cars, 1998)` filters cars with a year below 1998 and formats each entry using `formatCars`, which outputs a string like `1996 Toyota: $2800`. The final report is injected into a `<pre>` element styled with CSS, while the page initially shows "Working.." during the wait. The styling uses the Ubuntu font from Google Fonts and a dark blue background.

Aug 17, 2019

Loading thumbnail…

Hello VizHub MS

This example demonstrates a minimal "Hello World" visualization that displays a fixed text message on a styled web page. It shows how to combine an HTML template, an ES6 module, and D3.js in a VizHub project. The code imports the `select` function from D3 and uses it to set the text of a `div` element, while an external stylesheet applies a large Ubuntu font with a dark blue background. All text content comes from a separate `myMessage.js` module, and the page uses `bundle.js` for module loading.

Aug 17, 2019