renjiez

@RJzhu123·5 public vizzes

Let's make a face with D3.js!

This example demonstrates how D3.js can create a smiling face with animated, moving eyebrows. It shows fundamental DOM manipulation by using `d3.select`, `d3.range`, and `d3.scaleOrdinal` to bind and update data-driven SVG elements. The `fruitBowl` function manages enter, update, and exit selections with `transition().duration()` for smooth changes, while the eyebrow animation is driven by JavaScript `setTimeout` calls that modify the fruit array and re-render.

Jul 26, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City, with time on the x-axis and temperature in degrees Celsius on the y-axis. The chart uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` to map the data, `axisBottom` and `axisLeft` for labeled axes, and a `line` generator with `curveBasis` to draw a smooth curve. The visualization includes gridlines, axis labels, and a title, with data parsed from a CSV file.

Jul 25, 2020

Loading thumbnail…

Let's make a face with D3.js!

This chart displays the population of the top 10 most populous countries using a bubble plot, with circle size fixed and position encoding population along the x-axis and country along the y-axis. The data is loaded from a CSV file and processed before rendering. Built with D3.js v5, the visualization uses `d3.scaleLinear`, `d3.scalePoint`, `d3.axisLeft`, and `d3.axisBottom` to construct the SVG elements, with circles styled in steel blue via CSS.

Jul 24, 2020

Loading thumbnail…

Cars Scatter Plot

A scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red semi-transparent circles represent individual vehicles, with axes labeled and a title above. The visualization uses D3 v5 functions `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `format` to load data, scale values, and render SVG axes and points. Grid lines and rotated axis labels aid readability.

Jul 24, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates a D3.js visualization that automatically redraws itself to match the browser window’s current dimensions. It uses CSS to make a chart container fill the viewport, then reads the container’s `clientWidth` and `clientHeight` properties to size an SVG element accordingly. The visualization draws two thick, semi-transparent green lines forming an X, with coordinates recomputed on every window resize event via a `redraw` function. The code relies on the D3 v5 selection API, `d3.select`, and the `selectAll`/`enter`/`merge` methods to update the SVG lines.

Jul 24, 2020