srividyap03

@srividyap03·17 public vizzes

Fork of HTML Starter

This example displays the text “Hello HTML!” in a large, centered font using a simple CSS class. It demonstrates the fundamental structure of an HTML page, combining markup, inline styling, and JavaScript-ready content. The page relies on native HTML elements and CSS properties, such as the `font-size` and `text-align` rules, with no external libraries or frameworks. The visualization highlights how a bare-bones HTML document can present static text content directly in the browser.

May 19, 2023

Loading thumbnail…

Your Project

This interactive bar chart visualizes the depression rate (Allages) for the top 10 happiest countries in a selected year, allowing users to filter by year via a dropdown menu. The chart updates dynamically, sorting countries by Happiness Score in descending order and displaying a title reflecting the chosen year. Built with React and D3.js, it uses `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG rectangles for bars. The code also employs `d3.axisBottom` and `d3.axisLeft` for rendering the axes.

May 15, 2023

Loading thumbnail…

Fork of world map w/ cities & countries pop!

A world map visualization displays global city populations and country population data, with city circles sized by population and country polygons colored by opacity according to population. The visualization uses a Natural Earth projection from d3-geo-projection, rendered with React and SVG paths via d3.geoPath. City data comes from the Simplemaps World Cities Database, while country boundaries use World Atlas TopoJSON. Hovering over cities or countries reveals population tooltips, with graticules and geographic reference lines overlaid for context.

May 13, 2023

Loading thumbnail…

Fork of Fork of Fork of Chart redesign

This example visualizes a time series of daily humidity data as a line chart with overlaid seasonal summaries. The chart uses a colored timeline gradient and highlights distinct season spans (Spring, Summer, Fall, Winter) as shaded rectangles, alongside dotted data points and dashed season mean lines. The visualization is built with React and D3 v5, using `d3.json` to load the dataset, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.area` with `d3.curveBasis` to generate the smoothed line path. The chart is rendered as an SVG, with downsampling applied to the data for smoother curve rendering.

May 13, 2023

Loading thumbnail…

Rendering Data with React & D3

A circular pie chart displays all CSS named colors as individual slices, each filled with its corresponding RGB hex value. Built with React and D3 v5, the visualization loads color data from a CSV file and renders it as SVG paths. React manages the component state and lifecycle, while D3's `arc` and `pie` functions compute the angular geometry, mapping each color entry to a slice of the chart.

May 9, 2023

Loading thumbnail…

Fork of Fork of Fork of Mouse Follower Simple

A single gray circle follows the mouse cursor across a full-screen SVG canvas, creating a direct and immediate visual link between pointer movement and graphical output. The example uses d3-selection to append an SVG circle and attach a `mousemove` event listener to the SVG element, updating the circle’s `cx` and `cy` attributes with the event’s x and y coordinates. Rendered in a browser via a minimal HTML page, it demonstrates fundamental D3 v7 selection, event handling, and attribute manipulation.

May 8, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example visualizes the size and structure of a CSV dataset containing CSS named colors by displaying its file size, row count, and column count as large text. It loads the data from a remote GitHub Gist using d3.csv, which returns a parsed array, then computes the kilobytes from the formatted CSV string using d3.csvFormat. The code also includes commented-out alternatives using fetch, async/await, and d3.csvParse, demonstrating different approaches to asynchronous data loading in D3 v5 within a React-based project.

May 8, 2023

Loading thumbnail…

Mouse Follower

A small, randomly colored circle follows the mouse cursor across a full-screen SVG canvas, changing to a new random color with every mouse movement. Built with D3, the code uses `select` to append an SVG element sized to the window, a `circle` element for the follower, and the SVG `on('mousemove')` event to update the circle's `cx`, `cy`, and `fill` attributes. No data source is used; the visualization is purely interactive, with the color generated via a custom `getRandomColor` function.

May 8, 2023

Loading thumbnail…

Untitled

This example presents a React-based visualization using D3.js. It demonstrates a force-directed graph layout powered by `d3.forceSimulation`, with nodes and links rendered as SVG elements. The code utilizes React hooks to manage state and lifecycle, integrating D3 simulations within a component-based architecture. The visualization displays a network of interconnected nodes, with forces such as charge and link distance determining the spatial arrangement. The underlying data structure for the graph is defined in the JavaScript, though the specific dataset is minimal. The example serves as a functional starter template for combining React and D3 for interactive network visualizations.

May 8, 2023

Loading thumbnail…

Fork of interaction_3

This example renders a yellow smiley face as a full-screen SVG graphic using React. It computes dimensions from `window.innerWidth` and `window.innerHeight`, centers the face with a `g` transform, and draws a large circle for the head plus two eye circles. The code uses React 16.9.0 via UMD builds and ReactDOM for mounting to the `#root` element, with explicit constants for eye offset, eye radius, and stroke width. The mouth is not drawn.

May 8, 2023

Loading thumbnail…

interaction_3

A yellow smiley face with two black eyes is rendered full-screen using React and SVG. The face dynamically centers based on the browser window’s width and height, with its radius calculated from the viewport height minus half the stroke width. The code uses React 16.9 to create SVG circle elements, positioning them via a translated group and fixed offsets for the eyes and mouth.

May 8, 2023

Loading thumbnail…

interaction_3

A full-screen SVG circle follows the mouse cursor in real time. The visualization demonstrates basic pointer tracking within a D3.js v7 application, where the circle updates its `cx` and `cy` attributes directly on every `mousemove` event. The code selects an SVG container from a `#app` div, appends a circle with a fixed radius of 50 pixels, and binds the event listener using D3's `selection.on` method. The body has no margins and hides overflow, ensuring the circle moves across the entire viewport without scrollbars.

May 8, 2023

Loading thumbnail…

Fork of Fork of Mouse Follower Simple

A single gray circle follows the mouse cursor across an SVG canvas that fills the browser window. The demonstration shows how D3 v7 event handling can drive direct attribute updates on SVG elements. The code appends an SVG and circle using d3.select and selection.append, then listens for mousemove events on the SVG, updating the circle’s cx and cy coordinates from the event’s x and y properties. No external data source is used; the visualization relies purely on user interaction with the rendered vector graphic.

May 8, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as a scalable SVG, with the face centered and sized to fill the browser window. The face includes a circular head, two eyes, and a mouth, all constructed from basic SVG primitives. The implementation uses React 16.9.0 with ReactDOM to render the SVG elements dynamically, computing the center coordinates and dimensions from `window.innerWidth` and `window.innerHeight`. The code defines constants for eye offset, eye radius, mouth width, and mouth radius, though the mouth itself is not drawn in the visible output.

May 8, 2023

Loading thumbnail…

Fork of Mouse Follower Simple

A simple interactive visualization demonstrates pointer tracking by rendering a single circle that follows the mouse cursor across the full browser window. The SVG canvas fills the viewport using `window.innerWidth` and `window.innerHeight`. D3's `selection.on('mousemove', ...)` event listener updates the circle's `cx` and `cy` attributes to the cursor's coordinates. The example uses D3 v7's `select` to append and style the SVG and circle elements, showcasing basic event handling and attribute manipulation.

May 8, 2023

Loading thumbnail…

Fork of Mouse Follower Simple

A single circle follows the mouse pointer across a full-screen SVG. The example demonstrates basic D3 event handling and shape manipulation, using a selection created with `d3.select` and attribute updates on the `mousemove` event. The circle’s `cx` and `cy` coordinates are directly set to the event’s `x` and `y` values, with no animation or interpolation. The SVG canvas is sized to the browser window via `window.innerWidth` and `window.innerHeight`, and the CSS hides page margins and scrollbars.

May 8, 2023

Loading thumbnail…

Loading and Parsing CSV DATA

This example loads a CSV file of CSS named colors from a GitHub gist and logs its raw text to the browser console. The code uses the native `fetch` API wrapped in an async function called `fetchText` to retrieve the file, then parses it as a plain string with `response.text()`. The data source is the `cssNamedColors.csv` URL, and the page itself is a minimal HTML file with inline JavaScript, demonstrating a simple approach to fetching external tabular data without any visualization libraries or frameworks.

May 8, 2023