JL10897

@JL10897·9 public vizzes

Making a bar chart

This example shows a bar chart where each data row from a CSV file is represented as a fixed 300-by-300 pixel rectangle, though no bar height or x-position mapping is applied. The code loads data with `d3.csv`, converts the `population` field to a number, and appends SVG `rect` elements using `selectAll` and `enter`. It uses `d3.select` for SVG selection and `d3.scaleLinear` (imported but not used), with data rendered as static squares rather than proportional bars.

Mar 9, 2022

Loading thumbnail…

Making a bar chart

This horizontal bar chart visualizes the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The chart displays population values on the x-axis with a custom tick format that abbreviates large numbers (e.g., “1.42B”) and country names on the y-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs, with bars rendered as SVG `rect` elements. Data is loaded from a local CSV file, and axes are customized by removing domain lines and adding axis labels.

Mar 9, 2022

Loading thumbnail…

Smiley Face Part 1

This example shows a static yellow circle with a black outline and two smaller black circles positioned as eyes, forming the early stage of a smiley face. The rendering uses SVG elements directly in the HTML, with React loaded via the UMD build and logged to the console. The main circle is centered at (480,250) with a radius of 245, while both eyes are placed at fixed coordinates, demonstrating basic SVG shape placement and styling via attributes like `fill` and `stroke-width`.

Mar 8, 2022

Loading thumbnail…

Fork of React Starter

This example shows a minimal React application that renders the text “Hello React!” in a large, centered font. It uses React 16.13.1 and ReactDOM to mount a single functional component into a root div. The component returns a styled `<div>` element, with the message font-size set to 13em via a CSS class in the HTML head. The code relies on standard JSX syntax and the `ReactDOM.render` API for client-side rendering.

Mar 8, 2022

Loading thumbnail…

Shape with SVG and CSS

This example demonstrates how SVG shapes can be styled and transformed using CSS and JavaScript. The visualization shows a circle, a rectangle, and several lines and paths arranged on a 960-by-500 canvas. A group element applies a dark blue fill to two circles, while another group adds black strokes to the line and path. The code uses inline SVG attributes like `cx`, `cy`, `r`, and `transform`, paired with a CSS stylesheet that sets global margins and defines stroke properties for line elements. It serves as a minimal, static illustration of SVG markup within an HTML page.

Feb 14, 2022

Loading thumbnail…

Shape with SVG and CSS

This example shows a simple car pricing report as a styled HTML list, with one item highlighted in red to draw attention to the 2012 Nissan Leaf. It demonstrates how to combine SVG-shaped page elements with CSS for visual emphasis. The code uses plain HTML markup, a linked stylesheet (`style.css`), and inline CSS. No external libraries or JavaScript frameworks are used, only standard HTML and CSS features.

Feb 14, 2022

Loading thumbnail…

Fork of First Try

This example displays a single centered message, “Hello HTML!”, styled with a large 13em font size. The page is built with plain HTML and CSS, using a `<div>` element with a class of `message` for styling. The text is horizontally aligned via the `text-align` CSS property, and the layout is a static, non-interactive web page. The code relies solely on standard HTML and CSS, with no external JavaScript libraries or data sources applied.

Feb 14, 2022

Loading thumbnail…

HTML Cars Report

This example presents a minimal HTML page titled “HTML Cars Report.” It renders a static, top-level heading and introductory text using standard HTML elements, with no external libraries or frameworks beyond the base page structure. The page does not include CSS styling or JavaScript logic, instead relying solely on the browser’s default rendering of the markup. The code references React only in its accompanying README as a comparison, while the actual implementation uses plain HTML without dynamic data or visualizations.

Feb 9, 2022

Loading thumbnail…

Fork for Test1

An empty HTML page titled “Fork for Test1” that embeds a YouTube video via an iframe. The page itself contains no visible data visualization, rendering only the video player in its body. No JavaScript libraries, data sources, or visualization APIs are referenced in the provided source code. The example serves as a minimal placeholder or test frame rather than a functional graphic.

Feb 9, 2022