M

mauleendertse@gmail.com

@Leendertse·16 public vizzes

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This fork of an animated scatter plot displays the Iris dataset, allowing viewers to interactively explore relationships between quantitative measurements and categorical species. Two dropdown menus let users change which floral attribute is plotted on the x and y axes, with points smoothly animating to their new positions. The visualization uses D3 v6's selection.join API to update rendered SVG circles and axes, while applying transitions for a 1000-millisecond animated effect. Both quantitative and categorical axes are supported, with categorical attributes mapped to discrete positions on the chart.

Loading thumbnail…

Fork of Fork of HTML Starter (reusable charts

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The chart uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data points to SVG circles, with axis labels generated accordingly. Two dropdown menus built with a custom `menu()` function let viewers switch which numeric columns are plotted on the x- and y-axes. Data is loaded asynchronously via D3’s `csv` method, and the visualization fills the browser window.

Loading thumbnail…

Fork of HTML Starter

This visualization displays a scatter plot of the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. It uses D3.js v7’s declarative API, including `select`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom`, within a minimal HTML page. The SVG canvas fills the browser window, with circles sized at radius 5. Data is fetched as CSV from a remote Gist and parsed into numeric fields before being scaled and rendered. The example demonstrates a concise, modern D3 workflow for building interactive plots.

Loading thumbnail…

Fork of HTML Starter

This example is a minimal HTML page that displays the message "Hello HTML!" centered on a white background. It demonstrates the fundamental separation of concerns in web development by using a `<style>` block for CSS presentation and inline JavaScript-free markup for content. The page pairs a `<div>` element, styled with a responsive font-size using the `em` unit, with no external libraries or frameworks. Its purpose is to serve as a clean, barebones template for creating data visualizations, with the provided React Starter link indicating it is a starting point for more complex interactive projects.

Loading thumbnail…

Fork of HTML Starter

This example is a minimal HTML page that displays the message "Hello HTML!" centered on a white background. It demonstrates the fundamental separation of concerns in web development by using a `<style>` block for CSS presentation and inline JavaScript-free markup for content. The page pairs a `<div>` element, styled with a responsive font-size using the `em` unit, with no external libraries or frameworks. Its purpose is to serve as a clean, barebones template for creating data visualizations, with the provided React Starter link indicating it is a starting point for more complex interactive projects.

Loading thumbnail…

Fork of HTML Starter

This example is a minimal HTML page that displays the message "Hello HTML!" centered on a white background. It demonstrates the fundamental separation of concerns in web development by using a `<style>` block for CSS presentation and inline JavaScript-free markup for content. The page pairs a `<div>` element, styled with a responsive font-size using the `em` unit, with no external libraries or frameworks. Its purpose is to serve as a clean, barebones template for creating data visualizations, with the provided React Starter link indicating it is a starting point for more complex interactive projects.

Loading thumbnail…

Fork of HTML Starter

This example is a minimal HTML page that displays the message "Hello HTML!" centered on a white background. It demonstrates the fundamental separation of concerns in web development by using a `<style>` block for CSS presentation and inline JavaScript-free markup for content. The page pairs a `<div>` element, styled with a responsive font-size using the `em` unit, with no external libraries or frameworks. Its purpose is to serve as a clean, barebones template for creating data visualizations, with the provided React Starter link indicating it is a starting point for more complex interactive projects.

Loading thumbnail…

Fork of HTML Starter

This example is a minimal HTML page that displays the message "Hello HTML!" centered on a white background. It demonstrates the fundamental separation of concerns in web development by using a `<style>` block for CSS presentation and inline JavaScript-free markup for content. The page pairs a `<div>` element, styled with a responsive font-size using the `em` unit, with no external libraries or frameworks. Its purpose is to serve as a clean, barebones template for creating data visualizations, with the provided React Starter link indicating it is a starting point for more complex interactive projects.

Loading thumbnail…

Fork of HTML Starter

This example is a minimal HTML page that displays the message "Hello HTML!" centered on a white background. It demonstrates the fundamental separation of concerns in web development by using a `<style>` block for CSS presentation and inline JavaScript-free markup for content. The page pairs a `<div>` element, styled with a responsive font-size using the `em` unit, with no external libraries or frameworks. Its purpose is to serve as a clean, barebones template for creating data visualizations, with the provided React Starter link indicating it is a starting point for more complex interactive projects.

Loading thumbnail…

Fork of HTML Starter

This example is a minimal HTML page that displays the message "Hello HTML!" centered on a white background. It demonstrates the fundamental separation of concerns in web development by using a `<style>` block for CSS presentation and inline JavaScript-free markup for content. The page pairs a `<div>` element, styled with a responsive font-size using the `em` unit, with no external libraries or frameworks. Its purpose is to serve as a clean, barebones template for creating data visualizations, with the provided React Starter link indicating it is a starting point for more complex interactive projects.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” in large, centered type. It serves as a basic starter template for D3 projects, logging a simple message and the D3 `select` function to the browser console. The page loads D3 v7 from a CDN, and the accompanying JavaScript bundle imports the `something` constant to construct and print “Hello A thing.”, illustrating a basic setup with external scripts and console output.

Loading thumbnail…

Fork of HTML Starter

This example displays a single, centered message reading “Hello HTML!” at an extremely large font size. The code defines the text within a plain HTML file, styling it using a CSS class that sets the font size to 13em and centers it. No additional libraries or JavaScript are used; the rendering relies solely on the browser’s standard HTML and CSS parsing. The page presents static, non-interactive text.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal setup for exploring JavaScript array sorting. The code defines an array of two objects with `key` and `value` properties, then logs a sorted version to the console using the array’s `sort` method with a comparator. It relies on D3.js version 7.9.0 as a dependency, though the visible logic does not use D3 APIs. The page is an HTML document with an embedded script, serving as a starting point for testing array operations in a browser environment.

Loading thumbnail…

Fork of HTML Starter

This example is a minimal HTML page that displays the message "Hello HTML!" centered on a white background. It demonstrates the fundamental separation of concerns in web development by using a `<style>` block for CSS presentation and inline JavaScript-free markup for content. The page pairs a `<div>` element, styled with a responsive font-size using the `em` unit, with no external libraries or frameworks. Its purpose is to serve as a clean, barebones template for creating data visualizations, with the provided React Starter link indicating it is a starting point for more complex interactive projects.

Loading thumbnail…

Fork of Fork of Hello VizHub

This example demonstrates a minimal VizHub project that renders a static message. It loads D3.js via UNPKG and uses the `select` API from D3 to target a DOM element, then sets its text content with a string imported from a local ES6 module (`myMessage.js`). The code also defines an unused constant and regex literal. The message appears centered and large via the `styles.css` rule, with the HTML layout provided by `index.html`.

Loading thumbnail…

SVG Fundamental

This example presents a minimal SVG circle as a static data visualization, rendered directly in a web browser. The code defines a single circle element with hardcoded coordinates, demonstrating the fundamental use of SVG markup without any additional libraries. It pairs this SVG with a basic HTML page structure, showing the integration of vector graphics within a standard document. The example serves as a pure, framework-free introduction to SVG's shape elements and their attributes, such as `cx`, `cy`, and `r`, without any dynamic data or interaction.