jamesbrittan

@jamesbrittan·6 public vizzes

Fork of Stylized Bar Chart

This example displays the Iris dataset as a scatterplot, mapping sepal length and width to the x- and y-axes with circular marks. Built with React and D3 v5, it uses `scaleLinear` with `extent` to set domains and `.nice()` to smooth the tick boundaries. Custom `AxisBottom` and `AxisLeft` components render the axes, while the `Marks` component adds SVG circles with tooltips. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and styled with Poppins font and teal colored marks.

Apr 21, 2021

Loading thumbnail…

Fork of Axes with React & D3

This example displays the top 10 most populous countries as a horizontal bar chart with axes, using React state and hooks alongside D3 for data loading and scales. The `d3.csv` function fetches UN population data from 2019, while `d3.scaleBand` and `d3.scaleLinear` position bars and ticks. SVG rendering is managed by React, with D3’s `max` computing the domain. The code manually draws axis tick marks and labels, creating the grid lines shown in red.

Apr 19, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example displays population data for the top 10 countries in 2020 as horizontal bars rendered in SVG via React. D3 utilities handle data loading and scaling: `d3.csv` fetches the dataset, while `scaleBand` and `scaleLinear` map country names and population values to screen coordinates. React’s `useState` and `useEffect` manage the asynchronous data flow. Each bar is a `<rect>` element whose width reflects the population, with the country name positioned along the y-axis. The code also includes a commented-out alternative for drawing arcs with `d3.arc`.

Apr 19, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example displays a large yellow smiley face that fills the browser window, composed of a circular head, two eyes, and a curved mouth. The visualization is built with React, using SVG elements for the face shapes and the D3.js `arc` function to generate the mouth’s path. The code calculates positions and radii dynamically from the window dimensions, and the face is centered via a group transform. The smiley face adapts its size to the viewport, with a black stroke outlining the head.

Apr 13, 2021

Loading thumbnail…

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

A D3.js smiley face demonstrates declarative SVG manipulation with animated eyebrow movement. It constructs the face from basic shapes—yellow circle, eye circles, eyebrow rectangles, and an arc-generated mouth—positioned with transforms. The code uses `d3.select`, `attr`, and `append` to build the DOM, then chains `transition().duration(2000)` twice to raise and lower the eyebrows. The `arc` generator draws the mouth with specified inner/outer radii and angles, all rendered as static SVG geometry in a 960x500 viewport.

Apr 13, 2021

Loading thumbnail…

Fork of Hello HTML

This example shows a smiley face made of four SVG circles: a large yellow head with a black outline, two small black-outlined eyes, and no mouth. It uses plain SVG elements drawn directly in the HTML, with a viewBox of 960 by 500 pixels. The page body is styled with no margin and hidden overflow, and the rendering is purely declarative without any JavaScript or external libraries.

Apr 13, 2021