Sam Creasey

@08screasey·6 public vizzes

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

A fork of "Let's make a face with D3.js!" demonstrates DOM manipulation by rendering five maroon circles as apples across an SVG canvas. The example shows how d3-select appends circles with fixed radii and positions using iterator indices. It uses D3 v5's `select` and `range` APIs to generate data, then applies `join` to bind circle elements, and finally removes exiting circles with `.exit().remove()`. The code illustrates basic data joins and enter/exit updates, though the initial face animation is not present in this version.

Dec 29, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a bare-bones HTML page that uses JavaScript to load and display data from a CSV file. The page renders a blank SVG canvas, and the code uses the `d3.csv` API to fetch `data.csv`, which contains date, sent, and received values. While the data is parsed and the `render` function is called, the example does not define any marks or encodings, so the visualization itself shows no graphical output. It serves as a minimal starting point for building D3-based React or HTML projects.

Dec 22, 2020

Loading thumbnail…

customizing axis

This D3.js example customizes the axes of a grouped bar chart using data from a CSV file. It visualizes nitrogen levels across different groups under normal and stress conditions, with the X-axis showing categories and the Y-axis representing values from 0 to 40. The code uses `d3.scaleBand` for the categorical X-axis and `d3.scaleLinear` for the Y-axis, with `d3.axisBottom` and `d3.axisLeft` to render the axes. The chart renders as SVG, applying custom tick sizes and colors via `d3.scaleOrdinal`.

Dec 21, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example displays a horizontal bar chart of population data for five countries, using steel-blue bars scaled by population size and labeled with country names along the y-axis. Built with D3.js v5, the visualization leverages `d3.csv` to load the data, `d3.scaleLinear` and `d3.scaleBand` for axes, and `d3.axisLeft` and `d3.axisBottom` to render tick marks and labels. The chart is drawn as SVG elements within a fixed 960x500 viewport, positioned with margins and translated groups.

Dec 18, 2020

Loading thumbnail…

HTML Starter

This example renders a simple emoji face using D3.js v6 within a React project. It draws yellow and black circles for the face and eyes, and uses the `d3.arc()` function to create a mouth path on an SVG canvas. The visualization demonstrates basic DOM selection with `d3.select`, SVG attribute manipulation, and geometric path generation, all set against a red background.

Dec 18, 2020

Loading thumbnail…

HTML Starter

This example shows the simplest possible structure for an interactive web page, displaying the text “Hello HTML” at a large scale in the browser. It demonstrates a minimal HTML document with inline CSS controlling the body’s font size and text alignment, and an inline JavaScript block that logs “Hello JavaScript!” to the console. The page relies solely on native browser APIs—HTML, CSS, and JavaScript—without any external libraries or data sources. It serves as a baseline for understanding how markup, styling, and scripting combine in a single file.

Dec 18, 2020