Protótipo 2 | c3 + pureJS

100%

Protótipo 2 | c3 + pureJS

✓ Published0🌍 Public

Last edited Apr 28, 2021

Created on Apr 28, 2021

This example demonstrates a C3.js chart rendered alongside a second chart generated through a React component. The first chart displays two static data series, while the second chart, created via the `GerarChart` function, shows a different set of values. The code integrates C3.js with React 17, using the `c3.generate` API to create both visualizations. A file input and button are present, though their functionality is not fully wired to the charts.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Line Chart

This example demonstrates two identical line charts generated side by side, each plotting two data series with different value sets. The charts are rendered using the C3.js library, which builds upon D3.js to create the visualizations. The page layout uses a CSS Grid structure to position a header, menu, content area, and footer, with one chart embedded within a quadrant of the content grid and the second placed below the main container. The code initializes each chart by calling `c3.generate()`, binding to distinct HTML elements and supplying the same two-column dataset for both, showing how the same chart configuration can be reused in different page locations.

GGerardoFurtado

74% match

Loading thumbnail…

D3 and React

Two React components render D3 visualizations side-by-side. A bar chart maps an array of values to SVG rectangles and text labels, using D3's data join with `selectAll`, `enter`, and attribute setters, with colors via HSL strings and classes for high/low values. A second component demonstrates React's managed rendering alongside unmanaged D3 updates, appending HTML elements, merging enter/update selections, and animating appended spans with `transition().duration().delay()`. Both components use `useRef` and `useEffect` to access the DOM, with data generated by `d3.range`.

Ggjonor

71% match

Loading thumbnail…

Prototyp

This dashboard prototype demonstrates the integration of four distinct visualizations: a bar chart depicting Berlin district populations from 2005 to 2020, a line chart of cumulative COVID-19 cases with a brushable timeline for filtering, and two scatter plots exploring demographic data (LOR codes and population attributes) and COVID-19 statistics by age group. Built with React and D3 v6, the interactive visualizations feature dropdown menus for attribute selection, color legends with hover filtering, and data loaded from CSV files via `d3.csv`. Each chart component—axes, marks, and legends—is modularized within the React framework, rendered as SVG elements.

CChrisHeinirch

70% match

Loading thumbnail…

My New Chart

This example demonstrates a bare minimum HTML page that combines CSS and JavaScript to render a custom data visualization. It uses React as the core framework for building the interface, with the visualization logic implemented through standard Web APIs. The chart displays data-driven graphics that respond to user interaction, leveraging React’s declarative component model to manage state and rendering. The project serves as a clean, minimal starting point for developers exploring React-based visualization, with no external charting libraries required.

CCode-180

70% match

Loading thumbnail…

D3.js

This example uses D3.js v3 within a minimal React-free HTML page to demonstrate the core charting workflow. The code sets up an interactive visualization by selecting an empty body element and appending SVG or canvas elements via D3’s data-join methods. While the provided files contain only the basic scaffolding—a blank `index.html` and an empty `app.js`—the intended purpose is to show how D3 selections and scales build a chart from scratch. The documentation references D3’s force simulation and path generators as potential next steps.

EEssoe21

70% match

Loading thumbnail…

Visualizaciones t13

This example presents a minimal HTML page that loads a JavaScript file named `graphs.js`. The code uses plain JavaScript and the React framework to render visualizations, though the specific chart types are not defined in the provided files. The page structure is created with standard HTML and CSS, and the script is included via a `<script>` tag. The data source is not specified in the visible code, and the example serves as a basic scaffold for building interactive graphics with React.

HHiImSebastian

69% match

Loading thumbnail…

first iteration on site

This example presents a multi-line chart built with React and SVG, rendering data through the D3.js library (version 7.8.2). It visualizes multiple series over time, using D3's scales, axes, and line interpolation to map values. The chart supports interactive hover effects, including a tooltip and a Voronoi overlay. The code imports specific functions from D3, such as `select`, `range`, and `curveLinear`, to construct the visualization.

JJesper Martinsson

69% match

Loading thumbnail…

Graph

This example shows a React component that renders a simple graph visualization, with a placeholder "test" div in place of actual chart content. The implementation combines React 16.9 with D3 v5, importing the `arc` function from D3 while using ReactDOM to mount the component into the DOM. The HTML file loads React, ReactDOM, and D3 from CDN, with the body containing a root div and a bundled JavaScript file. The code demonstrates the basic integration pattern of embedding D3 utilities within a React component structure.

NNart Williamson

69% match