M

mukundakrishna.r@gmail.com

@Mukunda799·31 public vizzes

Loading thumbnail…

Fork of Fork of Fork of Fork to pie chart

This example visualizes stacked area chart data for total wages by country, showing how values change over time. The visualization uses D3.js v7 with an SVG rendering approach, fetching CSV data from a GitHub gist. The code employs `d3.area()` and `d3.stack()` to create the stacked areas, with `d3.scaleBand()` for the x-axis categories and `d3.scaleLinear()` for the y-axis scale. Color coding uses `d3.schemeCategory10` to distinguish each year's contribution to the total.

Loading thumbnail…

Fork of ICE-7 Line chart SKM

This line chart visualizes how country-specific data values change over time, with each country represented by a distinct colored line from the D3 categorical color scheme. It emphasizes comparison of trends across multiple series on a shared time axis, highlighting overall patterns and disparities in the dataset. The visualization is built using D3 v7, fetching data from a CSV file and rendering it as SVG. It uses `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.line` with `d3.axisBottom` and `d3.axisLeft` to draw the chart. The x-axis represents years, while the y-axis maps the numeric values, with rotated tick labels for clarity.

Loading thumbnail…

Fork of Fork of PIE CHART

This example visualizes country-level data over time as a multi-line chart, with each line representing a country’s values across a series of years. The chart is rendered in SVG using D3 v7, fetching data from a CSV file via `d3.csv`. It employs `d3.scaleLinear` for both axes, `d3.line` to generate the paths, and `d3.axisBottom` and `d3.axisLeft` for tick marks, with rotated x-axis labels for readability. Each country’s line is colored using `d3.schemeCategory10`.

Loading thumbnail…

Fork of Fork of Fork of LINE GRAPH

This pie chart visualizes total wages by country for 2022, using a dataset fetched from a remote CSV file hosted on GitHub. Built with Chart.js, the code loads the data via a `fetch` request, parses the CSV rows, and extracts the country names and the wage values from the 23rd column. It renders the chart onto an HTML5 `<canvas>` element with a fixed size of 400 by 400 pixels, assigning a distinct color to each slice. The chart is non-responsive and maintains its aspect ratio as configured in the options.

Loading thumbnail…

Fork of Fork of Fork to pie chart

A pie chart displays total wages by country for 2022, with each slice representing a country’s share from the loaded CSV dataset. The visualization uses Chart.js, fetching data from a GitHub Gist and parsing the CSV rows to extract country names and wage values. Rendered on an HTML canvas with a fixed 400×400 size, the chart assigns six distinct semi-transparent colors to the slices and includes a title. The code relies on the browser’s DOMContentLoaded event to fetch and process the data before drawing.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example visualizes average wage trends across countries using an animated scatter plot built with D3 v6. It renders circles positioned by each country's first and last recorded wage values, with a y-axis using a band scale for country names and an x-axis linear scale for wages. The visualization updates every two seconds by randomizing data points, demonstrating reusable chart patterns through the custom `scatterPlot` function that leverages `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Data comes from a CSV of country wage statistics, displayed as an SVG with smooth transitions between updates.

Loading thumbnail…

Fork of line chart

This example shows how a line chart can be used to display country GDP over time, with each line representing a different country. It uses Chart.js to render the chart on an HTML canvas element, fetching CSV data from a remote URL and parsing it into datasets. The chart is configured with labeled axes for GDP and Year, and the code explicitly sets axis labels via both Chart.js options and DOM manipulation. The rendering approach relies on Canvas 2D through Chart.js, with a fixed chart size of 800 by 400 pixels.

Loading thumbnail…

Fork of ICE-7 Line chart SKM

This line chart visualizes GDP trends for multiple countries over time, with each line representing a single country’s annual GDP values. The chart uses a linear x-axis for years and a linear y-axis for GDP, with colored lines distinguishing countries. It is built with D3 v7, loading data from a CSV file via `d3.csv`, and renders as an SVG using `d3.line` and `d3.scaleLinear`. Axis labels are rotated for readability, and the chart is styled with custom CSS for a clean, minimal presentation.

Loading thumbnail…

Fork of Akshitha Rapala Fork of ICE-7 Line Chart

This line chart shows the number of job titles per year from a dataset of country data. It uses D3 v7 to load a CSV file, parse the work_year field, and aggregate the data with d3.rollup to count entries per year. The visualization draws a single steel-blue line using d3.line and renders SVG axes with d3.axisBottom and d3.axisLeft, with labels for both axes.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example demonstrates an animated, reusable D3 scatter plot built with the reusable chart pattern. It visualizes country-level time series data, plotting each country's values for two different years on the x and y axes, with circles positioned using linear and band scales. The chart updates every two seconds by randomizing one country's data, triggering a re-render to illustrate dynamic data binding and transitions. Rendered as SVG with axes and circles, it emphasizes the modularity of D3's data-join and the flexibility of reusable chart components.

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This interactive pie chart visualizes country-level data for 2022, loading CSV data from a GitHub gist via the `d3.csv` API. It uses D3 v7’s `pie()` and `arc()` generators to compute and draw SVG paths for each slice, with colors assigned by `scaleOrdinal` and `schemeCategory10`. Hovering over a slice or label changes its fill to orange, providing immediate feedback. The chart is rendered inside a static SVG container, with text labels positioned at arc centroids using `arcGenerator.centroid()`.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length against petal width. The reusable chart component updates every two seconds, cycling through different x-axis columns to reveal patterns across all four flower measurements. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and data joins to render SVG circles. Each species appears as a distinct cluster, with axes and tooltips drawn from the `scatterPlot` factory function.

Loading thumbnail…

Fork of ScatterPlot

This scatter plot visualizes the relationship between sale price and number of ratings for iPhone products, using a dataset loaded via `d3.csv`. It shows individual data points as circles, with axes labeled for both variables. The code employs D3 v7’s `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for axes, and appends circles with `g.selectAll('.dot')`. Styling uses CSS for axis text and hover effects, while the fill color is conditionally applied based on product name.

Loading thumbnail…

Fork of Scatterplot of the Iphone sales

This scatterplot shows the relationship between the sale price of iPhones and their number of ratings, with each point representing a product model. The visualization uses D3.js v7 to load a CSV dataset of iPhone sales from a GitHub gist, parse the numeric fields, and render circles scaled by the sale price on the x-axis and ratings count on the y-axis. The code employs d3.scaleLinear for both axes, d3.extent for domain computation, and d3.axisBottom and d3.axisLeft for tick marks. Hovering over a dot changes its fill color to orange, while the default styling uses steelblue, as defined in the CSS.

Loading thumbnail…

Fork of Bar Graph

This example visualizes product sales by sale price using a bar graph, with each bar representing a product and its height reflecting the sale price. The chart displays the data from a CSV file, showing product names along the x-axis and sale prices on the y-axis. Built with D3 v7, it uses `d3.csv` to load the data, `d3.scaleBand` and `d3.scaleLinear` for positioning, and renders SVG rectangles for the bars. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with hover effects changing bar colors to orange.

Loading thumbnail…

ICE-6-DS-BarGraph

This bar graph displays iPhone sales data, showing the sale price for each product name using vertical bars. It uses D3.js v7 to load a CSV file from a GitHub gist and render an SVG chart. The code employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. Rectangles are drawn for each data point, with hover effects changing the bar color to orange.

Loading thumbnail…

ICE6-BarGraph

This bar chart from the D3.js and React gallery displays average car prices grouped by brand, using data loaded from a CSV file via `d3.csv`. The visualization uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the x-axis, rendering the bars as SVG `rect` elements within a React component. Gridlines and axis tick labels are generated using the scales' `.ticks()` and `.domain()` methods, presenting an interactive, data-driven view of pricing trends across automobile manufacturers.

Loading thumbnail…

Loading and Parcing CSV using d3

This example demonstrates loading and parsing a CSV file with the Fetch API, displaying file size, row count, and column count in a styled container. It then embeds an SVG image of smartphone sales data. The page uses vanilla JavaScript to fetch and split the CSV text, calculates the file size from response headers, and inserts the SVG via an `<img>` tag. Styling is handled with CSS, and the layout includes a header, details section, and footer.

Loading thumbnail…

Fork of Fork of Fork of Face with d3.js!

This example creates a playful SVG scene of a panda-filled landscape, including pandas, bamboo, a sun, clouds, a butterfly, and flowers, all rendered with basic shapes. The visualization uses static SVG elements defined directly in the HTML, with D3.js loaded via UNPKG but not actively driving the scene. The code demonstrates how to structure a self-contained visualization with inline styling, showing the capabilities of VizHub for creating simple graphics without data-driven transformations. The rendering is entirely SVG-based, relying on primitive shapes like circles, rectangles, and paths.

Loading thumbnail…

Fork of Fork of Cat smiley

This example shows a stylized cat smiley face constructed from yellow and black SVG shapes, complete with ears, eyes, and a red mouth. The code uses React to render the graphic and d3 v7’s `arc()` API to generate the curved paths for the mouth, eyes, and ears, which are then transformed into position. Additional SVG elements, such as circles, ellipses, and lines, create the facial features and whiskers. The drawing is centered within a fixed 960x500 viewport.

Loading thumbnail…

Fork of Cat smiley

This fork of a smiley face visual uses React and D3 to render a cat-like character with SVG shapes. It shows a pink circular head with purple ears, red eyes with black pupils, and multicolored whisker lines, all composed through geometric primitives like arcs, circles, ellipses, and paths. The code defines D3 arc generators for the mouth, eyes, and ears, then positions them with SVG transforms within a React component. The visualization is static, relying on hardcoded coordinates and D3’s arc API for curved elements.

Loading thumbnail…

Fork of Fork of Face with d3.js!

A smiling face built with d3.js renders as a yellow circle with elliptical eyes and arched eyebrows, all drawn as SVG shapes on a 960 by 500 canvas. The code uses d3.select and append to construct the face, while d3.arc defines the curved mouth and eyebrow paths. Eyebrows and eyes are positioned with SVG transform translations, and the face is centered using a group element. This example demonstrates basic d3.js v7 shape generation and SVG manipulation in a static, data-free visualization.

Loading thumbnail…

Fork of Fork of Face with d3.js!

A grid of five stylized smiley faces demonstrates how D3.js v7 can assemble SVG shapes from local data. Each face uses circles for the head and eyes, rectangles for eyebrows, and an `arc()` path for the mouth, with its start and end angles adjusted per expression, such as happy or angry. Distinct decorative elements—ears, a beard, or hair—are conditionally appended to individual faces based on the data’s `expression` field, while transformations like `scale()` and `skewX()` modify the eyebrow geometry. The example imports `select` and `arc` from the D3 library, which is loaded via UNPKG, and renders entirely through SVG elements created dynamically.

Loading thumbnail…

Fork of Fork of Cat smiley

Five stylized cat smileys, each with a distinct color scheme and scale, are arranged in a grid across a large SVG canvas. Built with React, the component renders each cat using D3’s arc generator to construct its mouth, eyes, and ears as SVG path elements. The code instantiates five attribute objects defining body, eye, and ear colors, positions, and size multipliers, which are passed to a reusable Cat component that draws the circles and arcs. Data is hardcoded in the `createCatAttributes` function.

Loading thumbnail…

Fork of cat

A violet smiley face rendered with React and SVG uses D3's `arc` generator to draw a curved mouth. Five purple lines form stylized whiskers, while black circles with yellow elliptical pupils serve as eyes. The face sits on a black-stroked circle in a 960x500 viewport, with React managing the component hierarchy and D3 computing the mouth path. Everything is produced as static SVG markup without animation or interactivity.

Loading thumbnail…

Fork of Fork of Face with d3.js!

This example builds a stylized cartoon face in SVG using D3 v7, rendering a yellow circular head, elliptical eyes, curved eyebrows, and a smiling mouth. The face is centered by translating a group element to the middle of the viewport, with shapes positioned using absolute pixel offsets. The code imports `select` from D3 and uses the `arc()` generator to create the eyebrow and mouth paths, while eye spacing and radii are defined as constants. All visual elements are drawn directly into an SVG canvas without external data.

Loading thumbnail…

Fork of Fork of Circles with D3

This example shows a digital natural scene with multiple butterflies rendered on a light blue background using HTML and CSS. Each butterfly is composed of styled div elements for wings, body, antennae, eyes, and legs, with color and size variations applied via classes and inline styles. The code relies on standard CSS positioning, border-radius for shapes, and transform rotations, with no JavaScript or D3 libraries involved. The scene demonstrates how pure HTML and CSS can create a static, decorative composition.

Loading thumbnail…

Fork of Dog graphics using Figma design. Used bezier curve.

This example displays five stylized dog graphics, each rendered as a distinct SVG element to showcase different visual techniques. The first dog uses a colorful checkerboard pattern via the `<pattern>` element, while the second adds black sunglasses using basic shapes. The third features large ears, the fourth employs a metallic coat through a `<radialGradient>`, and the fifth has a glowing yellow outline created with a `<filter>` and `feGaussianBlur`. The SVG drawing is generated directly from a Figma design, using bezier curves for the first dog’s shape.

Loading thumbnail…

Fork of Fork of Circles with D3

This visualization shows a natural scene built entirely with HTML and CSS, featuring a butterfly with detailed wings, a body, antennae, eyes, and legs set against a light blue sky-like background. The scene is constructed using pure CSS styling for all elements, with no JavaScript or data sources involved. The rendering approach relies on layered div elements and CSS positioning to form the butterfly’s anatomy, while the project structure includes a package.json file indicating it can be run locally. The code uses standard HTML markup and CSS properties, such as borders, borders-radius for wing shapes, and positioned elements, to create the final composition.

Loading thumbnail…

Fork of Fork of Cat smiley

A static SVG illustration of a cat smiley face, built with React and D3.js v7, renders a yellow circular head with black stroke outlines, white eyes with black pupils, and a red arc-shaped mouth. The code defines custom D3 arc generators (`arc()` with inner and outer radii) for the mouth, eyes, and black ears, which are positioned and rotated using SVG transform attributes. Additional hand-drawn paths and colored line segments create whiskers and facial details, all centered within a 960×500 viewport using absolute pixel coordinates.

Loading thumbnail…

Fork of Smile

A yellow circle face with eyes, eyebrows, and a mouth forms a static smiley, but the right eyebrow performs a brief animated wink-like movement before settling back. The SVG is drawn using D3 v5 selections and the `arc` generator for the mouth path, with transitions applied to the eyebrow's vertical position over two timed stages. The face is centered at 960 by 500 pixels, using pure SVG shapes without any external data.