saifsre

@saifsre·5 public vizzes

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3.js through a dynamic bowl of fruit. It shows five apples on a bowl-shaped SVG rectangle, then handles special cases: removing the last apple, replacing an apple with a lemon, and filtering out a specific middle apple. The code uses d3.select, data joins with enter/merge/exit, and d3.scaleOrdinal for color and radius mapping. SVG circles and text elements render the fruits, with transitions triggered by setTimeout.

Feb 29, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3.js by animating a bowl of fruit where apples are eaten, replaced with lemons, and removed over time. Using D3 v5, the code binds an array of fruit objects to SVG groups, with enter, merge, and exit selections handling transitions for circles and text labels. It uses scaleOrdinal for color and radius mapping, and setTimeout calls trigger sequential updates every second to showcase special cases like modifying existing elements and filtering arrays.

Feb 12, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars in the Auto MPG dataset from the UCI Machine Learning Repository. Using D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom`, it maps each car to a semi-transparent red circle on an SVG canvas. The code loads CSV data via `csv`, parses numeric fields, and renders axes with tick marks and custom labels. The visualization omits axis domains and uses a fixed circle radius to emphasize data density.

Jan 29, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset, with each circle representing a vehicle and positioned using linear scales. It renders as an SVG using D3 v5, employing `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map values, and draw axes with tick marks. The code sets up custom margins, removes default axis domains, and adds rotated axis labels and a title, while styling circles with red fill at reduced opacity via CSS.

Jan 29, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

A line chart displays predicted and preliminary water levels in Los Angeles over time, using data from the Data Canvas - Sense Your City initiative. The visualization renders an SVG with D3 v5, employing `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for the smoothed path, and `axisLeft`/`axisBottom` for grid lines. The chart titles itself "Los Angeles Water Levels," with time on the x-axis and water level in feet on the y-axis, despite the filename referencing San Francisco temperatures.

Jan 29, 2020