teste

100%

✓ Published0🌍 Public

Last edited Jan 21, 2020

Created on Jan 21, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

71% match

Loading thumbnail…

este

This interactive scatter plot explores the data from the Data Canvas Sense Your City Dataset, allowing examination of relationships between variables. The visualization uses D3.js and React, rendering SVG circles for data points with tooltips. While the code initially suggests a scatter plot with axis components and marks, it also includes a nested data aggregation structure using `d3.nest()`. The final rendering shows a bar chart using D3's ordinal and linear scales, with axes and tick formatting, though the implementation appears incomplete or experimental.

Mmpiedray

70% match

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

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

68% match

Loading thumbnail…

Untitled

This example uses a parallel coordinates chart to compare countries across multiple dimensions—population, surface area, and agricultural land percentage—over several decades. Grey background lines provide context, while steel blue foreground lines highlight the highlighted data points. Brushing on any axis filters the displayed lines, showing only those that meet the selected criteria. The visualization is built with D3 v3, using `d3.scale.ordinal` and `d3.scale.linear` for axes, `d3.svg.line` for paths, and `d3.svg.brush` for interactive filtering. Data is loaded from a CSV file.

Mmuzzheng

68% match

Loading thumbnail…

Por TCH

This visualization adapts the d3-weighted-voronoi plugin to render a voronoi treemap of hierarchical economic data, titled "Fazenda Burro Velho." Each cell’s area encodes weight values, while numeric labels display the `code` metric for each child node. The code computes mean values per group, sorts children, and maps them to a colored legend. It uses `d3.hierarchy`, `d3.voronoiTreemap`, and SVG paths, with interactive PNG export via `canvas-toBlob` and `FileSaver`.

DDaniel Marx

68% match

Loading thumbnail…

chartTest

This visualization displays multiple lines as a radial chart, using test data arrays to demonstrate the capabilities of D3.js. The chart employs `d3.lineRadial()` with cardinal curves to render the data, with each line represented in a different color from the `d3.schemeCategory10` palette. The visualization is rendered as an SVG element, created with D3's selection and append methods. The example includes code variants showing additional D3 features, such as time-scaled data, radial axes, grid lines, and axis labels, all within a React framework context.

JJesper Martinsson

68% match

Loading thumbnail…

Untitled

This visualization shows how multiple data series change over time using a streamgraph with a silhouette offset, where each colored area represents a different category. The chart loads CSV data from a GitHub repository and displays it as stacked areas with a diverging y-axis centered around zero. The code uses d3.scaleLinear for axes, d3.scaleOrdinal for the categorical color palette, and d3.stack with d3.stackOffsetSilhouette to compute the layered areas, which are rendered as SVG paths using d3.area.

LLAOKE1997

68% match