instant2333

@instant2333·7 public vizzes

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation in D3.js. The code builds the face using SVG elements via `d3.select`, `append`, and shape attributes, then animates the eyebrows with chained `transition().duration()` calls on a transform. A mouth is drawn using the `d3.arc` path generator. The example runs entirely in the browser without external data, relying on D3 v5’s selection and transition APIs to update the SVG structure over time.

Feb 5, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 United Nations estimates, with values scaled per thousand. It demonstrates custom D3 axes, including a formatted bottom axis that abbreviates numbers (e.g., billions as "B") and a left axis with removed domain lines. The SVG rendering uses d3.scaleLinear, d3.scaleBand, axisBottom, and axisLeft, with tick styling and an axis label defined via custom CSS classes.

Feb 4, 2020

Loading thumbnail…

Let's make a face

This example creates a simple SVG visualization titled “Let’s make a face” using D3.js v5 within a React framework. The code selects an SVG element and applies a red background color via `d3.select` and `style`. It renders a basic blank canvas with a fixed width of 960 pixels and height of 500 pixels, with a plain HTML page containing a header and a div element. The visualization demonstrates minimal D3 SVG manipulation, showing how to style an SVG container directly.

Jan 26, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” centered on the screen with a font size of 13em. The code uses plain HTML with inline CSS in a `<style>` tag to handle text alignment and sizing. No external libraries or data sources are involved; the page renders static text directly through the browser’s default HTML rendering. It serves as a bare-bones starting point for web visualizations, contrasting with the React-based starter that adds component structure.

Jan 26, 2020

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders static text content without any data visualization. It uses ReactDOM.render() to mount an App class component into the DOM root, displaying two simple div elements. The page loads D3 v5 from a CDN, though the code does not invoke any D3 functions or process any data. The implementation serves as a starter template for integrating D3 with React, showing the basic project structure with separate HTML and JavaScript files.

Jan 26, 2020

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the static text "aaaa" inside a div. The code uses React and ReactDOM to mount an `App` class component into the `#root` element of the HTML page, with a CSS class styling the message at 13em font size. The component is defined in `App.js` and imported into the main entry point, while the browser loads React libraries from a CDN.

Jan 26, 2020

Loading thumbnail…

React Starter

This example shows a minimal React application that renders the text “Hello React!” centered on the page. It demonstrates the basic setup for embedding a React component into an HTML document using React 16.10 and ReactDOM. The index.html loads the production builds of React and ReactDOM from a CDN, then mounts the component to a `#root` div via `ReactDOM.render`. The component itself is a simple functional component returning a styled div element.

Jan 26, 2020