Sybil Jas

@sybiljas·5 public vizzes

Cheap Tricks for Interaction

This interactive choropleth displays world countries colored by name using a categorical color scheme. The visualization uses D3's `geoPath` and `geoNaturalEarth1` projection to render the map from TopoJSON data loaded from the world-atlas package, with country names from a TSV file. A zoom interaction, implemented via D3's `zoom` API, lets users pan and scale the map. Hovering over a country turns it red via CSS, while the underlying sphere remains blue.

Feb 23, 2020

Loading thumbnail…

Let's make a map with D3.js!

A world map is rendered on a blue sphere using D3.js v5, with countries shown as light green paths. The visualization loads geographic data from the world-atlas TopoJSON file via `d3.json` and converts it to GeoJSON using the `feature` function from topojson. The `geoNaturalEarth1` projection and `geoPath` generator draw the countries and the sphere outline, while SVG elements are selected with `d3.select`. The map is static, with no interaction or animation.

Feb 23, 2020

Loading thumbnail…

Color and Size Legends

This example demonstrates how to build custom legends for both ordinal color scales and quantitative size scales using D3 v5 within a React application. The color legend maps fruit categories (apple, lemon, lime, orange) to corresponding colors, while the size legend uses `scaleSqrt` to represent numeric values from 0 to 10 with proportional circle radii. Both legends employ the general update pattern with data joins on SVG groups, using `selection.enter()`, `merge()`, and `exit()` to handle dynamic updates. The code also showcases `sizeScale.ticks()` to generate clean tick values for the size legend.

Feb 23, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a simple data-join visualization of fruit shapes, showing apples and lemons as colored circles with labels. It uses D3 v5’s `scaleOrdinal` to map fruit types to colors (red for apples, yellow for lemons) and radii (50 vs. 20 pixels). The code employs the general update pattern with `selection.selectAll`, `enter`, `merge`, and `exit` to handle adding, removing, and updating fruits over time via `setTimeout`. The visualization renders inside an SVG container within a React scaffold, with a rounded rectangle representing a bowl.

Feb 23, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the General Update Pattern with special cases, animating a bowl of fruit where data joins and exits alter the visual composition. Using D3 v5 with SVG rendering, it shows how elements transition, merge, and are removed when the dataset changes. The code employs `d3.select`, `data.join`, and `transition.attr` to handle enter, update, and exit selections, with circles and text representing fruit types. Rendering is entirely in-browser, driven by an interactive button that cycles through datasets, highlighting edge cases like overlapping transitions and multi-element updates.

Feb 23, 2020