Skip to main content
Log in
M

mayuri-gosapphire

@mayuri-gosapphire·9 public vizzes

Loading thumbnail…

Fork of d3-simple-slider

This example displays earthquake data from 2000–2015, showing counts of tremors across magnitude ranges (5.0–5.9, 6.0–6.9, 7.0–7.9, and 8.0+) as a multi-line chart. It uses d3.scaleLinear and d3.line with curveCatmullRom to render smooth paths, with axes generated by d3.axisBottom and d3.axisLeft. A draggable d3-simple-slider control, built with d3.drag, lets users filter the time range. The chart is drawn as SVG and styled with CSS, with data parsed from a CSV file.

Aug 2, 2021
Loading thumbnail…

Fork of slider

This example demonstrates how to adjust the density and size of a textured pattern applied to an SVG rectangle. A native HTML range slider controls the visual property, updating the display in real time. The code uses the `textures` library to generate a circle-based texture pattern via `textures.circles()`, then applies it to the rectangle using D3.js v4’s `selection.attr()`. The SVG is rendered with a fixed width and height, and the slider’s value modifies the texture’s radius, though the density control is currently commented out.

Jul 26, 2021
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a custom time-based slider widget built with D3.js v5, rendered as an SVG element. The slider allows users to drag a handle across a timeline to select a date range, with tick marks displaying formatted dates or times depending on the duration. It uses `d3.scaleTime` for mapping dates to pixel positions and a custom drag interaction to update the handle. The code also includes a `triggerEvent` function that dispatches a message when the slider position changes, though the surrounding application logic is not shown.

Jul 24, 2021
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that uses CSS for centered styling and JavaScript for browser console output. The page displays the text “Hello HTML” at a large font size, while a script logs “Hello JavaScript!” to the developer tools. It relies on plain HTML, CSS, and the `console.log` API, with no external libraries or data sources. The body element’s inline style sets text alignment and font size, and the script runs immediately in the page load. This is a bare-bones template for testing basic web rendering and scripting.

Jul 24, 2021
Loading thumbnail…

Fork of D3 Starter

This example serves as a minimal starter template for D3 version 6, displaying only a static, centered text message. The page loads the D3 library from a CDN and applies a large font size via inline CSS. The JavaScript file `index.js` is executed through a bundled script, though no explicit data transformations or visualizations are defined. The rendering approach is a plain HTML body with no SVG or canvas elements, relying solely on the browser’s default text layout. The code uses the `d3.v6` namespace but does not invoke any specific D3 functions or APIs.

Jul 24, 2021
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a custom time-based slider widget built with D3.js v5, allowing users to drag a handle across a timeline to select a date range. The slider displays tick labels formatted as days or times depending on the span between start and end dates, and updates a handle position in response to drag events. It uses d3.scaleTime, d3.drag, and d3.timeFormat to map dates to pixel coordinates and render the interactive controls. The SVG rendering includes a track, overlay, ticks, and handle, with event handlers dispatching slider position changes to an external store.

Jul 23, 2021
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that uses CSS for centered styling and JavaScript for browser console output. The page displays the text “Hello HTML” at a large font size, while a script logs “Hello JavaScript!” to the developer tools. It relies on plain HTML, CSS, and the `console.log` API, with no external libraries or data sources. The body element’s inline style sets text alignment and font size, and the script runs immediately in the page load. This is a bare-bones template for testing basic web rendering and scripting.

Jul 23, 2021
Loading thumbnail…

Fork of Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization that displays the text “Hello VizHub!” centered on the page. The code loads D3 v5 via UNPKG and uses the `select` function to set the text content of a `div` element. It also showcases ES6 module imports by pulling a message string from a separate local file, with styling applied through an external CSS stylesheet.

Jul 23, 2021
Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization highlights customized D3 v5 axes, including formatted tick labels that abbreviate large numbers (e.g., converting billions to "B") and gridlines created via tick sizing. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG chart, with data loaded from a local CSV file. Styling is applied through external CSS for text and rectangle elements.

Jul 22, 2021