Skip to main content
SimilarExport ZIP
100%

Fork of Hello HTML

✓ Published0🌍 Public
Lllm0316@gwmail.gwu.edu
Last edited Mar 28, 2024
Created on Mar 28, 2024
Forked from Hello HTML

This example shows a live-updating histogram that streams unconfirmed Bitcoin transaction sizes over a WebSocket connection from Blockchain.info. It repurposes Mike Bostock’s Observable notebook by using the Observable Runtime’s `module.redefine` method to replace the `data` cell with a generator built on `library.Generators.observe`, which pushes new sizes into the chart as messages arrive. The chart renders as a `d3.histogram` with axes and bars, while the page uses vanilla HTML and CSS for layout. The code highlights how to override a notebook’s data source with real-time external inputs.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Histogram

This interactive histogram visualizes the distribution of price data from a CSV file hosted on GitHub. The chart is rendered as SVG and automatically resizes with the browser window. The code uses `d3.histogram()` to bin the numeric values, `d3.scaleLinear()` for the x and y axes, and `d3.csv()` to load the dataset. Bars are drawn with SVG `rect` elements, colored steelblue, with a debounced resize handler that rebuilds the visualization on window changes.

RRavi Teja Bonam
66% match
Loading thumbnail…

Observable JS Demo

This demo shows the Observable JS runtime running inside a plain HTML page using the `@hpcc-js/observable-md` library. It loads a `.ojs` file containing markdown, a generator that emits a ticking counter at 1-second intervals, and an imported brushable scatterplot from `@d3/brushable-scatterplot`. The user’s selection on that plot is displayed as a live JSON preview. The page resizes dynamically via the `Observable` API’s `resize()` and `lazyRender()` methods.

GGordonSmith
65% match
Loading thumbnail…

Histogram

This histogram visualizes the distribution of a numeric variable, grouping observed values into discrete bins and displaying their frequencies as vertical bars. It uses the D3.js library, specifically leveraging `d3.histogram` and `d3.scale` APIs to compute bin ranges and map data to screen coordinates. The rendering relies on SVG paths generated from the binned counts, with axes and labels drawn via D3’s measurement and tick utilities. The dataset originates from a GitHub gist, and the code operates entirely in the browser without external data files.

Mmbostock
64% match
Loading thumbnail…

Fork of HTML Starter

This example displays static text reading “Hello HTML” on a large scale, with population data logged to the browser console. The HTML page uses CSS for centered styling and inline JavaScript for a console message, while a separate script imports D3’s `select` and `csv` functions to load data.csv. The visualization does not render the dataset visually; it only demonstrates basic D3 data loading and console output within a bare HTML starter template.

Bbyiringirodalio
64% match
Loading thumbnail…

Fork of Histogram

This is a dark-themed, responsive histogram built with D3.js (v7) that visualizes the distribution of a single numeric variable. The chart displays the frequency of prices from the OneNum dataset, fetched via `d3.csv`, with bars rendered using SVG `rect` elements. It uses `d3.histogram()` to compute bins and `d3.scaleLinear` for x and y axes. The visualization adapts to window resizing through a debounced event listener, re-rendering the histogram with updated dimensions.

Zzjulijie0618
64% match
Loading thumbnail…

Fork of Histogram

This interactive histogram displays the distribution of weather measurements from San Francisco, with a dropdown menu to select the input column and a numeric input to adjust the number of bins. The chart uses `d3.histogram` to bin the data and `axisBottom`/`axisLeft` for axes, with SVG rendering and animated transitions on axis updates. Hovering over bars reveals class ranges and absolute frequencies via a tooltip, while the included dropdown menu and bin controls dynamically update the visualization in a React framework.

Mminson
64% match
Loading thumbnail…

Fork of Barchart with transitions, divergence Values and toolkit *changed*

This example shows a horizontal bar chart of absolute frequencies for six categories, with an interactive tooltip on hover that also highlights and expands the selected bar. The chart includes styled axes, gridlines, and a title. Rendering is SVG with D3 v5, using `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft`/`d3.axisBottom`. The code uses `d3.transition` for bar enlargement on mouseenter, and a tooltip element is managed via plain DOM events. Data is hardcoded in the script.

NNathelen
64% match
Loading thumbnail…

Fork of Hello HTML

This minimal example demonstrates the bare structure of an HTML page, serving as a starting point for building more complex visualizations. The page contains only a title element and an empty body, with no visible content or interactive features. It uses no external libraries or APIs, relying purely on standard HTML markup. The fork extends the original "Hello HTML" example by Mike Bostock, and the README includes a YouTube video link, though the page itself displays neither data nor graphics. The code establishes the foundational document structure required before adding D3.js or other visualization frameworks.

SSheng Yu
63% match