maxime-plantard

@maxime-plantard·5 public vizzes

Doodle Jump GL

A doodler character jumps upward through a vertical grid of platforms, with controls for left, right, and upward movement. The game tracks a score, detects collisions with platforms to trigger jumps, and ends when the doodler falls below the bottom. Rendered as an HTML/CSS animation in a 400-by-500 grid, it updates state every 50 milliseconds via `setInterval`, with keyboard input handled through a `keydown` event listener. Platforms reset when they scroll past the bottom, and the game-over screen displays the final score.

Oct 10, 2020

Loading thumbnail…

Progress Map ES6

This interactive visualization displays the assembly progress of an aircraft, where each component is colored on a red-yellow-green scale based on its percentage of completion. Users can manually adjust each part’s progress through sliders or text inputs, or randomize all values, while a legend maps colors to percentages. Built with D3 v5, it renders the aircraft as SVG paths from a structured data file, includes zoom and pan via `d3.zoom`, and animates updates with `transition().duration()`. The color scale uses `d3.interpolateRdYlGn`.

Oct 3, 2020

Loading thumbnail…

Dashboard ES6

A dashboard with KPI cards and an animated multi-line chart, rendered in SVG with D3 v5. Users filter KPIs and select projects from dropdowns, triggering updates to the card displays and the line series (planned, earned, and actual values). The chart uses D3 scales, axes, and transitions, with a legend, and Bootstrap styles the interface, while Font Awesome provides icons.

Oct 3, 2020

Loading thumbnail…

Dashboard

This dashboard presents project health metrics—cost, schedule, progress, CPI, SPI, resources, and issues—for a fictional project in a grid layout. It combines a D3.js v5 line chart tracking actual, baseline, and forecast costs over time with a D3 donut chart showing issue status. The interface includes Font Awesome icons in KPI cards, a filter panel, and an interactive issue detail table.

Oct 3, 2020

Loading thumbnail…

Gantt

This interactive Gantt chart visualizes project tasks, their durations, dependencies, and resource allocation across a timeline. It renders task bars in an SVG, with predecessor links drawn as paths and arrows to show task sequencing. A separate SVG area displays resource usage over time as an area chart, with a selector to switch between resources and an adjustable daily capacity input. The visualization uses d3.v5 for scales, axes, and SVG rendering, alongside custom JavaScript functions for date calculations and table generation from the provided task data.

Aug 24, 2020