Xin Li

@LiXin2014·13 public vizzes

Partition layout

This example demonstrates a partition layout using D3.js, displaying hierarchical data as nested rectangles that encode data values through their areas. The visualization uses a static hierarchical dataset with named nodes (A1, B1, C1, etc.) and numeric sizes. The code creates the layout with `d3.partition()`, sizes it to 400×200 pixels, and applies hierarchy through `d3.hierarchy` with a `sum` accessor. Rectangles are rendered as SVG elements with opacity and white strokes, and their positions and dimensions are computed from the layout’s `x0`, `y0`, `x1`, and `y1` values.

Apr 26, 2021

Loading thumbnail…

Cars Scatter Plot

This example visualizes the relationship between horsepower and weight for cars, with each car represented as a semi-transparent red circle. The scatter plot uses d3.scaleLinear for both axes, with nice-ticked scales and gridlines drawn via tickSize. Data comes from a CSV file of auto-mpg records, parsed with d3.csv and rendered as SVG. The chart includes labeled axes for "Horsepower" and "Weight," and a title, using d3.axisLeft and d3.axisBottom for tick generation.

Mar 27, 2021

Loading thumbnail…

World Countries Tree

This example visualizes the hierarchical structure of world countries, grouped by continent and region, as a horizontal tree diagram. It uses a D3 tree layout with `d3.hierarchy` and `d3.linkHorizontal` to draw curved links, while node labels are rendered as SVG text elements with font sizes scaled by depth. The visualization supports pan and zoom interaction through `d3.zoom`, and data is loaded from a JSON file. Styling is applied via CSS, with teal link strokes and white text shadows for readability.

Mar 25, 2021

Loading thumbnail…

Blank Canvas

This example shows an interactive blank canvas where a single rounded rectangle fills the entire browser viewport. The visualization dynamically adapts to the window size by reading `document.body.clientWidth` and `clientHeight`, then applying these dimensions to both the SVG container and the rectangle via D3’s `select` and `attr` methods. The code uses D3 v6 and renders purely as SVG markup.

Mar 25, 2021

Loading thumbnail…

Untitled

A flame graph visualizes hierarchical profiling data, showing how time accumulates across nested function calls. The chart uses the d3-flame-graph plugin, built on D3 v4, to render stacked rectangles sized by each function’s value. The `flamegraph()` constructor sets the width, and `d3.json` loads the data from `data.json`. Clicking a frame logs its name, while a button calls `chart.resetZoom()` to restore the original view.

Mar 25, 2021

Loading thumbnail…

ButtonClick

This example demonstrates a simple interactive button that triggers a JavaScript function when clicked. The page displays a large “Click me” button centered on a white background, and clicking it logs “Hello JavaScript!” to the browser’s console. The implementation uses plain HTML and CSS for layout and styling, with the click handler defined in `index.js` and loaded via a bundled script. React is listed as the framework, though the visible code relies directly on native DOM event handling rather than React components.

Mar 24, 2021

Loading thumbnail…

Making a Scatter Plot with D3.js

This example shows a scatter plot of the top 10 most populous countries, using population data from a CSV file and rendering circles for each country. It uses D3.js v6 with SVG, employing `scaleLinear` for the population axis, `scalePoint` for country placement, and `axisLeft`/`axisBottom` with custom tick formatting. Grid lines are drawn via negative tick sizes, and the chart includes a title and axis label.

Mar 22, 2021

Loading thumbnail…

Customizing Axes of a Bar Chart with D3.js

This example shows a horizontal bar chart of the top 10 most populous countries, with customized axes. The chart uses population data from a CSV file, displaying the country names on the y-axis and population values on the x-axis. Built with D3.js v6 and rendered as SVG, the code customizes the axes using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`. It removes default axis domains, adds grid lines via tick sizing, and formats tick labels from billions to a custom "B" suffix.

Mar 21, 2021

Loading thumbnail…

Female labor force Participation Rate

This bar chart displays the female labor force participation rate for ten countries, with horizontal bars representing percentages from 0 to 100. The visualization uses D3 v6's `scaleLinear` for the x-axis, `scaleBand` for the categorical country labels, and SVG rectangles rendered through React. Data from the CSV file is parsed and mapped to bar widths, with axes generated via `axisLeft` and `axisBottom`.

Mar 21, 2021

Loading thumbnail…

Making a Bar Chart with D3.js and SVG

This example displays a horizontal bar chart of country populations using D3.js v6 and SVG, with data loaded from a CSV file via `d3.csv`. It shows the population of each country scaled linearly on the x-axis and categorically on the y-axis using `scaleLinear` and `scaleBand`. The chart renders axes with `axisLeft` and `axisBottom`, and applies a fixed top, right, bottom, and left margin to position the plot area. Bars are appended as SVG rectangles with steelblue fill, and the code uses `select`, `max`, and `csv` from the D3 module.

Mar 20, 2021

Loading thumbnail…

Let's Make a Face with D3.js!

A yellow SVG face with black elliptical eyes and a smiling path mouth is drawn on a 960x500 canvas using D3.js v6. The code employs `d3.select` to target the SVG element and `d3.arc` to generate the mouth's path data with specified inner and outer radii and angular range. The face is centered via a group transformation, with eye positions set relative to the circle radius and vertical offsets. The example demonstrates basic SVG shape construction and attribute manipulation through D3's declarative API.

Mar 20, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes using SVG elements, styled and positioned through CSS and inline attributes. The visualization shows two circles and two rectangles, first with default black fills, then with explicit red and green fills, and finally a group with a light blue fill and black stroke. Additional lines and a path illustrate stroke styling with a thick black outline. The code uses plain SVG markup within an HTML page, with minimal CSS to reset the body margin and hide overflow. The rendering approach relies entirely on native SVG capabilities without any JavaScript libraries.

Mar 19, 2021

Loading thumbnail…

Cars Report

This example demonstrates loading car data and generating a filtered text report of vehicles priced under $2000. It shows a loading message while waiting for the data, then displays each qualifying car as a formatted line with year, make, model, and price. The code uses asynchronous JavaScript with a Promise-based `getCars()` function that simulates a two-second delay, and local ES6 modules (`generateReport`, `formatCar`) to filter and format the data. The report appears in an HTML `<pre>` element, styled with inline CSS.

Mar 19, 2021