Duyun Tan

@ellieduyun·6 public vizzes

Untitled

This example displays a music recommender interface listing tracks with their title, artist, and album, alongside a form to add new entries. Built with React for the client-side framework, the page’s core table and submission form are rendered through server-side templates, using Jinja2-style looping and form actions. The React code, however, only renders a static “Hello React!” message and does not interact with the table or data. The underlying data model and persistence are not visible in the provided files.

May 22, 2020

Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed D3.js radar chart compares audio features of Spotify tracks, such as danceability, energy, and liveness, with user-entered track names. It renders an animated, SVG-based radar plot using D3.js v3, with a glowing grid, radial axes, and smooth, rounded strokes for the data polygons. The visualization supports searching for a single track or comparing two tracks side by side. It reads from the SpotifyAudioFeaturesApril2019.csv dataset and uses a custom radarChart.js function adapted from Nadieh Bremer’s VisualCinnamon design.

Feb 27, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. It demonstrates axis customization using d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, including custom tick formatting that converts billions to the letter B. The chart removes default axis lines, adds grid lines via tickSize, and includes styled axis labels and a title. Data is loaded as CSV and rendered as SVG rectangles with steelblue fill.

Feb 24, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js using SVG circles and a path for the mouth, generated with the `arc` helper. The face's eyebrows, rendered as rectangles, animate upward and back down via chained `transition` calls with a 2000-millisecond duration. The code demonstrates fundamental DOM manipulation through D3 selections, appending elements to an SVG group, and using attribute setters with numeric values derived from the viewport dimensions.

Feb 24, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling, showing how circles, rectangles, lines, and paths are rendered on a 960x500 canvas. A group element applies shared fill and stroke properties to multiple shapes, while a separate class selector styles paths with rounded line joins and caps. The SVG is scaled using a transform, and colors are set via presentation attributes or CSS rules. The code uses plain SVG APIs within an HTML document, with no external JavaScript libraries.

Feb 24, 2020

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of used cars, filtering and formatting a small dataset into readable lines. It shows how JavaScript modules handle asynchronous data and string generation. The code uses `getCars()` with a `Promise` and `setTimeout` to simulate a two-second loading delay, while `generateReport` chains `filter`, `map`, and `join` to prepare the output. The report renders in a `<pre>` element, initially showing "Loading..." and later the formatted list of cars under a price threshold. The example highlights ES module exports, template literals, and array methods like `filter` and `map`.

Feb 24, 2020