TimothyMiage

@TimothyMiage·9 public vizzes

barGraph

This visualization displays the 2022 population of countries as a bar chart, with options to sort the bars in ascending or descending order. The chart also includes a scatter plot overlay with circles at the top of each bar, and a tooltip showing country and population details on hover. Built with D3 v5, the visualization uses `scaleBand`, `scaleLinear`, and `axisLeft`/`axisBottom` for axes, with `transition` animations when sorting. The data comes from a CSV file, and the SVG rendering includes interactive buttons for reordering.

Jan 3, 2024

Loading thumbnail…

Random Forest Visualisation

This interactive visualization displays a random forest of decision trees trained on the Iris dataset, with each tree represented as a collapsible, animated dendrogram rendered in SVG. Accuracy levels for each tree are color-coded (red for high, blue for medium, gray for low) via CSS classes, with tooltips on hover. Users can filter trees by attribute or accuracy group using linked dropdown menus. The implementation uses D3.js v5 to parse the hierarchical JSON and construct the tree layouts, with click-to-toggle node expansion and a custom scrollable container for the horizontal forest view.

Jun 6, 2023

Loading thumbnail…

Untitled

A map of France displays colored circles sized by the percentage of survey responses from each university, with a tooltip showing the exact value on hover. The visualization loads geographic boundaries from a TopoJSON file and renders them as SVG paths using `d3.geoPath` with a custom composite projection from compmap.js. Circles are positioned via the projection, sized with `d3.scaleSqrt`, and animated on mouseover through D3 transitions, while CSV data drives the interactive tooltips.

Jun 4, 2023

Loading thumbnail…

D3 functions

This example demonstrates D3’s data-join pattern with a set of circles plotted on an SVG canvas. Buttons trigger updates: “Remove” pops a data point, while “Modify” replaces a random point with new coordinates. Using `selectAll('circle')`, `enter`, `merge`, and `exit`, it shows how to handle entering, updating, and exiting elements. The code uses D3 v5’s `scaleLinear`, `select`, and `max`, with data defined as an array of `{x, y}` objects and rendering via SVG circles.

Mar 20, 2023

Loading thumbnail…

MIAGE base

This visualization demonstrates basic D3.js interactions and animations with SVG elements. It renders three colored circles (green, blue, and red) within an SVG canvas, where the red circle responds to mouseover and mouseout events by changing color, and a rectangular click target triggers a two-stage transition that moves the red circle along a translated path. The code imports `select` and `csv` from D3 v5, uses local ES6 modules for message text, and combines CSS hover styling with programmatic event handlers and `transition().duration()` chains to show multiple ways of controlling element appearance and motion.

Mar 20, 2023

Loading thumbnail…

TITLE GOES HERE

This example demonstrates how to select and manipulate elements in an HTML document using the Document Object Model (DOM) API. It shows a basic page with paragraphs and list items, highlighting retrieval of elements by ID, tag name, and class name, as well as accessing the text content of a selected element. The code uses standard JavaScript methods like `getElementById`, `getElementsByTagName`, and `getElementsByClassName` to query and inspect the document structure, running within a React framework and a D3 v5 environment.

Mar 20, 2023

Loading thumbnail…

dboard

The dashboard presents a multi-panel overview of sales data from a CSV file, showing a US map of state-level sales, a bar chart, a scatter plot, and a sub-category pie chart. It uses D3 v6 and Moment.js to parse dates, with SVG rendering and animated transitions for axes. The map is generated via `d3.geoPath` with a GeoAlbersUsa projection and a linear color scale, while the pie chart uses `d3.pie` and `d3.arc`. Tooltips display values on hover.

Oct 10, 2022

Loading thumbnail…

map exemple

This choropleth map displays global population estimates, with countries shaded from light red to dark red according to their population size. The visualization uses `d3.geoMercator` for projection and `d3.geoPath` to render country boundaries from TopoJSON data loaded via `d3.json`, while population values come from a TSV file loaded with `d3.tsv` and mapped to colors using `d3.scaleLinear`. The map supports pan and zoom interactions through `d3.zoom`, and hover effects are styled with CSS.

Oct 3, 2022

Loading thumbnail…

Yeesir

This visualization displays the ten most frequently used words in an artist’s song lyrics, with word frequency shown as a lollipop chart of lines and red circles. A dropdown menu lets users select from a fixed list of artists, triggering a fetch request to the Wasabi API to retrieve and parse lyric data. The chart uses D3 v5 scales, axes, and transitions to animate updates as the selected artist changes.

Sep 21, 2022