andy-yc-lin

@andy-yc-lin·11 public vizzes

Bowl of fruit

This example demonstrates the dynamic addition and removal of fruit shapes in an SVG bowl, where each fruit is represented as a colored circle with a label. The visualization uses D3 v5’s data join pattern to bind fruit data to SVG circle and text elements, with smooth transitions animating the circles’ positions and radii over one second when data updates. React serves as the integration framework, while D3’s ordinal scales map fruit types to colors and sizes, and exit selections shrink departing circles to zero radius before removal.

Jan 31, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, rendered without axes for a minimal aesthetic. The visualization uses React to manage state and D3 v5’s `csv` loader to fetch and process population data, then maps each country to a rectangular mark via SVG. The bars are styled with a teal fill and a Poppins font, while tooltips show the exact population values on hover. The chart’s simplicity emphasizes raw population comparisons while omitting traditional chart furniture.

Jan 31, 2020

Loading thumbnail…

Temp in SF Area Chart

This area chart visualizes temperature over time in San Francisco, with the curve’s shape revealing trends and fluctuations. The visualization uses D3 v5’s `area`, `curveBasis`, `scaleTime`, and `scaleLinear` to generate a smooth filled path, while `axisBottom` and `axisLeft` add labeled, gridded axes. Data is loaded from a CSV file via `csv()`, with timestamps parsed as dates and temperatures converted to numbers. The SVG output renders with styled tick marks, axis labels, and a title, all configured through a `margin` layout and responsive sizing.

Jan 24, 2020

Loading thumbnail…

Temp in SF Line Chart

This line chart shows the temperature in San Francisco over time, with a smooth curve connecting data points from a CSV file. The SVG rendering is built with D3 v5, using `scaleTime` and `scaleLinear` for the axes, `line` with `curveBasis` for the smoothed path, and `axisBottom` and `axisLeft` for grid lines and ticks. The title, axis labels, and margin-based layout structure the visualization, while CSS styles the tick text and line.

Jan 24, 2020

Loading thumbnail…

Temp in SF Scatter Plot

This scatter plot visualizes temperature readings in San Francisco over time, with each circle representing a temperature measurement at a specific timestamp. The visualization uses d3.scaleTime and d3.scaleLinear to map the data, with axes generated via d3.axisBottom and d3.axisLeft. The code loads data from a CSV file using d3.csv, parses timestamps and temperatures, then renders SVG circles with steelblue fill. Grid lines are created through tick sizing, and axis labels appear rotated along the y-axis.

Jan 24, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. Each semi-transparent blue circle represents a car, positioned by linear scales, with axis labels and a title. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs, rendering to SVG. Data is loaded asynchronously via `csv`, and numeric fields are parsed before rendering.

Jan 24, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, using a linear scale for population and a point scale for country names. The visualization employs D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering SVG circles with fixed radii. Data is loaded from a CSV file with d3.csv, and population values are converted to numbers and multiplied by 1000. The chart includes formatted axis tick labels using d3.format’s `.3s` notation and gridlines via negative tick sizes.

Jan 24, 2020

Loading thumbnail…

Bar Chart

A bar chart displays the ten most populous countries, with horizontal bars scaled by population and a log-scale-free linear axis labeled in billions. Population values are read from a CSV file via `d3.csv` and converted to numbers before rendering. The chart uses `d3.scaleLinear` and `d3.scaleBand` for positioning, `d3.axisLeft` and `d3.axisBottom` for axes, and SVG rectangles for bars. Tick lines extend across the plot, and a title and population label are added as text elements.

Jan 24, 2020

Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries, with population values from the 2018 United Nations World Population Prospects estimate. It highlights D3 axis customization by removing default domain lines, adding tick lines across the chart, and formatting tick labels with `d3.format`. The visualization uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleBand` for scales, and `d3.axisLeft` and `d3.axisBottom` for axes, rendering as SVG. A custom axis label and a chart title are appended manually.

Jan 24, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. It uses D3 v5 with an SVG rendering, employing `scaleLinear` and `scaleBand` for axes, and `axisBottom` with a custom tick formatter that converts billions to "B" labels. The chart also removes default axis lines and adds a title and axis label. The data is loaded via `csv` from a local file, with population values scaled by 1000.

Jan 17, 2020

Loading thumbnail…

Shapes with SVG and CSS

A stylized face built from geometric primitives is rendered using SVG elements styled and positioned through D3.js. The code demonstrates the use of D3's `select`, `append`, and `attr` to create and configure circles for the face and eyes, alongside a path that uses the `arc` generator to form a mouth shape. Data for element positions and sizes are derived from the SVG's `width` and `height` attributes, showcasing dynamic, attribute-driven layout. The example relies on React for the overall application structure, with rendering handled via raw SVG within the HTML document.

Jan 9, 2020