Yongbobloomington

@Yongbobloomington·9 public vizzes

Fork of Fork of Stylized Bar Chart

This is a horizontal bar chart of the running total of US states admitted to the Union from 1884 to 2010. The visualization uses React for rendering, with D3.js v5's `scaleLinear` and `scaleBand` functions to map years to bar widths and states to vertical positions. Data comes from a CSV file and is displayed with a tooltip showing the year value on hover. The chart uses a stylized layout with a Poppins font and custom colors.

Feb 14, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the top 10 most populous countries as a horizontal bar chart, using population data from the United Nations World Population Prospects 2019. The chart maps country names to the y-axis with d3.scaleBand and population values to the x-axis with d3.scaleLinear. React renders each bar as a rect element, with d3.csv loading the data and d3.axisLeft generating the tick marks. The bars are styled with a teal fill and include tooltips via SVG title elements.

Feb 14, 2021

Loading thumbnail…

Making a Scatter Plot

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It shows population values as horizontal bars ordered by country name, with a formatted x-axis using d3.axisBottom and d3.format. The visualization incorporates d3.scaleBand and d3.scaleLinear for positioning, while custom axis labels and a title are added via SVG text elements.

Dec 19, 2020

Loading thumbnail…

Making a Bar Chart

This example visualizes the 2018 populations of the ten most populous countries as a horizontal bar chart, with each bar’s length proportional to its population and a custom axis labeling numbers in billions. Built with D3 v5, it loads data from a CSV file, uses `scaleLinear` and `scaleBand` to map values, and renders axes via `axisBottom` and `axisLeft`. The SVG output includes a title and axis label, with gridlines and styled steel-blue bars, while the axis tick format converts large numbers to a readable "B" suffix.

Dec 19, 2020

Loading thumbnail…

make a bar chart!

This bar chart displays the top 10 most populous countries, with population values derived from the CSV data and rendered as an SVG. The visualization uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for categorical y-axis, with `axisLeft` and `axisBottom` for axes and tick formatting via `format('.3s')`. The chart includes a title, axis label, and steel-blue bars, with the data loaded asynchronously from `data.csv` using D3’s `csv` function.

Dec 19, 2020

Loading thumbnail…

let's make a face with D3.js!

A smiling face built entirely from D3.js SVG shapes. The code draws a yellow circle for the head, adds two smaller circles for eyes, and uses the `d3.arc` API to create an arc-based mouth with specified inner and outer radii and angles. The example demonstrates basic SVG attribute manipulation with `select`, `append`, and `attr`, and positions elements using a centered `<g>` group with translate transforms. All geometry is hardcoded, with no external data source.

Dec 18, 2020

Loading thumbnail…

HTML Cars Report

This example demonstrates a static vector composition of geometric shapes and paths rendered as SVG, exploring foundational visual primitives in an HTML report format. The scene combines circles, rectangles, lines, and a path element with varied fill colors, strokes, and transformations, including scaling and translation. The code uses raw JavaScript to set text content and relies on CSS for page styling, while showing no data binding or interactivity. The SVG is embedded directly in `index.html`, with a `<g>` group containing shape attributes like `stroke-width`, `fill`, and explicit coordinate paths.

Dec 18, 2020

Loading thumbnail…

HTML Cars Report

This example demonstrates a simple static report of used cars, listing three vehicles with their model year, make, model, and price as an HTML list. It shows how plain HTML and CSS can be used to present a clean, readable inventory without any charts or interactive elements. The page uses a `<ul>` element with a highlighted class to visually distinguish the first listing in red. Styling is applied via an external stylesheet (`style.css`), which sets a large monospace font and the red highlight color. No JavaScript functionality is visible, as the embedded `index.js` file contains only a placeholder assignment that does not affect the page.

Dec 17, 2020

Loading thumbnail…

HTML Starter

A minimal HTML page demonstrates the integration of CSS and JavaScript within a single file. The page displays the text "Hello HTML" centered with a large font size, while a script logs "Hello JavaScript" to the browser's developer console. This starter template uses standard HTML, CSS, and JavaScript APIs without any external libraries, providing a foundational example for building web-based visualizations. The code is self-contained, requiring no data sources or rendering frameworks beyond the native browser environment.

Dec 17, 2020