Tchea JiaWei

@MasqueCrow·3 public vizzes

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red semi-transparent circles mark each vehicle, with axes labeled accordingly. The visualization uses D3 v5 with d3.csv, d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft to map the data, render SVG circles, and draw gridlines and labels. The code imports specific functions from D3 via ES modules and formats the chart with custom margins, tick styling, and a title.

Jul 6, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries using a bar chart with no axes, rendered as SVG elements. It loads population data from the United Nations World Population Prospects 2019 dataset via `d3.csv`, then uses React’s `useState` and `useEffect` hooks to fetch and store the data. The chart maps each country to a rectangle, sizing bars with `scaleBand` and `scaleLinear` from d3.v5, while the overall layout is managed through React and ReactDOM.

Jul 3, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a yellow smiley face using React and D3 v7, with an SVG drawing of a circular head, two eyes, and a curved mouth. The face is built from primitive shapes: circles for the head and eyes, and a D3 `arc` generator for the mouth, which is positioned using an inner and outer radius with angular start and end points. The visualization is centered via an SVG `<g>` transform and uses static, hardcoded data, demonstrating a simple, declarative approach to combining React components with D3’s geometry utilities.

Jul 2, 2021