PNP - Projetos no Prazo

100%

PNP - Projetos no Prazo

✓ Published1🌍 Public

Last edited Oct 25, 2020

Created on Oct 24, 2020

Forked from A

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.

AI-generated description

PNP - Projetos no Prazo - Estático

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

88% match

Loading thumbnail…

PNP - Projetos no Prazo

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.

RRubens

87% 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

77% match

Loading thumbnail…

Bar chart

This example renders a simple bar chart using D3 v5 with SVG output within a React framework. Six hardcoded data values are displayed as vertical bars, with bars colored red for values 80 or higher and gray for lower values. Each bar’s height is twice its data value, and the corresponding number labels each bar. The chart uses D3’s `select`, `append`, and `attrs` methods to construct and style the SVG rectangles and text elements, with the page structured by an HTML file loading the D3 libraries and the chart script.

AAlina Sul

75% match

Loading thumbnail…

D3 Chart

This example shows a static bar chart built with React and D3.js v4, displaying a simple dataset of nine numeric values as vertical bars. The bars are rendered as SVG rectangles, with heights proportional to the data values and positioned horizontally using a translate transform. The code selects the pre-existing `<svg>` element with the class `bar-chart`, sets its dimensions, and appends rectangles via D3's data join (`enter()` and `append()`). The chart uses `d3.select` and `d3.min` APIs to map values to pixel coordinates.

Aacervantesc

75% match

Loading thumbnail…

Pseudo bar chart

The visualization presents a pseudo bar chart built from four rectangular bars of varying heights, each rendered as a static SVG element. It uses raw SVG `<rect>` shapes within an HTML page, with CSS styling for hover effects on circles. The chart relies on basic JavaScript and CSS, with no external charting library, instead encoding categorical data through bar lengths. The backdrop is a white canvas, and the bars are positioned to create a simple, unlabeled comparison.

NNico-Nico

74% match

Loading thumbnail…

Psuedo bar chart SVG from Figma

This example shows a pseudo bar chart rendered as static SVG rectangles on a gray background, with black bars of varying heights and positions representing categorical data values. The visualization relies on raw SVG elements—specifically `<rect>` tags—defined directly in the HTML, with fixed pixel coordinates and dimensions supplied from a Figma design. The code uses no JavaScript charting library; instead, it employs plain SVG and CSS styling within a React context. The layout is hardcoded, not generated from a dataset, and the bars’ heights and x-positions are manually set in the markup.

NNita

74% match

Loading thumbnail…

Gantt chart

This Gantt chart displays the time spans of three items, A, B, and C, as horizontal bars along a shared timeline, with each bar’s length representing its duration. The chart uses React with D3 v7, rendering to SVG via a single `<svg>` element. It leverages `d3.scaleTime` and `d3.scaleBand` to map dates and categories to positions, and `d3.axisTop` with yearly ticks to label the time axis. The data comes from a local JSON file read at runtime.

Ffmcgomes

74% match