Skip to main content
SimilarExport ZIP
100%

PNP - Projetos no Prazo

✓ Published0🌍 Public
RRubens
Last edited Oct 28, 2020
Created on Oct 28, 2020

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.

AI-generated description

PNP - Projetos no Prazo

Só as formas geométricas

MIT Licensed

Similar vizzes

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
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
88% 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
73% match
Loading thumbnail…

10-11-22 - First DataVis Project

This example shows a simple SVG composition of three primitive shapes: two circles and a diagonal line. The first circle is filled with the default black color, while the second circle and the line are explicitly styled with red fills and strokes. The visualization uses static SVG elements rendered directly within the HTML document, with no JavaScript or React framework involvement. The code relies solely on the SVG API for drawing, and also includes a README referencing a React starter template for future iterations. The data is hardcoded as literal position and radius attributes.

Jjeongwooseo
73% match
Loading thumbnail…

USE THIS

Three SVG components built with React and D3.js (d3.arc, d3.timeFormat) render the current day of the year as a percentage. A progress bar, donut, and gauge all display the same fraction, computed from the date via timeFormat('%j'). Each component independently draws its background and foreground paths and labels the value directly in the SVG. The visualization demonstrates how multiple chart types can encode identical data with distinct visual metaphors.

Aaniosindustries
72% match
Loading thumbnail…

Data viz 5

This example displays a collection of simple SVG flower and polygon shapes, each filled with a named color like Atomic Tangerine or Kelly Green. The visuals are defined directly in HTML, with each shape’s size, position, and fill color set through SVG attributes. The page uses the D3.js library to load a CSV file from a GitHub gist, though the processing of that data is not shown. React is used as the framework, with the entire visualization rendered as static SVG elements.

Sshreyasribearelly@gmail.com
72% 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
72% match
Loading thumbnail…

Data Visualization with D3 and React

A radial burst of CSS named colors is rendered as a single pie chart, with each color occupying a wedge of equal size. D3 loads the dataset via `csv` and computes the layout with `pie`, while `arc` generates the SVG path shapes. React manages the component state and renders the resulting `path` elements, with each fill set from the `RGB hex value` column. The visualization splits the full width into a circular layout centered on a 960×500 SVG canvas.

AAngel Lam
72% match