saiyogesh9911@gmail.com

Fork of HTML Starter

Network Graph

ice-8

Fork of Sai Yogesh- Tech Layoff's Network Graph

Fork of Kartheek_ICE8_Networkgraph

Reusable scatter plot

This scatter plot visualizes Walmart sales data, showing the relationship between item price and total sales. The visualization reveals how sales figures correlate with product pricing across different items. The code uses D3 v5's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to map the data from a CSV file to SVG circles, with each circle representing a data point. The chart includes labeled axes for Total Sales and Item Price, along with a descriptive title. The responsive design fills the browser window, and the styling incorporates custom fonts and tick sizes for improved readability.

line chart

This line chart visualizes Walmart’s total sales over time, with each point representing a daily sales total plotted against the corresponding date. The chart uses the Chart.js library to render the line on an HTML5 canvas, fetching the data from a raw CSV file hosted in a GitHub gist. The code parses the CSV by splitting rows and extracting the date and sales columns, then configures the chart with a blue border and semi-transparent fill. Axis labels for date and sales are set explicitly, and the chart is displayed at a fixed size of 800 by 400 pixels.

Area chart

This example visualizes total sales over time as an area chart, using a filled line to emphasize the magnitude of sales across dates. It loads Walmart sales data from a CSV file and renders the chart on an HTML canvas via the Chart.js library, with the `fill: true` option creating the area effect. The chart displays dates on the x-axis and sales figures on the y-axis, using blue tones for the fill and border. Data is fetched asynchronously and parsed from the CSV, while the chart’s responsive mode is disabled to maintain the fixed canvas size.

Fork of Fork to pie chart

This pie chart displays total sales by item category, with each slice sized proportionally to the category’s aggregate sales value. The visualization loads Walmart sales data from a CSV file, parsing the `Item_Category` and `Total_Sales` columns. Using Chart.js within a canvas element, it renders the data with six semi-transparent color segments. The chart is static and does not include interactivity, tooltips, or a legend, focusing solely on the categorical breakdown of sales figures.

Fork of ICE-7 Area Chart

This area chart visualizes the cost of sales from 2000 to 2013, highlighting trends over time with a smooth, curved line and a filled area beneath it. The chart uses D3 v5 to load and parse CSV data, then applies scales for time and linear values, with axes labeled accordingly. The visualization renders as an SVG, featuring a yellow filled area and a black line, and includes gridlines and tick formatting for readability. The data source is a CSV file hosted externally, processed with D3's `csv` function.

line

This example shows the trend of brain and CNS cancer cases over time as a line chart, with data loaded from a CSV file. The visualization uses D3 v7 to create SVG-based axes with gridlines, mapping years to the x-axis and cancer case counts to the y-axis. The line generator, scales, and axis functions from D3 are used to draw the chart, while the dataset is parsed and mapped to the expected columns before rendering.

Fork of HTML Starter

This example shows a minimal HTML page that demonstrates how to set up a visualization using CSS and JavaScript, serving as a starting point for custom projects. It renders a blank canvas with no data or interactive elements, focusing instead on the structural foundation of an HTML document. The code uses plain JavaScript and CSS within an HTML file, with no external libraries or APIs like D3.js or Three.js present. The page loads a simple header and empty container, illustrating the basic file structure for further development.

Fork of Reusable D3 Scatter Plot

This visualization presents a reusable scatter plot of the Iris dataset, dynamically cycling through four numeric attributes for the x-axis while keeping sepal length fixed on the y-axis. Using D3.js v6 with SVG rendering, it updates every two seconds via `setInterval` and a configurable `scatterPlot` function that leverages `scaleLinear`, `axisBottom`, and `axisLeft`. The plot reads data from a cleaned CSV file and animates transitions smoothly. The code demonstrates a modular chart pattern, highlighting how D3’s data joins and selections handle real-time updates.

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length, with points colored by their attributes. Built using D3.js (v6), it employs `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and SVG circles for marks. The chart automatically cycles through four numeric columns—petal width, sepal width, petal length, and sepal length—on the x-axis every two seconds via `setInterval`. Data is loaded asynchronously from a CSV URL using `csv` and parsed into numbers. The reusable chart pattern, inspired by Towards Reusable Charts, accepts configurable accessor functions, with styling handled by the Share Tech font.

Creating a Scatter Plot with D3.js

This scatter plot visualizes Walmart’s weekly sales against temperature, with each steel-blue circle representing one week. The x-axis spans the temperature range, while the y-axis starts at zero and extends to the maximum sales value. Built using the D3.js v5 API, the example loads a cleaned CSV from a GitHub gist and renders an SVG. It applies `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` to construct the axes and map data points.

Creating a Bar Chart with D3.js

This example shows a bar chart of Walmart’s weekly sales per store, using bar height to encode the sales amount and the x-axis to identify each store. The code loads a CSV dataset from a GitHub URL and renders the chart as SVG elements. It uses D3.js v5 with `d3.csv`, `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`, while React manages the page structure. The visualization also rotates the x-axis labels for readability and uses maroon bars to represent the sales values.

walmart

This example displays a summary of a cleaned Walmart dataset, showing a text message with the file size, row count, and column count alongside a static image of a Walmart store. The visualization uses React with hooks (`useState`, `useEffect`) to fetch the CSV data from a GitHub gist, parses the raw text by splitting on newlines and commas, and computes the dataset dimensions. The code relies on the native `fetch` API to retrieve the data, and renders the message and image using React DOM. The image is sourced from a New York Times URL, and the layout uses inline styles for centering and spacing.

Fork of Hello VizHub

This example shows a simple cat face drawn with D3 shapes, including a head, eyes, nose, mouth, ears, and whiskers, all assembled using SVG elements such as `circle`, `ellipse`, `path`, `polygon`, and `line`. The visualization demonstrates D3’s `select` and append methods to build the graphic in a React component. It also fetches a CSV file of car data from a GitHub gist, reporting the file size, row count, and column count in a message. The code loads D3 v7 via UNPKG and renders entirely as SVG.

Fork of Fork of Smiley Face Part II

This example shows a smiling face built with React and D3, rendered as a network visualization. It displays a circular layout of nodes connected by curved links, with the overall shape forming the facial features of a smiley face. The visualization uses `d3.forceSimulation` to position nodes, while React manages the component lifecycle and state. The code fetches CSV data and applies force-directed physics to create the final arrangement, with the smile and eyes emerging from the node clustering and link structure. The example relies on React’s `useEffect` for data loading and D3’s force layout to compute the interactive graph.

Fork of Smiley Face Part II

This interactive React visualization presents a cartoon face rendered as an SVG, displaying a large violet circle head with brown hair, pink ears and cheeks, black-framed glasses, and a curved mustache and mouth. The app uses D3’s `arc` function to generate the mouth path and fetches a Walmart CSV file from a GitHub gist to display the data file size, row count, and column count in a heading and paragraph above the graphic. The face’s shapes and positions are all computed from mathematical constants, and the accompanying text updates asynchronously.

Fork of HTML Starter

This example presents weekly sales data in a static HTML table, showing store identifiers, dates, sales figures, holiday flags, temperature, fuel price, CPI, and unemployment. It uses plain CSS for styling, including table borders, alternating row colors, and a card-like container. The page is a simple starter template with no dynamic behavior, relying on hand-coded HTML rows. It demonstrates a basic data-display layout without JavaScript libraries or interactive features.

Fork of Face with d3.js!

This example draws a stylized cartoon face directly onto an SVG canvas using D3.js v7. The code constructs the face from basic geometric shapes—circles for the head, eyes, and ears, rectangles for the eyebrows, and an elliptical arc for the mouth—all positioned relative to the canvas center. It relies on d3.select for DOM selection and d3.arc to generate the mouth’s path. The composition is organized by grouping elements with SVG transforms, demonstrating how to build complex graphics from primitives without any external data source.

Fork of Fork of Face with d3.js!

A stylized cartoon face is drawn entirely with SVG shapes, including a yellow circle for the head, elliptical eyes, a simple line for hair, and an arc-based mouth and eyebrows. Built with d3.v7, the code demonstrates importing `select` and `arc` from the `d3` module and constructing the face by appending primitives to an SVG canvas. The example showcases the use of `arc()` for curved elements and basic transformations to position facial features.

Fork of Smiley Face Part II

This example uses React to draw a smiley face in SVG across the full browser window. The code computes the face’s size and position from `window.innerWidth` and `window.innerHeight`, then places a yellow circle with black stroke as the head, adding white eyes, an orange nose, a black elliptical mouth, curved eyebrows, and two ears near the window edges. It directly uses ReactDOM’s `render` method and constructs SVG shapes—`circle`, `ellipse`, and `path`—within a single `<svg>` element. The face dynamically scales because its radius is based on the window’s centerY.

Fork of Smiley Face Part II

This React-based SVG shows a responsive smiley face that scales to the full browser window. The face is drawn with yellow circles for the head and ears, white eyes with black outlines, an orange nose, a simple elliptical mouth, and black hair across the top. Using React's declarative JSX syntax and ReactDOM to render the SVG elements, the code computes positions from `window.innerWidth` and `window.innerHeight` to center the composition. The placeholder SVG in the HTML is commented out, with all drawing handled by the React component.

Fork of Fork of Face with d3.js!

This example renders a stylized smiley face using React components to create SVG shapes. It demonstrates positioning SVG elements relative to a center point with a yellow face circle, white eyes, orange nose, elliptical mouth, curved eyebrows, and side ears. The code uses ReactDOM to mount the app and defines SVG primitives like circle, ellipse, and path with computed coordinates. D3.js is loaded via UNPKG but is not actively used in the rendering logic, which relies entirely on React's JSX syntax.

Fork of Smiling face

This example displays a simple smiling face constructed from three SVG circles, with a large yellow circle for the head and two smaller black circles for the eyes. The static composition is drawn using React’s rendering to SVG, directly embedding `<circle>` elements with fixed coordinates and styling defined through inline attributes. The code sets the face against a clean background with no interactive behavior, relying solely on the SVG markup to depict the icon.

Face

This example draws a cartoon cat face using D3.js v7 and SVG. The code constructs a gray head circle, ears, eyes, nose, mouth, and whiskers by chaining selection methods like `append` and `attr` on a centered group element. It uses `d3.select` to access the SVG, computes the center from its width and height attributes, and builds the whiskers with a `for` loop that appends multiple `line` elements. All shapes are positioned with explicit coordinates relative to the group's transform.

Fork of Fork of Christmas tree

This example renders a stylized Christmas tree as a static SVG composed of three triangular green paths. Red circular baubles, pink flower shapes built from multiple circles within a translated group, and three gold star polygons decorate the tree. Geometry is defined directly in the markup without a JavaScript library, relying on literal coordinate values and SVG presentation attributes.

Fork of Let's make a face with D3.js!

This fork of “Let's make a face with D3.js!” builds a yellow smiley face from SVG shapes, including eyes, eyebrows, a mouth, nose, ears, and hair. D3.js v5 selections append circles, rectangles, paths, and ellipses to an SVG canvas, while the `d3.arc` generator creates the curved mouth. A two-stage transition animates the eyebrow group’s vertical position, moving the eyebrows up and down over two seconds per cycle using `transition.attr`. The face is centered via a translated `<g>` element, and the code relies on D3’s `select` and `arc` imports.

Fork of Smiley Face Part II

A smiling face rendered in SVG is built with React primitives, featuring eyes, a nose, a mouth, and ears drawn as circles, ellipses, and paths. The code defines geometric parameters like eye offsets and mouth radius to position features on a yellow, black-outlined head. It uses React's DOM abstraction to generate the SVG elements, relying on the react and react-dom libraries from unpkg. The specific coordinates and component structure are visible in the JavaScript source, with the overall composition demonstrated in the embedded video.

Fork of Let's make a face with D3.js!

A smiling face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation and animation. The face, composed of circles, ellipses, and a path-based mouth, is assembled through chained `append` calls and coordinate transformations. The most prominent behavior is the animated eyebrows, which move up and down using a `transition().duration(2000)` sequence. This example showcases D3’s core API for selecting elements, applying transforms, and creating simple timeline-based animations without any external datasets.

Fork of cat

This example shows a stylized cat built entirely from CSS shapes, with a pink head, ears, eyes, nose, mouth, body, and tail arranged in a static cartoon composition. The animation is minimal: JavaScript moves only the tail by incrementally rotating it via `requestAnimationFrame`, updating the `transform` property each frame. The HTML structure uses nested `div` elements for each body part, styled with CSS `border-radius` and positioning. No external libraries are used; the rendering relies purely on DOM elements and CSS, with the animation driven by a simple custom script rather than a framework like D3 or Three.js.

Fork of Fork of Flowers

A flower grows in a blue field with a green stem, two leaves, and a brown elliptical vase. The flower has twelve purple petals and a yellow center, all rendered as circles that animate from a radius of zero to their full size over two seconds using D3 transitions. The code constructs the scene with SVG elements—rectangles for the stem and vase body, paths for the leaves, and circles for the petals—positioned around a central point. The `transition.attr` API drives the growth animation, while the vase bottom uses an ellipse to complete the static composition.