abcz1234

@abcz1234·11 public vizzes

hovering test

Five circles represent fruit in an SVG bowl, using d3.scaleOrdinal for color and radius mapping. Hovering over a circle highlights it with a black stroke via mouseover and mouseout events. Circles animate in and out with a one-second d3 transition, while the dataset changes over time by removing fruit and mutating one apple into a lemon. Rendering uses d3 v5 with the enter, merge, and exit pattern for data joins.

Jan 4, 2020

Loading thumbnail…

click test

Fruit emoji represented as colored circles enter, update, and exit with animated transitions. Clicking a circle selects it, adding a black stroke, and re-renders the bowl; the code uses `d3.scaleOrdinal` for color and radius, `selection.enter`/`merge`/`exit`, `transition.attrTween`, and `on('click')` handlers to mutate a selected ID. Data is an in-memory array of 5 fruit objects, modified every second to demonstrate live changes, rendered as SVG circles within a fixed 960×500 viewport.

Jan 4, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

Five apples with unique IDs are drawn in an SVG bowl, then a sequence of updates adjusts the fruit: an apple is eaten, one becomes a lemon, and another is removed. The code demonstrates the general update pattern in D3 v5, using `selection.merge` and keyed data joins to handle entering, updating, and exiting elements. It employs `scaleOrdinal` for color and radius, and `transition` for smooth visual changes over 1000 milliseconds.

Jan 3, 2020

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore relationships between variables in an auto-mpg dataset by selecting which columns appear on each axis via dropdown menus. The visualization uses D3 v5’s `select`, `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration().delay()` to animate circles from the plot’s center to their new positions whenever a menu selection changes. The scatterPlot module builds SVG axes with tick lines and labeled text, while the dropdownMenu module generates the HTML select elements.

Jan 3, 2020

Loading thumbnail…

update test

A row of five apples animates by shrinking one at a time, then one fruit changes from an apple to a lemon, with the remaining apples continuing to disappear. The example uses the `d3` selection, merge, and transition APIs to update SVG circle positions, radii, and fills over 1000-millisecond durations as the dataset changes at timed intervals. It demonstrates an incremental update pattern with `enter`, `merge`, and `exit` transitions applied to dynamic data.

Jan 3, 2020

Loading thumbnail…

area

This area chart displays temperature readings from San Francisco over time, loaded from a remote CSV file with D3’s `csv` function. The x-axis uses a time scale via `scaleTime`, while the y-axis uses a linear scale with `scaleLinear`. The filled region is generated with D3’s `area` generator, using `curveBasis` for smoothing, and rendered as an SVG path. Gridlines are drawn by configuring `axisBottom` and `axisLeft` with negative tick sizes. Interactive hover effects are not implemented; the visualization focuses solely on the static area representation.

Jan 2, 2020

Loading thumbnail…

line

This visualization shows the temperature in San Francisco over time, using a smooth line to connect data points across a time axis. The line and axes are rendered as SVG paths, with temperature on the y-axis and time on the x-axis. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and the `axisBottom` and `axisLeft` components. Data is loaded from a CSV file via `csv` and parsed into `Date` and numeric values before being passed to the rendering function.

Jan 2, 2020

Loading thumbnail…

axis

This example shows a scatter plot of automobile data from the auto-mpg dataset, with horsepower on the x-axis and weight on the y-axis. Orange semi-transparent circles represent individual cars, while gridlines and axis labels are generated using d3-axis. The code uses d3.csv to load the data, d3.scaleLinear with .nice() for the scales, and d3.extent to set domains. The SVG rendering includes custom margin-based positioning, rotated axis labels, and a title, with axes styled by removing the domain line and adding tick padding.

Jan 2, 2020

Loading thumbnail…

axis

This horizontal bar chart displays the population of ten countries, using orange bars sorted by country name. The visualization relies on D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Population values from the CSV are multiplied by 1000, with tick labels formatted using `format('.3s')` and converting G to M. SVG rendering includes margins, a population axis label, and a decorative "Amazing" title, while axis lines and ticks are selectively removed for a cleaner design.

Jan 1, 2020

Loading thumbnail…

Face

A smiling face drawn with orange SVG circles and arcs animates its eyebrows and mouth. The code uses D3 v5’s `select`, `arc`, and chained `transition` calls to raise and lower rectangular eyebrows and to expand and contract the mouth’s outer radius over two-second intervals. Static features include circular eyes and a fixed head outline, all centered within a 960 by 500 SVG canvas.

Dec 29, 2019

Loading thumbnail…

bar

A horizontal bar chart displays population figures for ten countries, sorted by value, with each bar’s length proportional to its population. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles and axes. Data is loaded from a CSV file and parsed with `csv`. After initial rendering, the chart animates by applying a `transition` with a staggered `delay` to reposition the bars, though the animation targets undefined scales and does not visibly alter the chart.

Dec 29, 2019