thebeef5

@thebeef5·10 public vizzes

Bar Chart 2

This bar chart displays population estimates for ten countries, sourced from a CSV file and sorted by country name. It encodes population on the x-axis and country on the y-axis using horizontal bars. The visualization is built with D3 v5, utilizing `d3.csv` for data loading, `d3.scaleLinear` for the quantitative axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` for rendering ticks. Bars are drawn as SVG `rect` elements with a fixed steelblue fill.

Jan 31, 2021

Loading thumbnail…

Car Scatter Plot!

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The chart uses a red, semi-transparent fill for the circles, allowing overlapping points to be visible. The visualization is built with D3.v5, using scales, axes, and SVG rendering. The code loads data from a CSV file, converts numeric fields, and employs `scaleLinear` for both axes, with `axisLeft` and `axisBottom` for the labeled axes.

Jan 13, 2021

Loading thumbnail…

Scatter Plots!

This scatter plot displays the populations of the top 11 countries, with each circle positioned along a linear x-axis for population and a point scale y-axis for country names. The chart uses D3 v5 with `d3.csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render an SVG. Population values from the CSV are multiplied by 1,000, and the y-axis gridlines are removed with `.remove()` on the domain selection.

Jan 13, 2021

Loading thumbnail…

customizing the axes

This example shows a bar chart of population data for the top 11 countries, with a customized y-axis that removes its domain line and tick marks, and an x-axis that uses a formatted tick label converting values to billions (e.g., "1.42B"). The chart is rendered using SVG and D3 v5, with `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` to generate the axes. Data is loaded from a CSV and the tick format is applied via `format('.3s')`.

Jan 13, 2021

Loading thumbnail…

Bar Charts

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The bars are rendered in SVG with a steelblue fill, while D3’s axis generator provides customized tick labels and lines in muted grays. The chart uses `d3.csv` to load the data and `d3.scaleBand` and `d3.scaleLinear` for positioning and scaling. An axis label and a title are added as text elements, with font sizes and colors styled via CSS.

Jan 13, 2021

Loading thumbnail…

Bar Chart

This bar chart visualizes population data for ten countries, with China and India leading by a significant margin. The chart uses D3 v5 to load data from a CSV file via the `csv` method, converting population values to absolute numbers by multiplying by 1000. Rectangles are appended to an SVG container, with the rendering approach relying on D3’s data join to bind the imported dataset. The layout is minimal, with the browser margins removed via styles.css for a full-bleed display.

Jan 12, 2021

Loading thumbnail…

Let's make a face with D3

This example renders a simple smiley face as an SVG graphic. It draws a yellow circle for the head, two black circles for the eyes, and a half-arc path for the mouth, all positioned using the SVG `width` and `height` attributes. The code uses D3 v6’s `select`, `arc`, and `append` APIs to create and transform the shapes, with the mouth arc defined by inner and outer radii and start/end angles.

Jan 12, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements—circles, rectangles, lines, and a path—with styling applied via CSS. It shows how SVG primitives inherit properties like fill and stroke from parent groups and CSS classes, using inline attributes and external stylesheet rules. The code uses raw SVG markup without any JavaScript libraries, relying on the browser’s native SVG rendering. Shapes are positioned through explicit coordinates and transformed with scale and translate operations, while strokes and fills are defined per element or inherited from group containers.

Jan 12, 2021

Loading thumbnail…

HTML Cars Report

This example shows a static HTML-based report of three cars with their model years and prices. The page displays a monospaced, large-font list with the first entry, the 2012 Nissan Leaf, highlighted in green via the `.highlighted` CSS class. The visualization uses plain HTML and CSS only, with no JavaScript libraries or data-binding frameworks; the data is hardcoded directly in the markup. The rendering approach relies on standard browser default styling for a `<ul>` list, with visual emphasis achieved purely through class-based color styling.

Jan 11, 2021

Loading thumbnail…

Cars Report 2

This example displays a single car make in large green text on a webpage. It parses a hardcoded JSON array of car objects, including make, year, and price, and renders the first car’s make using the DOM API’s `textContent` method. The visualization relies on standard JavaScript modules for data import and CSS styling, with no charting or animation libraries involved.

Jan 11, 2021