Pratik Karna

@thepratik786·4 public vizzes

Fork of Fork of Let's Make a Face Part I

A stylized smiley face is drawn as a set of SVG shapes, with a gradient-filled background circle, two asymmetric eyes, a mouth arc, and a row of teeth rendered as lines. Built with React and D3 v7, the face’s geometry is parameterized as props, and D3’s `arc` generator creates the mouth and teeth paths. The teeth use hard-coded coordinate offsets to simulate individual tooth separations, while the SVG is assembled from reusable component functions with a linear gradient defined in `defs`.

Sep 7, 2022

Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

This visualization shows the top ten cricket players ranked by their total runs, displayed as a pie chart with a color-coded legend. The chart uses a categorical color scheme to distinguish each player, with the arc length proportional to their run count. Built with D3 v5, it loads data from a JSON file and renders the pie chart using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for colors. The legend, placed to the right, pairs each player's name with their run total, formatted using `d3.format`.

Sep 1, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays the word “pratik karna!”, centered and scaled to 13em, within an HTML page. It demonstrates a minimal setup using plain CSS for styling and JavaScript for potential interactivity, though the provided code only contains static markup. The page structure relies on standard HTML elements and CSS rules, with no external libraries or APIs referenced. The visualization is a simple, text-based output that highlights how basic web technologies can present content without any dynamic data or rendering logic.

Sep 1, 2022

Loading thumbnail…

Fork of Hello Pratik

This example demonstrates how to combine D3.js with local ES6 modules in a VizHub project. It uses `d3.select` to target a `div` element by its ID and sets its text content to a message imported from a separate `myMessage.js` module. The page loads D3 v5 from UNPKG and relies on a bundled JavaScript file. Custom styling centers the message with a large font size. The visualization shows a simple text output rather than data-driven graphics, highlighting modular code organization.

Sep 1, 2022