Nigel

Fork of H

This example demonstrates a minimal HTML page that centers a large, static text message using CSS styling. It displays the words “Hello HTML!” in an oversized font, showcasing the fundamental structure of an HTML document with embedded style rules. The page relies solely on standard HTML and CSS, using a `<div>` element with a `.message` class and the `font-size` and `text-align` properties. No JavaScript or external libraries are employed, serving as a bare-bones starting point for web development.

Jan 9, 2024

Fork off

A parliament chart displays the distribution of seats in the UK House of Commons, with each party represented by a colored arc of semicircular dots. The visualization uses the d3-parliament library, which builds on D3.js, to render the seating layout as an SVG. Clicking any seat triggers an alert identifying the party. Data is provided as an array of party objects containing seat counts and colors, with animation entering seats from the center in order of increasing size.

Jan 9, 2024

Fork of Making A Bar Chart

This bar chart displays the populations of the ten most populous countries, using horizontal bars ordered from largest to smallest. The visualization is built with D3 v7, loading data from a CSV file via `d3.csv` and rendering SVG elements. It employs `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to generate the axes. Each rectangle’s height is determined by the band scale’s bandwidth, and the fill color is set through CSS.

Dec 1, 2023

UK Map

This example displays a single red map of the United Kingdom rendered as an SVG path. The map is projected using the Albers equal-area conic projection, configured with specific center, rotation, parallels, and scale parameters. The visualization uses d3.geoPath to draw the geographic boundaries, with the topojson library to convert the uk.json TopoJSON data into GeoJSON features. The shape is filled entirely red, emphasizing the country’s outline without additional thematic data. The code relies on d3.json to load the dataset and appends the resulting path directly to the SVG.

Nov 29, 2023

Bar Chart of the 10 Highest Skyscrapers in the World

This bar chart displays the heights of five of the world’s tallest skyscrapers, using the D3 v4 library to render SVG rectangles scaled along a band scale for the x-axis and a linear scale for the y-axis. Each tower’s height value appears as a text label offset within its corresponding bar. The data is hardcoded in the script. The visualization includes axis groups for reference, with a fixed viewport size of 900 by 500 pixels.

Bar Chart of the 10 Highest Skyscrapers in the World

This bar chart displays the ten tallest skyscrapers worldwide, with building names on the x-axis and heights in meters on the y-axis. Each bar is labeled with its exact height. The visualization uses D3 v4's `d3.select`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` APIs to render an SVG with rectangles and text labels. The data is hardcoded in the script, listing structures like Burj Khalifa and Shanghai Tower.

nmbjo;

This bar chart displays population figures for ten countries, with country names on the y-axis and population values on the x-axis. The chart uses D3 v7's `scaleBand` and `scaleLinear` to map data, with `axisLeft` and `axisBottom` generating the axes. Data is loaded from a CSV file and rendered as SVG rectangles filled in steelblue, with margins applied to the chart area.

Fork of Fork of Making A Bar Chartbmnvmnvm

This bar chart displays the populations of ten countries using horizontal bars, with country names on the y-axis and population counts on the x-axis. It reads population data from a CSV and renders it as SVG rectangles with a steelblue fill. The visualization uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to map data to scales and axes. The chart includes margins and padding between bars, with the y-axis containing country labels and the x-axis positioned at the bottom.

Fork of Making A Bar Chart

Fork of Making A Bar Chart basic

This bar chart visualizes the population (in thousands) of the ten most populous countries, using a dataset loaded from a CSV file. Built with D3.js (v7) and SVG, the chart employs `scaleBand` for the categorical x-axis and `scaleLinear` for the continuous y-axis, with axes added via `axisBottom` and `axisLeft`. Bars fill with steelblue, but interactive `mouseover` and `mouseout` events change a bar’s fill to red and back to black, highlighting individual data points.

Fork of Fork of Simley Face

This example renders a single yellow smiley face in a 360-by-360 SVG using React and D3 v5. The `Face` component receives props for dimensions, colors, stroke width, eye offset and radius, mouth width and radius, and nose offset and radius, all defined in `index.js`. It uses `ReactDOM.render` to mount the app, while D3’s `range` is imported but not used in the visible code. The face is drawn with hardcoded coordinates, showing a static, composable React component driven by numeric parameters.

Fork of D3 Starter

This example demonstrates a minimal D3 setup by rendering a large, centered "Hello D3 version 7" message in the browser body using the `select` API. The page loads D3 v7.8.2 from a CDN and executes an `index.js` file that calls `select('body').text()` to inject the text. The HTML defines a 13em font size and centered alignment, while the JavaScript relies on D3’s selection module for direct DOM manipulation. It serves as a basic template for starting projects with D3 version 6 or 7.

Bar Chart of the 10 Highest Skyscrapers in the World

This bar chart displays the heights of the world’s ten tallest skyscrapers, such as the Burj Khalifa and Shanghai Tower, using a static SVG rendered with D3 version 7. The code creates scales with `d3.scaleBand` and `d3.scaleLinear`, then appends SVG `<rect>` elements for each bar. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, while mouseover and mouseout events change bar fill colors to red and black. The dataset is hardcoded in JavaScript, with heights in meters.

Barchart of the 10 Highest Skyscrapers in the USA

This example displays a bar chart of the ten highest skyscrapers in the USA, with each bar labeled with its height in feet. Built with D3 v5, it uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, rendering bars as SVG rectangles within a group. The chart reads data from a static JavaScript array, applies a blue fill to the bars, and appends text labels above each bar. The code also relies on D3 selections to append an SVG container and a title to the page.

D3rt

D3rt is an interactive particle-based visualization that assembles points into a yellow smiley face with black eyes and a curved mouth. The example uses D3’s force simulation (`d3.forceSimulation`) to position and move particles toward target coordinates defined in an SVG circle and eye shapes. Rendered on a full-screen canvas, the particles converge from a chaotic state into the face pattern, demonstrating a simple flocking or clustering effect. The code references the `cx`, `cy`, and `r` attributes from the SVG markup as the final formation targets.

Fork of England Regional Map

This example displays a map of England with its geographical regions drawn in teal, overlaid with a light gray mesh that highlights the boundaries between adjacent regions. Built with React and D3 v7, it uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to render the vector paths, and `topojson.feature` and `topojson.mesh` to process the GeoJSON data fetched from an ArcGIS service. The visualization renders entirely as SVG within a React component.

Dec 15, 2022

Fork of D3 Starter

This example demonstrates a minimal geographic visualization using D3 v7, rendering a red point at coordinates [0,0] on a Mercator-projected map. It creates an SVG canvas, applies `d3.geoMercator` for projection and `d3.geoPath` to generate the path data for the point. The circle is drawn as a single SVG path with a red fill and black stroke. The code highlights the basic setup for projecting geographic coordinates into SVG paths using the D3 library.

Dec 15, 2022

Untitled

This example demonstrates a minimal geographic map rendered as an SVG, showing a single red point at the center of a Mercator projection. The visualization uses d3.geoMercator to project coordinates, d3.geoPath to generate the SVG path for the point, and appends the resulting shape to an SVG element created with d3.select. The code sets the projection’s center, scale, and translation to position the map, and styles the point with a red fill and black stroke, providing a simple foundation for geographic data display.

Dec 15, 2022

Fork of D3 Starter

This example demonstrates a basic pie chart built with D3 version 7, rendering four slices as SVG paths. It uses the `d3.pie()` layout to compute angular data from a simple array of numbers, and `d3.arc()` to generate the path geometry. The chart is centered on a 500×500 SVG canvas, with each slice filled by a color function. The code also includes a linked video tutorial and is styled as a starter template for learning D3.

Dec 14, 2022

Fork of HTML Starter

This example displays the static text “Hello HTML!” centered on the page, styled with large CSS font sizing. Built with plain JavaScript and D3 v7, it appends an empty SVG element to the body via `select('body').append('svg')`, though no shapes or data are drawn. The HTML file loads D3 from a CDN and links an external script, demonstrating the minimal structure for combining HTML, CSS, and D3. No data sources or interactive behaviors are present.

Sep 4, 2022

Pathetic Bar Chart

This example presents a bar chart of the ten most populous countries in 2020, sourced from a UN population dataset loaded via D3’s `csv` utility. The visualization uses React state to hold the parsed data, and D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, which map country names and population values to SVG rectangles. The chart renders within an SVG element, with each bar’s width proportional to its population, while the interface displays a loading message until the data arrives.

Fork of Making a Bar Chart finished

This bar chart displays the top 10 most populous countries based on 2018 United Nations population estimates, with populations converted to raw counts from thousands. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG, including customized tick formatting that abbreviates large numbers with the `format` function. Grid lines and labels are styled via margins and axis customization, while the data is loaded from a local CSV file using `d3.csv`.

Fork of Frendering Data with React & D3

This example visualizes CSS named colors as a pie chart, where each slice represents one color and is filled with its corresponding RGB hex value. The data is loaded from a CSV file using D3’s `csv` utility, and React’s `useState` and `useEffect` hooks manage the asynchronous data fetching and component state. The pie chart is rendered with SVG paths generated by D3’s `arc` and `pie` functions, while React’s `useCallback` is imported but not utilized in the visible code.

Frendering Data with React & D3

This example shows CSS named colors loaded from a CSV file, rendering each as a horizontal stripe that fills the viewport. The visualization uses React state and the `useEffect` hook to fetch data with D3’s `csv` utility, then maps each row to a styled `<div>` whose background color comes from the `RGB hex value` column. React handles all rendering, while D3 only manages data loading.

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in a web page, displaying the file size, row count, and column count of the CSS Named Colors dataset. It uses d3.v5's `d3.csv` method to fetch and parse the data from a remote URL, then applies `d3.csvFormat` and array properties to summarize the contents. The interface is minimal, showing the statistics in a large `<pre>` element styled with CSS. The code also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse` for comparison.

Fork of Smiley Face Part VI

A grid of eighteen randomly generated smiley faces appears, each face using a yellow circle, two black eyes, and an arc-shaped mouth. The code builds every face from reusable React components like `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth drawn using d3’s `arc` generator. The React app renders a flat array of `Face` components, each receiving randomized values for stroke width, eye offset, and mouth radius. All faces are positioned at the same center point, with each SVG face rendered independently.

Fork of Let's Make a Face Part I

This example constructs a stylized, smiling face from modular React components. The face is rendered as SVG within a `FaceContainer`, composed of parametrized shapes like circles for the head, eyes, pupils, nose, and highlights, plus a mouth arc generated with the `d3.arc()` API. The arrangement and size of these features are controlled by numeric props, such as `eyeOffset`, `eyeRadius`, and `mouthWidth`, which are passed from the main `App` component. The code demonstrates a clear separation of each facial element into its own file, allowing for easy modification and reuse.

Fork of HTML Starter

This is a minimal HTML page with inline CSS and JavaScript that renders two SVG circles. The visualization uses raw SVG elements—a `<circle>` with a black fill and red stroke—positioned at different coordinates and radii. The page defines no external libraries, relying solely on the browser's native SVG support. The code sets a hidden overflow and a fixed canvas size, but does not implement any interactive or animated behavior.

Fork of Let's Make a Face Part I

A React-built smiley face uses yellow, red, and white SVG circles to render a face with eyes, nose, and a curved grin. The face is constructed from reusable components—BackgroundCircle, Eyes, and FaceContainer—that accept props for sizing and positioning. The grin uses D3's arc generator to draw a semi-circular path, while the overall SVG layout is centered via a translated group. The example demonstrates modular component composition and D3 integration within a React rendering pipeline.

Fork of HTML Starter

This example displays a large, centered "Hello HTML!" message using a basic HTML page. The code relies on plain CSS for styling the text with a 13em font size and text alignment, while the message itself is rendered as a static div element. It demonstrates the foundational structure of an HTML document with embedded styles, showcasing how CSS controls typography and layout without any JavaScript or external libraries.

Aug 27, 2022

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as a responsive SVG graphic, centered on the screen with two black eyes and a yellow circular head outlined in black. The visualization adapts to the full browser window size using `window.innerWidth` and `window.innerHeight`. The code is built with React and uses `ReactDOM.render` to mount the component, while all shapes are defined as SVG elements such as `<circle>` and `<g>` for grouping. No dataset is involved; the graphic is purely procedural based on computed dimensions and constants for eye placement and radius.

Apr 21, 2022

Fork of Smiley Face Part II

This example shows a full-window smiley face drawn with React and SVG, centering a yellow circular head with two eyes on a responsive canvas. The code calculates dimensions from `window.innerWidth` and `window.innerHeight`, then renders nested `<circle>` elements inside an SVG using React’s JSX syntax. It uses React 16.9 and ReactDOM to mount the component into the page, with hardcoded constants like `eyeOffsetX`, `eyeOffsetY`, and `eyeRadius` controlling facial feature positions. The implementation omits a mouth despite the title, focusing purely on geometric composition.

Apr 21, 2022