Zihan (Lexie) Zhou

@LexieZhou·5 public vizzes

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG Data Set. Each red semi-transparent circle represents a car, positioned along linear scales for both axes, with tick marks and axis labels rendered in SVG. Built with D3 v5, the code uses `d3.csv`, `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to load data, compute domains, and draw the chart within a specified margin layout.

Mar 15, 2023

Loading thumbnail…

Customizing axis!

A bar chart displays the top 10 most populous countries from a CSV file, with the population values formatted in a compact notation using `d3.format('.3s')` and replacing "G" with "B" to indicate billions. The chart includes a title, axis labeling, and custom tick grid lines, all rendered via SVG. The y-axis is simplified by removing its domain line and tick marks, while the x-axis features grid lines extending across the plot area using the `axisBottom` function's `tickSize` parameter. Styling is applied via CSS classes for the title and tick elements.

Mar 6, 2023

Loading thumbnail…

Make a bar chart!

This example shows a horizontal bar chart of population estimates for ten countries, sourced from the World Population Prospects 2017. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with `d3.axisLeft` and `d3.axisBottom` to render ticks. Rectangles are appended to an SVG group after applying the margin convention. Data is loaded from a CSV file and converted to numeric values before rendering.

Mar 6, 2023

Loading thumbnail…

Let's make a face using D3.js!

This example composes a simple cartoon face from basic D3.js shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth. The code uses D3 v7's `select` and `append` to build the SVG structure, with a `transition().duration(200)` animation that momentarily raises both eyebrows. The face is centered in a 960×500 SVG canvas, with all facial features positioned relative to the center using translation transforms and fixed pixel offsets.

Mar 6, 2023

Loading thumbnail…

Hello World

This example demonstrates a simple interactive message display. It shows how to use ES6 modules and D3’s import system by loading D3 from UNKP, importing a local `myMessage.js` module, and updating HTML content via `document.getElementById().textContent`. The text is styled with CSS, centered and enlarged, while the JavaScript sets the message to “Hi” on load. The code highlights basic DOM manipulation and module imports in a minimal VizHub setup.

Mar 2, 2023