Skip to main content
Log in
I

inskoe@central.edu

@inskoe·8 public vizzes

Loading thumbnail…

Pseudo Vertical Bar Chart

This example presents a pseudo vertical bar chart made entirely with hand-coded SVG rectangles, directly in the HTML without a charting library. The code uses the `<svg>` element and inline `<rect>` shapes, whose `height` and `y` positions encode the values for categories A through D, creating the visual hierarchy. Styling is applied via CSS classes and presentation attributes, with black-and-white fills and thick strokes outlining each bar. The text labels and the title rely on the `text` element and standard heading tags to annotate the chart.

May 22, 2025
Loading thumbnail…

20 Most Populous Cities

This horizontal bar chart ranks the world’s 20 most populous cities by population, using orange hover highlights to reveal precise figures in millions. Built with D3’s `d3-selection` module, the visualization binds an array of city objects to SVG `<rect>` and `<text>` elements via `selectAll().data().join()`. Each bar’s width is scaled linearly from population data, while city names anchor on the left. Population values come from Wikipedia.

May 20, 2025
Loading thumbnail…

Pseudo Slope Graph

A pseudo slope graph displays changes between two points in time using a single SVG canvas. The visualization renders multiple gray lines and circles to represent individual data series, with the entire graphic generated through SVG primitives like `<line>`, `<circle>`, and `<path>` elements. The chart emphasizes a specific data transition by using black to highlight one particular change, while all other movements remain in gray. The minimal, static design focuses on direct visual comparison between the left and right columns without interactive elements or animation.

May 20, 2025
Loading thumbnail…

ABC_Histogram

This bar chart displays the relative frequency of each letter in the English alphabet, sorted from most to least common, with percentage labels above each bar. The data originates from Wikipedia’s letter frequency statistics. Built with D3.js v7, it uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and the `d3.groupSort` function to reorder the letters by descending frequency. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`, with bars colored steelblue and value labels overlaid.

May 20, 2025
Loading thumbnail…

Bar Chart of 10 Most Populous Countries

This bar chart displays the ten most populous countries, ranked by population with India and China leading. Each bar is color-coded by population size, and a country flag image appears at the end of every bar. The chart loads population data from a CSV file and uses D3 v5 scales, axes, and SVG rendering. Flags are fetched from flagcdn.com, while axis labels and tick formatting are handled through D3’s `scaleLinear`, `scaleBand`, and `format` utilities.

May 19, 2025
Loading thumbnail…

Making a Bar Chart Updated Data

This bar chart displays the top 10 most populous countries using 2025 population projections from a CSV file, highlighting China and India in steel blue with inline labels while other bars appear gray. Built with D3 v5, the visualization uses `d3.csv`, `scaleLinear`, and `scaleBand` to map population values and country names, with SVG rendering for the axes, grid lines, and bar elements. The code applies formatting via `d3.format` to display tick values in billions and labels with commas, and styles the chart through external CSS.

May 19, 2025
Loading thumbnail…

Making a Bar Chart

This visualization shows a horizontal bar chart of world populations, with bars colored steelblue and labeled by country. The chart uses the D3.js library to load data from a CSV file, scales the population values, and renders the bars as SVG rectangles. It also includes axis labels and tick marks, generated using D3's scaleBand, scaleLinear, axisLeft, and axisBottom functions.

May 19, 2025
Loading thumbnail…

Circles with D3

This example displays seven translucent circles at fixed positions and sizes across a pale green canvas, each filled with a distinct neon color. The visualization demonstrates how D3’s `select` and `join` API can declaratively create and style SVG circle elements from a static array of coordinates, radii, and hex fill values. Opacity is set uniformly to 0.708 via an attribute, with the rendering driven by D3 7.8.5.

May 19, 2025