Siddhesh Palande

@siddheshpalande·8 public vizzes

load csv data and display

This example demonstrates how to load a remote CSV file using the D3.js library and display basic metadata about the dataset. The code fetches a CSS named colors CSV from a GitHub gist and reports the total byte count, number of rows, and number of columns in a large-text `<pre>` element. It uses `d3.csv` to parse the remote data and `csvFormat` to calculate the file size, with a simple `.then()` callback updating the page content directly.

May 1, 2021

Loading thumbnail…

React mouse follower

A React mouse follower demonstrates a circle tracking the cursor across an SVG canvas. Using React's `useState` and `useCallback` hooks, the component updates the circle's `cx` and `cy` coordinates on every `onMouseOver` event, binding `clientX` and `clientY` to the SVG circle. The fixed 960×500 viewport starts the circle centered, and the lightweight interaction shows declarative state-driven rendering with React 17 and D3 v6 in the SVG namespace.

May 1, 2021

Loading thumbnail…

Refactor React - Smiley Face

A React component renders a yellow smiley face as a scalable vector graphic, composed of a circular background, two eyes, and a smiling mouth. The face is built from separate functional components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—that accept numeric props for dimensions and positioning. The mouth uses the `d3.arc` generator from d3.v6 to create a semicircular path, while all elements are centered within an SVG container via a translation transform. The example demonstrates how to structure reusable, data-driven visual components with React and D3.

May 1, 2021

Loading thumbnail…

React - Smiley Face Part I

A React component renders a yellow smiley face as an SVG graphic. D3's `arc` generator creates the mouth path, while the face, eyes, and stroke are defined with primitive SVG elements. The code imports React and `arc` from d3, and uses ReactDOM to mount the component into the page. All geometry is computed from fixed constants for width, height, offsets, and radii.

May 1, 2021

Loading thumbnail…

Smiley Face Part I

A yellow circle with a black outline forms the face, centered within an SVG canvas. Two smaller black circles serve as eyes, positioned symmetrically on the upper half of the face. The graphic uses raw SVG elements—specifically `<circle>` tags with attributes for center coordinates, radius, fill color, and stroke—to construct the simple smiley face. No additional libraries or JavaScript are employed, relying entirely on static SVG markup for its rendering.

Apr 30, 2021

Loading thumbnail…

Starting with Bar Chart

This example shows a horizontal bar chart comparing the weights of four individuals, with names on the y-axis and weight values on the x-axis. The data loads from a CSV file via `d3.csv`, and the chart uses `d3.scaleLinear` for the quantitative axis, `d3.scaleBand` for categorical spacing, and `d3.axisLeft`/`d3.axisBottom` for ticks. Bars render as SVG rectangles with a steelblue fill, positioned using the scales’ computed dimensions and padding.

Nov 28, 2020

Loading thumbnail…

Boilerplate for practice

This example shows a blank SVG canvas with the text “Boilerplate for practice” rendered above it. The visualization does not display any data or visual elements; it is an empty scaffold for future development. The code uses the D3.js library (version 6.2.0) and retrieves the SVG dimensions by selecting the `svg` element and reading its `width` and `height` attributes. The page layout is styled with CSS that removes margins and hides overflow.

Nov 26, 2020

Loading thumbnail…

Smile Face

A smiling face constructed from SVG shapes is rendered and animated with D3.js v6. The code uses D3's `select` and `arc` APIs to draw the yellow head, black eyes, rectangular eyebrows, and a white mouth. The eyebrows are animated with chained `transition` calls, moving them up and down over two-second intervals. The visualization centers the face within a 960x500 SVG canvas.

Nov 25, 2020