Milind Nirgun

@milindnirgun·4 public vizzes

Rough with React

This example shows a hand-drawn smiley face constructed from reusable React components, including a yellow circle background, symmetric eyes, and an arc-based mouth. It emphasizes component composition with React fragments and props for customization. The visualization uses React 17 with SVG rendering, and the mouth path is generated using D3’s `arc()` function. A separate Pie chart from `react-roughviz` is also rendered, using data labels and values with custom colors and rough styling, though the smiley face is the primary focus.

Mar 16, 2021

Loading thumbnail…

HTML+JS starter

This example shows two hand-drawn-style charts rendered side by side: a donut chart for regional values labeled North, South, East, and West, and a horizontal bar chart comparing two categories. The code uses the roughViz library, loaded via a CDN, to create the charts with customizable roughness, cross-hatch fill, and stroke properties. Data is defined inline as JavaScript arrays within the script, and the charts are targeted by DOM element IDs. The page is styled with minimal CSS for centered, large-text body layout.

Mar 15, 2021

Loading thumbnail…

Fork of React Starter

This example shows a React application that renders the text “Hello React!” centered on the page using a large font size. It displays a static message within a div styled via inline CSS. The code uses React and ReactDOM, importing both from their production UMD builds, and mounts the component to the root div. The rendering approach relies on React’s `ReactDOM.render` method with a functional component defined in JavaScript. No external data sources or interactive visualizations are present; it serves as a minimal starter template.

Mar 15, 2021

Loading thumbnail…

Smiley

A smiling face is drawn with a yellow circle, black-outlined eyes, and a curved mouth, all composed from SVG primitives. The example is built with React and D3, where variables like `eyeOffsetX`, `eyeRadius`, and `mouthRadius` control facial feature placement and size. D3’s `arc` function generates the mouth’s path, while React fragments group eye circles. The SVG output is assembled via a custom `Face` component that layers a background circle, eyes, and mouth inside a transformed group.

Feb 28, 2021