Remustus

@Remustus·14 public vizzes

Smiley Face Part V

This example renders a smiley face composed of SVG circles and an arc-shaped mouth, split across three React components. The background circle, eyes, and mouth are defined in separate files and combined in the main `App` component. D3’s `arc` generator creates the mouth path with specified inner and outer radii and start/end angles, while React fragments allow multiple eye circles without extra DOM nodes. The SVG is centered with a transformed group, and all styling (yellow fill, black stroke) is applied via JSX attributes.

Oct 29, 2021

Loading thumbnail…

Smiley Face Part IV - epic 8

A yellow smiley face rendered as a React component uses D3's `arc` generator to draw a thick mouth, with SVG circles for the eyes and background. The face is centered on a 960 by 500 SVG canvas, with the background circle's radius set to half the height minus half the stroke width. React 16.9 and D3 v5 are loaded via UMD scripts, and `ReactDOM.render` mounts the SVG tree to the DOM. The example demonstrates combining React's declarative components with D3's geometry utilities for static vector graphics.

Oct 16, 2021

Loading thumbnail…

Smiley Face Part III 1:30

A cheerful smiley face is rendered as an SVG graphic using React and D3. The face consists of a yellow circle for the head, two black eye circles, and a curved mouth drawn with D3's `arc` function. The visualization programmatically defines the face's dimensions and positions, including the eye offset and mouth radius. The code combines React's component structure with D3's SVG path generation to produce the final image.

Oct 16, 2021

Loading thumbnail…

FFace Part II - toka kerta

This example shows a yellow smiley face centered on the screen, with black-outlined circular eyes and a face that scales to fill the browser window. The face is built using React components that render SVG elements, with the `App` function returning a `<svg>` element containing three `<circle>` shapes positioned via a `<g>` transform. The code uses React 16.9 and ReactDOM to mount the visualization, computing dimensions from `window.innerWidth` and `window.innerHeight` to make the face responsive, though the mouth is not implemented in the visible code.

Oct 16, 2021

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository’s Auto MPG data set. Each red, semi-transparent circle represents a single car, with position determined by its horsepower on the x-axis and weight on the y-axis. The visualization uses D3 v5, loading data via `csv`, scaling with `scaleLinear`, and generating axes with `axisBottom` and `axisLeft`. Grid lines are created by configuring tick sizes, and the SVG rendering is styled with CSS. The chart also includes labeled axes and a title.

Oct 7, 2021

Loading thumbnail…

Smiley Face Part VI - variations 16 faces

A grid of sixteen smiley faces renders as React components, each with randomized facial feature dimensions. The faces use SVG circles for backgrounds and eyes, while the mouth is drawn with a D3 arc path generator. Random values for stroke width, eye offset, eye radius, and mouth properties create visual variety across the grid. The code imports `range` from d3 to generate the grid indices and renders each face with randomized parameters via `Math.random()`.

Sep 19, 2021

Loading thumbnail…

a face with D3.js!, Migusti

A smiling face rendered in SVG animates as its eyebrows rise and fall, demonstrating fundamental DOM manipulation with D3.js. The code uses d3.select to append circle, rect, and path elements, positioning them via SVG transform attributes. Eyebrow movement is created with chained transition() and duration(2000) calls, while the mouth uses d3.arc with defined innerRadius, outerRadius, and start/end angles. The yellow face and black features are drawn entirely through D3’s data-join-free imperative API on a fixed 960×500 canvas.

Sep 3, 2021

Loading thumbnail…

Smiley part2, Migusti

A yellow smiley face with black eyes and a curved mouth is centered on an SVG canvas. Its two rectangular eyebrows animate, moving upward and then returning to their original position in a repeating two-second cycle. Built with D3.js v5, the example uses DOM selection and appending to construct each shape, while chained `transition().duration()` calls on the eyebrow group create the motion. The mouth is drawn using D3's arc generator with specified inner and outer radii and angular range.

Sep 1, 2021

Loading thumbnail…

Smiley, part 1, Migusti

A static SVG drawing shows a partial smiley face: one large yellow circle with a black outline, and two smaller unfilled circles positioned as eyes. The code uses raw SVG elements nested directly in the HTML body. The circle coordinates are manually set, with the larger shape centered at (480, 250) and a radius of 245, while the two eye circles are placed at (350, 180) and (600, 180). The rendering uses only basic SVG shapes without any JavaScript libraries or data-driven generation.

Sep 1, 2021

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values in thousands. It demonstrates customized D3 v5 axes, including a bottom axis with tick formatting that converts large numbers using `d3.format('.3s')` to compress values like millions into abbreviated forms. The y-axis uses `d3.scaleBand` for country categories, while the x-axis uses `d3.scaleLinear`. Custom styling, tick sizes, and axis labels are applied via CSS classes, and the chart is rendered as SVG.

Oct 12, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each red semi-transparent circle representing a vehicle from the UCI Machine Learning Repository Auto MPG dataset. The chart displays axes with gridlines and labels for both variables, along with a title. It uses D3 v5 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and SVG rendering to map data values to circle positions. The visualization demonstrates how higher horsepower generally correlates with greater vehicle weight.

Oct 12, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create static vector graphics. It shows circles, rectangles, lines, and a path, with colors applied both through inline attributes like `fill="red"` and `fill="#83cc2a"`, as well as through CSS classes defined in `styles.css`. The `<g>` elements use the `transform` attribute to group and position shapes, including `scale` and `translate` operations. Rendering relies purely on SVG within an HTML document, with no JavaScript libraries, and the external stylesheet controls stroke properties for the line and path elements.

Oct 6, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects estimate. It builds on a basic bar chart example by customizing the axes: the y-axis removes its default domain and tick lines, while the x-axis uses a custom tick format that converts abbreviations (G to B) and draws horizontal gridlines via negative tick sizes. The chart is rendered using D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` within an SVG, with styling applied through CSS classes.

Oct 6, 2019

Loading thumbnail…

Customizing Axes

Oct 6, 2019