craig harbottle

@craig-harbottle·6 public vizzes

Fork of Sol LeWitt With D3

This example recreates a Sol LeWitt-style generative drawing using D3.js within a React framework, rendered as SVG. The code builds layered horizontal and vertical black rectangles, masking portions with white and black shapes to create intersecting bands, plus a set of concentric elliptical paths that peek through a central circular opening. It uses D3’s `select` and `range` functions to generate data and chain SVG element creation, with `mask` elements controlling visibility. The composition fills the browser window, producing a geometric, abstract pattern.

Sep 20, 2023

Loading thumbnail…

Fork of Hello HTML

This example is a minimal demonstration of SVG-based drawing within an HTML page. It shows how a document can define a canvas region using the SVG namespace, though the only concrete shape—a red circle—is commented out in the source. The code creates an `svg` element dynamically with JavaScript’s `document.createElement`, which is part of the standard DOM API. No external libraries like D3 are used; the example relies solely on vanilla JavaScript and inline SVG markup to illustrate the basic structure for potential data visualization.

Sep 19, 2023

Loading thumbnail…

Fork of Pie Chart

This visualization displays the basic cost of Netflix across ten countries, using data from a CSV file sourced from a GitHub gist, rendered as a pie chart with a legend listing each country and its cost in dollars. It uses d3’s selection, pie, arc, scaleOrdinal, and schemeCategory10 functions to construct the SVG chart, with mouseover events logging the cost to the console. The code also sorts the data before slicing the top ten entries, and styles the text and legend via CSS.

Jul 14, 2023

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes all CSS named colors as a radial burst of pie slices using React and D3 v5. Each colored slice corresponds to one color from a CSV dataset loaded via `d3.csv`, with the fill matching the color’s hex value. React components render the SVG paths, while D3’s `pie` and `arc` generators compute the slice geometry. The visualization loads data asynchronously with `useEffect` and shows a "Loading..." state until the CSV arrives.

Jul 14, 2023

Loading thumbnail…

Fork of Hello HTML

This example shows a simple static SVG face made from three black and yellow circles, with no interaction or animation. The page renders a single yellow circle as the head, two smaller black circles for eyes, and a black outline drawn with a thick stroke. The visualization is built entirely with hand-written SVG elements inside an HTML file, using no external JavaScript libraries. The rendering approach is direct markup in the browser, with each circle positioned using fixed SVG coordinates (cx and cy) and sized by its radius attribute.

Jul 12, 2023

Loading thumbnail…

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

This example builds a smiling face from basic SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and chained transitions: the eyebrows animate upward and back down over four seconds via `transition.attr` calls on a `g` element. Rendered in a 960×500 SVG, the face is centered using a translated group, with dimensions for features like eye spacing and eyebrow width defined as variables. No external data is used; the visualization relies solely on hardcoded geometry and D3’s selection and arc APIs.

Jul 12, 2023