JosepAnSabate

@JosepAnSabate·4 public vizzes

Fork of React Starter

This example presents a minimal React application that renders a static message to the browser. It shows the text “Hello React!” centered on the page with a large font size, demonstrating the basic structure of a React project. The code uses `ReactDOM.render` from the `react-dom` library to mount an `App` component that returns a `<div>` with a CSS class, onto the `#root` element in the HTML. The page loads React and ReactDOM via UMD scripts from unpkg, and the styling is defined in an inline style block within the HTML.

Jun 12, 2022

Loading thumbnail…

Fork of React & D3 Starter

This scatter plot visualizes the Iris flower dataset, mapping sepal length to the x-axis and petal length to the y-axis. It demonstrates a decoupled React and D3 integration pattern, where React manages the component lifecycle and D3 handles the rendering. The visualization uses d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and SVG circles with a fill opacity of 0.5 to display data points. React hooks, such as useState and useEffect, are used for data loading and component updates, with D3's csv function parsing the data.

Jun 12, 2022

Loading thumbnail…

Fork of Fork of Hello HTML

This example shows two overlapping circles rendered as a static SVG scene, one yellow on the left and one red on the right, within a 960x500 viewport. It demonstrates a minimal setup for combining React with SVG markup, loading React and ReactDOM via CDN scripts and logging the React object to the console. The circles inherit default SVG styling, with the yellow circle having a black stroke, while the red circle lacks a stroke due to a typo in the `stroke-width` attribute. No dynamic data or interactivity is present; the visualization is purely declarative SVG structure.

Jun 12, 2022

Loading thumbnail…

Fork of Hello HTML

This example displays two static SVG circles—one yellow and one red—rendered directly in an HTML page. It demonstrates a minimal React setup by loading React 18 via UMD scripts and logging the React object to the console, though the circles themselves are plain SVG elements drawn without React components. The page includes a reference to an external JavaScript file and uses basic SVG circle attributes for positioning and styling. The visualization does not implement interactive behavior or data-driven updates, serving instead as a straightforward demonstration of HTML, SVG, and React integration in a bare-bones structure.

Jun 12, 2022