harichandanamone21@gmail.com

@errorz-1·13 public vizzes

Fork of Reusable D3 Scatter Plot

This pie chart shows the frequency distribution of the top 10 most common math scores from a student dataset, with each slice representing a score and its count. The visualization uses D3.js v7 to load CSV data, calculate score frequencies, and sort them to select the highest counts. D3’s `pie` and `arc` generators create the SVG paths, while a custom color palette (filtered from `d3.schemeCategory10`) fills each slice. A separate SVG legend, built with `d3.select` and data joins, maps colors to score values and counts, with the chart and legend displayed side by side in a flex container.

Mar 28, 2024

Loading thumbnail…

med

This animated scatter plot compares company financial metrics—Revenue, Expenses, and EmployeeCount—against Profit, cycling the x-axis variable every two seconds. Built with reusable D3 v6 modules, it uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes and circles from the provided revenue CSV. The visualization demonstrates a modular chart pattern with configurable accessors, margins, and radius, while the SVG updates in place via D3’s data join and a `setInterval` loop. The dataset and styling (Share Tech font, full-window layout) come from the linked gist and local CSS.

Mar 27, 2024

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a reusable D3 scatter plot that visualizes the Iris Dataset, with animated transitions between different medical measurements. It shows a static scatter plot initially, then cycles through the dataset’s numerical columns every two seconds, updating the x-axis to reflect the selected variable while the y-axis remains fixed on lymphocyte count. The visualization uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, and `selection.join` to manage circle elements. Data is loaded from a CSV file, and the animation uses `setInterval` to repeatedly update the chart.

Mar 27, 2024

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot cycles through three blood-related measurements from a medical dataset, displaying a different x-axis variable every two seconds. The visualization uses D3 v6 with a reusable chart module that maps data points to circles, scaling positions with linear axes. It animates by calling a custom `scatterPlot` function with different accessor functions, updating the chart in place. The plot reads CSV data from a remote gist, and the axes are rendered with `axisLeft` and `axisBottom`. The circular markers transition smoothly between states, demonstrating a flexible, data-driven approach to multi-variable exploration.

Mar 27, 2024

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes weather data from a CSV file, allowing viewers to cycle through humidity, precipitation, and pressure on the x-axis while temperature remains on the y-axis. Using D3.js version 6, the chart employs `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes, with a `setInterval` driving automatic transitions between attributes every two seconds. Circles are drawn via `selection.selectAll` and `join` with a fixed radius, while margins and dimensions adapt to the window size. The Iris dataset is not shown here; instead, weather observations are sourced from a gist-hosted CSV, and styling uses the Share Tech font.

Mar 27, 2024

Loading thumbnail…

Fork of CSV Dataset Template - Penguins

This example demonstrates how to display a parsed CSV dataset by rendering the first row of the Palmer Penguins data as formatted JSON. It shows the raw structure of a single data record, including both quantitative and categorical attributes, before any further analysis. The visualization uses the `data.csv` import and parses numeric fields like `bill_length_mm`, `bill_depth_mm`, `flipper_length_mm`, and `body_mass_g` with unary plus operators. The code then inserts a `<pre>` element with the JSON string into the container, leveraging the `main` export function and the `data` export for reuse.

Mar 27, 2024

Loading thumbnail…

Fork of Akhil -vizhub assignment bat-scatter

This horizontal bar chart displays product prices from a CSV file, with each bar’s length and color intensity encoding the price value. The visualization sorts products by price and uses a light-to-dark blue linear scale for color encoding. Built with React hooks and D3 v5, it employs `scaleBand` for categorical y-axis placement, `scaleLinear` for the quantitative x-axis, and `csv` for data loading. The SVG rendering includes labeled axes, tick marks, and gridlines, with all marks and channels generated imperatively within React’s `useEffect` and rendered as SVG elements.

Mar 21, 2024

Loading thumbnail…

Fork of Fork of Simple Bar Chart

This example shows the relationship between employee salary and employee ID as a scatter plot. The visualization encodes salary on the x-axis and employee IDs on the y-axis, with each employee represented by a small circle. The code loads salary data from a CSV file using d3.csv, then creates linear and band scales with d3.scaleLinear and d3.scaleBand to map the data to screen positions. Axes are rendered with d3.axisLeft and d3.axisBottom. The SVG rendering approach is used, with circles appended via d3.selectAll and join.

Mar 20, 2024

Loading thumbnail…

Fork of Fork of Face with d3.js!

This example creates a garden of six orange flowers with yellow centers, each composed of six petal-shaped paths arranged in a circle. It demonstrates loading data from a CSV file using `d3.csv`, displaying dataset size and column information, and generating SVG graphics with D3 v7. The flowers are positioned using fixed coordinates and drawn with `path` elements calculated from trigonometric petal angles, while a yellow `circle` forms each center. The code also showcases importing D3 via UNPKG and local ES6 modules, along with basic CSS styling for centering and theming.

Mar 6, 2024

Loading thumbnail…

Fork of Create a face with d3.js!

This example builds a colorful landscape scene with a house, sun, clouds, palm trees, and fence rendered as SVG shapes using D3 v7. The code demonstrates basic selection and append operations via `d3.select`, along with data binding through `d3.line()` and `curveBasisClosed` to draw the cloud path. Each element, from the house's rects and polygons to the tree trunks and fronds represented as lines, is positioned with explicit coordinates and filled with named colors. The visualization shows how D3 can be used for static, non-data-driven illustrations.

Feb 28, 2024

Loading thumbnail…

Fork of Create a face with d3.js!

This example uses D3 v7 to draw a cartoon cat entirely from SVG primitives, combining circles, ellipses, lines, and paths to form the body, head, ears, eyes, nose, mouth, whiskers, and tail. Each element is created manually via `document.createElementNS` and appended to an SVG container, avoiding D3 data joins or scales. The static illustration uses fixed pixel coordinates and a gray, black, and pink palette, demonstrating direct SVG manipulation within a minimal HTML and CSS setup.

Feb 27, 2024

Loading thumbnail…

Fork of Create a face with d3.js!

A yellow SVG face with circular eyes, rectangular eyebrows, and an arc-shaped mouth is drawn using D3 selections and shape generators. The eyebrows animate upward and back down via chained `transition` calls that tween the group's `transform` attribute. The example imports `select` and `arc` from D3 v7 and renders entirely with SVG elements positioned around a centered group, with eyebrow motion driven by timed attribute updates.

Feb 26, 2024

Loading thumbnail…

Fork of Monkey.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a monkey SVG from scratch. It shows a static smiley-faced monkey with a tail, hands, ears, and a yellow banana, all created using raw SVG elements such as `circle`, `ellipse`, `path`, and `rect`. The code uses `document.createElementNS` and `setAttribute` to construct each shape, then appends them to an SVG canvas selected via `getElementById`. No data source is involved; the visualization focuses purely on programmatic SVG composition without D3 selections or transitions.

Feb 26, 2024