Rambo-chan

multiple lines better func

This interactive chart compares two series of operational data over time using multiple lines, each with a distinct curve fitting method. The visualization uses `d3.tsv` to load the dataset and `d3.scaleLinear` for axes, with `d3.line` and `d3.curveStep` and `d3.curveNatural` to render the lines, while circles mark each data point. It also includes a categorical x-axis for operation types via `d3.scaleBand`. The chart is rendered as an SVG, sourced from the example.tsv file.

Mar 17, 2020

HTML Starter

This example shows a minimal HTML page displaying the text “Hello HTML” centered on a white background with enormous font sizing. It uses a plain HTML document with embedded CSS styling, relying on the browser’s default rendering engine without any JavaScript libraries or external data sources. The page’s `<style>` block sets body alignment and font size, while the `<body>` contains the static text content. It serves as a bare-bones starting point for web-based visualizations, contrasting with the framework-heavy React starter linked in its README.

Let's Make a Face Part I

This interactive visualization constructs a human face from a network of nodes and edges, using a physics-based layout to organize the features into a recognizable profile. The SVG scene is rendered with D3.js, and the arrangement is driven by a force-directed simulation, likely `d3.forceSimulation`, which positions the nodes based on attractive and repulsive forces. The face emerges as the system settles into a stable configuration, with nodes representing key facial landmarks like the eyes, nose, and mouth. The static HTML page loads the D3 library and a separate `bundle.js` script to execute the layout algorithm, producing a stylized, abstract portrait from raw graph data.

Let's Make a Face Part I

A red circle with two black eyes and an arc-shaped mouth forms a simplified smiley face in this SVG visualization. The code uses D3.js v5 selection and arc APIs to construct the face, positioning the eyes with fixed spacing and offset values. The mouth is drawn as a path using the arc generator with specified inner and outer radii and angle ranges, demonstrating basic geometric shape composition in D3.

Let's Make a Face Part I

This example shows the construction of a simple smiley face using basic SVG shapes. D3.js version 5 draws a yellow circle for the head, two black circles for eyes, and an arc-generated mouth path, all positioned relative to the SVG’s width and height. The code uses `d3.select`, `svg.append`, and the `d3.arc()` API to define the mouth’s inner and outer radii and angular range, with all elements centered on a 960×500 canvas.

First D3 try

A single red circle is drawn at the center of a 960 by 500 pixel SVG canvas, with its radius set to half the canvas height. The example demonstrates a minimal first use of D3 v5 within a React framework, where the `d3.select` function targets the SVG element and `.attr` sets the circle’s radius, x-coordinate, and y-coordinate. The code uses the D3 `append` method to create the SVG circle, rendering directly to the SVG output.

HTML Starter

This example shows a minimal HTML page displaying the text “Hello HTML” centered on a white background with enormous font sizing. It uses a plain HTML document with embedded CSS styling, relying on the browser’s default rendering engine without any JavaScript libraries or external data sources. The page’s `<style>` block sets body alignment and font size, while the `<body>` contains the static text content. It serves as a bare-bones starting point for web-based visualizations, contrasting with the framework-heavy React starter linked in its README.

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements (sepal length, sepal width, petal length, petal width, or species) to plot on the x- and y-axes via dropdown menus. Written in React and rendered as an SVG, the chart uses D3’s `scaleLinear` and `extent` for axes and scaling, with custom tick marks and labels. A tooltip shows the x-value on hover. The code also imports the `react-dropdown` library for the menus.

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements (sepal length, sepal width, petal length, petal width, or species) to plot on the x- and y-axes via dropdown menus. Written in React and rendered as an SVG, the chart uses D3’s `scaleLinear` and `extent` for axes and scaling, with custom tick marks and labels. A tooltip shows the x-value on hover. The code also imports the `react-dropdown` library for the menus.

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. SVG rectangles render the bars, with axis components built from custom React functions that map ticks using `d3.format` to abbreviate population values. The Poppins font and teal color scheme give the chart its distinctive stylized appearance.

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data. The visualization uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear for axes and positioning. Axis components generate tick marks and labels, while rectangular marks include native SVG tooltips. The chart applies a custom Poppins font and muted teal color scheme, with population values formatted using d3.format to abbreviate large numbers.

React Starter

This example demonstrates how to integrate D3 with React by rendering a force-directed graph. It uses `d3.forceSimulation` to compute node positions and `d3.forceLink` for edge connections, while React handles the SVG rendering of circles and lines. The visualization updates reactively as the simulation ticks, illustrating a pattern for combining D3’s layout algorithms with React’s component lifecycle. The data is a static array of nodes and links defined in the code, serving as a reusable starter template for more complex interactive network diagrams.