lanphuonglenguyen

@lanphuonglenguyen·6 public vizzes

Fork of MIAGE base

This fork demonstrates a modular D3 v5 setup with local ES6 imports and interactive SVG animations. Three circles are positioned around a central group, with hover effects via CSS and mouseover/out handlers, plus a clickable rectangle that triggers a chained `transition.attr` animation moving the red circle. It uses `d3.select`, `d3.csv` (unused), and `transition` APIs, with the message imported from `myMessage.js` and rendered into an HTML div.

Nov 9, 2022

Loading thumbnail…

dashboard

This dashboard presents a multi-panel data visualization built with Vue, using D3.js v5 to render SVG graphics with animation. It includes a bar plot displaying sales by category with hover tooltips, a scatterplot of randomly generated points, and additional plot areas within a grid layout. The bar chart reads from a CSV dataset of retail orders, applying D3 scales, axes, and transitions to update the visualization dynamically, while the scatterplot uses D3's scaleLinear and random data generation.

Oct 10, 2022

Loading thumbnail…

barGraph Projet

This bar chart visualizes country populations in 2022, using data from a CSV file and a pre-aggregated JSON dataset. It presents a dual encoding with rectangular bars and overlaid blue circles, and includes ascending/descending sort buttons with animated transitions via `transition().duration()`. The visualization uses D3 v5 scales (`scaleBand`, `scaleLinear`), axes (`axisLeft`, `axisBottom`), and mouseover tooltips to display country details. The SVG-rendered chart updates dynamically on button clicks.

Oct 5, 2022

Loading thumbnail…

barGraph

This bar chart visualizes the 2022 population of countries from a CSV dataset, with each bar's height representing population count. Blue circles overlay each bar, and users can click the Ascending or Descending buttons to re-sort the data. The visualization uses the D3 v5 library to render SVG elements with animated transitions, employing `scaleBand` and `scaleLinear` for axes, and features a tooltip on mouseover.

Oct 3, 2022

Loading thumbnail…

D3 functions

This example demonstrates D3 data joins with interactive buttons that remove or modify circles in an SVG scatterplot. Clicking "Remove" pops the last item from an array of x/y coordinates, redrawing the remaining circles; clicking "Modify" replaces one random entry with new values. The code uses `select`, `scaleLinear`, and `max` from d3 v5, along with a custom `rand` utility, to update circle positions via enter/merge/exit selections. The visualization highlights how shared update logic handles both new and existing elements.

Oct 3, 2022

Loading thumbnail…

Fork of Yeesir

A dropdown menu lists sixteen artists, from Lara Fabian to Bill Withers. Selecting an artist fetches their song lyrics from the Wasabi API, strips HTML, and counts word frequencies after removing stopwords. A lollipop chart animates the top ten recurring words, with red circles and horizontal lines drawn using D3 v5 scales, axes, and transitions.

Sep 26, 2022