lokeshp-0813

@lokeshp-0813·6 public vizzes

Fork of Rendering Data with React & D3

This visualization renders CSS named color data as a radial burst, with each color represented as a wedge emanating from the center of an SVG canvas. Using React for component rendering and state management, it loads the dataset via d3.csv, then applies d3.pie and d3.arc to compute the angular segments. Each path’s fill is set to its corresponding RGB hex value from the data, creating a striking circular display of the full color palette.

Jul 27, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays an interactive scatter plot of vehicle data, mapping miles per gallon against horsepower, with points colored by region of origin and sized according to vehicle weight, along with tooltips revealing car model names. Built using the Vega-Lite API, the code registers vega, vega-lite, and vega-tooltip, then renders a circle mark with quantitative and nominal encodings. Data is loaded asynchronously via `d3.csv` from the UCI Auto MPG dataset hosted on GitHub, and the chart fills the browser window with a custom configuration for axis styling.

Jul 27, 2023

Loading thumbnail…

Fork of Smiley Face Part III

A simple smiley face rendered as an SVG using React and D3. The face comprises a yellow circle for the head, two black eye circles, and a mouth drawn as an arc path. The SVG elements are positioned with fixed coordinate offsets, and D3's `arc` generator computes the mouth's path with specified inner and outer radii and angular range. The visualization is built with React components, and the root `svg` is rendered to the DOM via `ReactDOM.render`.

Jul 27, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This visualization renders a full-window smiley face using React and SVG. It draws a yellow circle with a black outline for the face, along with two smaller filled circles for the eyes, all positioned relative to the window’s center and dimensions. The code uses React and ReactDOM to generate the SVG elements programmatically, with the face’s size and eye placement computed from the current window width and height.

Jul 27, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

A fork of a basic SVG visualization that sketches a smiley face. The composition uses two black-stroked circles for the eyes and a single large yellow circle with a black outline as the face, all rendered directly through SVG markup in an HTML file. The page includes an embedded YouTube tutorial link, and the title indicates this is part one of a face-building exercise. The code defines all shapes with explicit pixel coordinates and stroke widths within a 960 by 500 viewport, using no external JavaScript libraries.

Jul 27, 2023

Loading thumbnail…

Fork of Smiley Face Part III

This fork of Smiley Face Part III renders a classic smiley face using React and D3.js, drawing the face as a set of SVG circles and a mouth arc. The yellow head and black outline are defined with a large circle, while the eyes are positioned using relative offsets, and the mouth is generated with the D3 `arc` function, specifying inner and outer radii and angular range. The entire visualization is constructed declaratively within a React component, producing SVG output.

Jul 26, 2023