MayaJava

@MayaJava·7 public vizzes

Let's make Bar Chart with D3.js!

This bar chart displays population estimates for five countries or regional groupings, with horizontal bars whose lengths are proportional to each value. The visualization is built with React and D3 v5, using `d3.csv` to load the dataset and `d3.scaleLinear` and `d3.scaleBand` to map population counts and country names to pixel coordinates. Bar rectangles are appended to an SVG canvas, with heights and widths derived from the scales, and the chart renders without axes or labels.

Mar 31, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimalist HTML page with the text “Hello HTML” displayed in large, centered type. It uses plain HTML and embedded CSS to style the body with a 13em font size and center alignment, serving as a bare-bones template for web-based visualizations. The page contains no JavaScript, data sources, or interactive elements, functioning purely as a static starting point for projects built directly in the browser. It provides a contrast to the React-based starter by showing the simplest possible document structure with inline styling.

Mar 31, 2020

Loading thumbnail…

Let's make a Face with D3.js!

A yellow face with black features is drawn in SVG using D3.js v5, centered within a 960-by-500 viewport. The example uses `d3.select` to append a group, circles for eyes, a nose, and eyebrow rectangles, plus a mouth constructed with `d3.arc` for the path data. A `transition().duration(2000)` animates the eyebrows downward then back to their original offset. The code runs in a React starter, but renders directly to the SVG element using D3’s selection and arc APIs.

Mar 27, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes rendered within a React application, using inline SVG elements styled with CSS. The code displays circles, rectangles, and lines with varying fills, strokes, and transformations, including a group translated along the Y-axis. A path element with a pink stroke is also included, while CSS classes control the styling of grouped line elements. The visualization is built with React and uses raw SVG syntax (circle, rect, line, path) within an HTML page, with Dart styling applied via an external stylesheet.

Mar 23, 2020

Loading thumbnail…

Cars Report

This example displays a static HTML report titled "Cars Report" listing three car models with their model year and price. The page uses plain HTML list elements and a linked CSS stylesheet (styles.css) to format the content, with a large monospace font and a red highlighted class applied to the first entry, a Lexus. The data is hardcoded directly in the markup, and no JavaScript frameworks or visualization libraries are employed.

Mar 13, 2020

Loading thumbnail…

Cars Report

This example presents a text-based report of car listings, displaying formatted details for vehicles priced under $100,000. It shows the data transformation pipeline from import through filtering and formatting. The visualization uses the React framework, though the core rendering relies on plain DOM manipulation via `document.getElementById().textContent`. The data is embedded as JSON in `cars.js` and processed through custom `formatCar` and `generateReport` functions, which filter by price and produce a newline-separated string displayed in the `<pre>` element.

Mar 13, 2020

Loading thumbnail…

Untitled

This example renders a static HTML page displaying the text “Cars Report” as a title and “Hello HTML” centered in the body. The page uses plain HTML and inline CSS, with a massive font size of 13em applied to the body text for a bold, full-screen presentation. No JavaScript libraries or data sources are involved, making it a minimal starter template that demonstrates basic document structure and styling.

Mar 8, 2020