saideep1612@gmail.com

@saideep16·4 public vizzes

Employee bar chart

This example visualizes employee data using two side-by-side bar charts rendered as SVG. The left chart displays BMI values, while the right chart shows grouped comparisons of height and weight for each employee. It loads data from a CSV file using D3’s `csv` method and builds scales with `scaleBand` and `scaleLinear`. Axes are generated via `axisBottom` and `axisLeft`, with rounded bars and rotated labels. React manages the component state, while D3 handles the rendering, making the dataset’s categorical and numerical dimensions directly comparable across the two panels.

Mar 20, 2024

Loading thumbnail…

my p1

This visualization presents a dual-panel bar chart comparing BMI, height, and weight for individuals from a BMI dataset. The left panel displays BMI values as rounded teal bars, while the right panel shows paired orange and blue bars for height and weight, respectively, using a grouped layout. The chart uses React state to load and parse CSV data with D3’s `csv` function, converting string fields to numbers. Axes are rendered via `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`, with rotated labels and descriptive titles, all drawn as SVG elements within a React component.

Mar 20, 2024

Loading thumbnail…

Fork of Responsive Scatter Plot

This example visualizes employee age against salary in a responsive scatter plot, using D3 v7’s `d3.csv` to load data from a remote CSV file and `d3.scaleLinear` to map the values. The chart draws SVG circles for each employee, with axes generated via `d3.axisBottom` and `d3.axisLeft`, and includes labeled axes for Age and Salary. The code also incorporates the `@curran/responsive-axes` library for flexible axis handling and a custom `viz` function, which applies margins, an inner rectangle background, and adjustable circle radius and opacity. The plot is rendered entirely in SVG, with a fixed initial size but structured to support responsive resizing.

Mar 20, 2024

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates a minimal "Hello World" visualization using the VizHub V3 Runtime Environment, showing how continuous hot reloading enables live editing of a number in the code to change the rendered font size via the Alt-drag interaction. It uses the exported `main` function, which receives a container DIV element with measurable dimensions and sets its `innerHTML` to display the text. The rendering approach is plain DOM manipulation via a template literal, with no external libraries, focusing on the runtime’s core feature of real-time feedback during development.

Mar 19, 2024