PNP - Projetos no Prazo

100%

PNP - Projetos no Prazo

✓ Published1🌍 Public

Last edited Oct 28, 2020

Created on Oct 25, 2020

This visualization shows a project management framework called "PNP - Projetos no Prazo," combining a triangular header for the main metric with four vertical pillars labeled Estrutura, Duração, Simulação, and Priorização, sitting on a base of supporting fundamentals like Análise, Qualidade, Gerenciamento do Cronograma, and Estatística. Built with React 16.12 and D3 v5, it renders entirely as SVG, using reusable React components for each structural layer. The layout uses computed gaps and fixed pillar widths to distribute elements evenly across the 320-pixel-wide composition.

AI-generated description

PNP - Projetos no Prazo

Utilizando React

MIT Licensed

Similar vizzes

Loading thumbnail…

PNP - Projetos no Prazo

A data-visualization example shows the geometric composition of a project-management chart titled "PNP - Projetos no Prazo," using only basic SVG shapes: a dark blue triangle for the main indicator, four purple vertical pillars, and orange and green horizontal rectangles as foundations. The visualization uses React to render SVG elements, with d3.v5 loaded for potential utility but no explicit D3 API calls. The code defines reusable components for each shape, with colors from a separate cores module and fixed dimensions.

RRubens

90% match

Loading thumbnail…

PNP - Projetos no Prazo

This example presents a static SVG bar chart titled “Projetos no Prazo” (Projects on Schedule), built with React and rendered using D3 v5. It visualizes a project management process divided into four categories—Estrutura, Duração, Simulação, and Priorização—shown as green vertical bars above a gray base layer. The base contains two yellow horizontal segments labeled “Análise” and “Qualidade.” The chart is hardcoded with fixed coordinates and dimensions, using SVG `rect`, `path`, and `text` elements, with no interactive or dynamic data-binding logic applied.

RRubens

87% match

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.

Mmaxime-plantard

70% match

Loading thumbnail…

Project Breakdown

This visualization displays a breakdown of time spent on tasks within a project, organized hierarchically by category, task, and item. Three horizontal bands of rectangles, colored by category via `d3.scaleOrdinal`, show cumulative durations positioned with `d3.scaleLinear`, while `d3.scaleBand` lays out the levels. Hovering reveals tooltips from `tippy.js`, and labels show approximate hours per category. The React-based SVG chart loads CSV data using `d3.csv` and aggregates it with `d3.groups`, `d3.sum`, and `d3.cumsum`.

WWaseem Medhat

69% match

Loading thumbnail…

Project Breakdown

The visualization displays a project breakdown using an icicle chart, where each horizontal band represents a hierarchy level (category, task, item). The width of each rectangle encodes the cumulative time spent, with colors differentiating categories via d3.scaleOrdinal. Built with React and d3.v6, it uses d3.groups and d3.sum to aggregate data, d3.scaleLinear for positioning, and renders SVG rectangles that react to hover with opacity changes. The data comes from a CSV file fetched via d3.csv.

MMaxene Graze

68% match

Loading thumbnail…

teste

This visualization displays the hierarchical relationships between environmental and social programs for the Paraopeba River Basin, using a parallel coordinates chart. The SVG rendering, built with React and D3.js, plots categorical data from a JSON file across multiple axes, including finality, strategic component, plan, program, impact, and thematic area. The chart uses color-coded lines to trace connections between these dimensions, with adjustable opacity and stroke width to manage overplotting. An interactive configuration panel allows users to switch between color schemes and modify chart dimensions.

Kkevincarv

68% match

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.

Mmaxime-plantard

68% match

Loading thumbnail…

D3 React Gantt Chart

This D3 React Gantt chart displays project timelines as horizontal bars on a time axis, with each category (A, B, C) mapped to a row via a band scale. It uses d3.scaleTime and d3.scaleBand to position rectangular bars, d3.axisTop for year ticks, and d3.axisLeft for category labels, all rendered as SVG. The React component manages the chart lifecycle with useEffect and useRef, while d3.select manipulates the SVG directly. Data from a JSON array provides start and end dates for each bar.

Ffmcgomes

67% match