Jun Yi | Dylan

@gjunyi90·5 public vizzes

Cars Scatter Plot

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car weight on the y-axis while allowing users to select different x-axis attributes via a dropdown menu. The visualization uses D3 v5 with SVG rendering, employing `d3.csv` for data loading, `d3.scaleLinear` with `d3.extent` for scaling, and `d3.axisBottom` and `d3.axisLeft` for axes. A custom dropdown menu component updates the x-axis column through `d3.select` and event handlers, while the scatter plot's circles are appended dynamically with data-bound attributes.

Dec 26, 2019

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl of fruit demonstrates the general update pattern's special cases in D3 v5, showing how data joins handle adding, removing, and modifying elements. The visualization updates five apples over time: an apple disappears, another becomes a lemon, and a third is filtered out. Using SVG, the code employs `selection.enter()`, `selection.merge()`, and `selection.exit()` to manage circles and text, with `scaleOrdinal` for color and radius mapping. The `fruitBowl` function binds fruit data to groups, updating their transforms and attributes automatically.

Dec 26, 2019

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for data joins in D3.js, showing how fruit elements enter, update, and exit within an animated SVG bowl. Apples and lemons are rendered as colored circles with labels, transitioning smoothly as fruits are removed or replaced over timed intervals. The code uses D3 v5 selections with `data()`, `enter()`, `merge()`, and `exit()` to manage DOM elements, employing `scaleOrdinal` for color and radius mapping and `transition().duration()` for animations.

Dec 26, 2019

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates the D3.js general update pattern for adding, removing, and modifying SVG circles. A row of apples animates in, then one is removed, another changes into a lemon with a color and radius shift, and finally a different apple is deleted. The code uses D3 v5's `select`, `range`, and `scaleOrdinal` for styling, along with the data join methods `enter`, `merge`, `exit`, and `transition` to animate changes over one-second durations. React-style function calls manage the state updates.

Dec 26, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiley face in an SVG. The code uses `d3.select` to append circles for the eyes, rectangles for the eyebrows, and an `arc()` generator for the mouth. A chained `transition()` with a 2000-millisecond duration moves the eyebrows up and down repeatedly, showcasing simple animation. The face is centered with a `g` element, and all shapes are drawn using D3’s SVG helper methods.

Dec 26, 2019