nutmegsashimi

@nutmegsashimi·6 public vizzes

Fork of HTML Starter

This example demonstrates a simple interactive web page where clicking a large “click me” heading appends a red “wassup” message to the body. The code uses D3 v6 selections (d3.select, d3.selectAll) to bind data arrays and append SVG rects, though the rect-drawing logic is commented out. The SVG remains empty, while the primary interaction relies on d3.select('h1').on('click') to trigger DOM insertion, rendering entirely through SVG and HTML elements in the browser.

Feb 2, 2021

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to dynamically select which sepal or petal measurements to plot on the x- and y-axes via dropdown menus. Dots representing individual flowers are color-coded by species (setosa, versicolor, virginica). The visualization is built with D3 v5, using `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, and employs smooth `transition().duration(1000)` animations to transition points between axis configurations.

Feb 2, 2021

Loading thumbnail…

d3 practice

This example shows four numbered paragraphs rendered in a single empty `div` element, displaying the static values 1 through 4. The visualization uses the D3.js v6 library to select the container, bind the array of numbers to paragraph elements via the `.data()` method, and append a new `<p>` for each item using `.enter()`. The text for each paragraph is set directly from the data value through the `.text()` callback, with no additional encoding or interaction. The HTML file loads D3 from a CDN and the JavaScript code from a separate `app.js` file.

Feb 1, 2021

Loading thumbnail…

Practice D3 013121

This example shows a network visualization rendered on an HTML canvas using D3’s force simulation. The code builds a force-directed graph with nodes and links, applying forces for charge, centering, and collision via `d3.forceSimulation`, `d3.forceManyBody`, `d3.forceCenter`, and `d3.forceCollide`. It draws circles and lines directly onto the canvas, updating positions each tick. The visualization uses random-generated data and relies on D3 v6’s `d3.scaleOrdinal` for node coloring and `d3-canvas` for rendering.

Feb 1, 2021

Loading thumbnail…

EDIT: Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by animating a smiley face whose eyebrows rise and fall. It shows how to build SVG shapes—circles for the eyes, rectangles for the eyebrows, and an arc for the mouth—using D3 selections and the `arc` generator. The eyebrows transition vertically over a four-second cycle via chained `transition().duration()` calls. The code uses D3 v5, selecting the SVG element and appending groups to position features around the center of the canvas.

Jan 27, 2021

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text “Hello HTML” in large, centered type. It demonstrates a bare-bones starting point for web-based projects, using plain HTML for structure and embedded CSS for styling. The page also includes an inline JavaScript snippet that logs “Hello JavaScript!” to the browser’s developer console via `console.log`. No external libraries or data sources are used; the content is static and hardcoded directly in the markup.

Jul 24, 2020