Guna

@gunaNeelamegam·11 public vizzes

Fork of React & D3 Starter

This example demonstrates a scatter plot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with circles colored by species. The visualization is built with React and D3 v7, using a decoupled architecture where React manages the SVG container and D3 handles scales, axes, and circle rendering via `d3.axisLeft`, `d3.axisBottom`, `d3.scaleLinear`, and `d3.extent`. Data is loaded asynchronously from a CSV file using `d3.csv`.

Feb 17, 2023

Loading thumbnail…

creating the scatter plot using vennilla js

This example loads the Iris dataset from a GitHub-hosted CSV file and plots it as a scatter plot using D3 version 7. The visualization displays the relationship between sepal and petal measurements, rendering the points as an SVG graphic that fills the browser window. The code uses `d3.csv` with a custom type parser to convert string values to numbers, along with `scaleLinear` and `min`/`max` utilities to prepare the data for visualization. The setup demonstrates a minimal React-free approach with vanilla JavaScript.

Feb 17, 2023

Loading thumbnail…

animating react circles

This example displays a simple React application that renders a static heading. It uses React and ReactDOM to mount a single functional component, which outputs an `<h1>` element with the text “hii” into the DOM root. The code relies on React’s `ReactDOM.render` method to insert the component into the page, with the styling defined in the HTML’s CSS. No animation or data visualization is present; the example serves as a minimal starter template for a React-based project.

Feb 17, 2023

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a decoupled React & D3 starter, showing a classic scatter plot of the Iris dataset. It uses the `viz` function to create the plot, drawing circles for each data point using `d3.scaleLinear` for x and y axes, and `d3.extent` to compute the domain. The `axes` function uses `d3.axisLeft` and `d3.axisBottom` to add the axis elements. The rendering is done in SVG, with React managing the wrapper component and D3 handling the imperative visualization logic. The code includes commented-out experiments with rectangles and masks, showing the starter's flexibility for scaling complexity.

Feb 16, 2023

Loading thumbnail…

Fork of React Starter

This example displays a large, centered “Hello !” message rendered as a React component. It uses React 16 and ReactDOM to mount the component into a root div, while D3’s `select` API is imported but not actively applied. The styling comes from a CSS class that sets the font size to 13em, making the text prominently fill the viewport. The rendering approach relies on React’s declarative JSX and the production builds of React and ReactDOM loaded via external scripts.

Feb 16, 2023

Loading thumbnail…

Fork of D3 Starter

This example displays the text “Hello D3 version 7” centered on a blank page at a very large font size, demonstrating a minimal setup for a D3 v7 project. It uses the `select` function from the `d3` module within `index.js` to target the body element and set its text content. The page loads D3 from a CDN and the script runs via a bundled file, following the starter template’s approach of blending a simple HTML structure with a separate JavaScript entry point.

Feb 16, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello VizHub!” centered on a blank page. It demonstrates how to load D3.js from UNPKG and import the `select` function from the D3 API, while also showing the use of local ES6 modules to export a simple message constant. The visual output is defined by CSS rules that set the message’s font size and alignment, with no additional data or interaction.

Feb 16, 2023

Loading thumbnail…

Fork of HTML

This visualization displays a full-screen SVG canvas filled with one hundred horizontal stripes, each ten pixels tall, spanning the entire width of the viewport. The code creates an SVG element using the raw DOM API `document.createElementNS`, dynamically sizing it to the browser window’s inner dimensions. It then generates rectangles via a JavaScript loop, setting their `y` position incrementally and applying fixed height and width attributes. No external libraries are used; the rendering relies entirely on standard SVG and browser JavaScript.

Feb 15, 2023

Loading thumbnail…

Fork of D3 Starter

Feb 15, 2023

Loading thumbnail…

Fork of HTML Starter

This example renders a fixed-size SVG graphic directly in an HTML page. It uses raw SVG elements—a full-size `rect`, a blue `circle`, and a red `text` element displaying "Guna"—all styled with inline CSS and positioned via SVG coordinates. The JavaScript and CSS libraries are not invoked; the visualization relies solely on static SVG markup defined in `index.html`. The page demonstrates a minimal, non-interactive composition without data binding or dynamic updates.

Feb 14, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays a centered “Hello world” message in large, bold text on an otherwise blank page. It is a minimal HTML starter template, demonstrating the basics of CSS styling and JavaScript integration. The page uses a single HTML file with inline CSS to control the font size and alignment of the heading, while the JavaScript section is left empty for further expansion. The visualization highlights the structure of a simple web page built with HTML and CSS, serving as a foundation for more complex projects.

Feb 14, 2023