S

Somu1433

@Somu1433·21 public vizzes

Loading thumbnail…

Penguin Scatter Plot

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with each point colored by species using an ordinal color scale. The visualization uses D3 v7’s `d3.csv` to load a remote penguin dataset, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` to render the axes. Circles are drawn as SVG elements with `d3.selectAll` and `.join`, while axis labels are added via SVG text elements. The code loads data from a GitHub Gist and renders the chart within an SVG container.

Loading thumbnail…

Penguin Scatter Plot

This scatter plot visualizes the relationship between flipper length and body mass for different penguin species, with each point colored by species using D3’s ordinal scale and the category-10 palette. The plot uses D3’s scaleLinear, extent, and axisBottom/axisLeft to construct the axes and scales, while the data is read from a remote CSV file via d3.csv. SVG circles are placed through a join operation, with labels appended as text elements for both axes.

Loading thumbnail…

Untitled

This example demonstrates a minimal React-powered HTML page that combines CSS styling with JavaScript functionality. It showcases the fundamental structure of a web application using the React library, with index.html serving as the entry point and README.md documenting the setup. The code directly imports React components and renders them into the DOM, illustrating how React manages UI state and updates without requiring additional visualization libraries. No specific data visualization technique is applied; instead, the focus is on establishing a basic React project scaffold as referenced by the React Starter example.

Loading thumbnail…

Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length on the x-axis and body mass on the y-axis, with each circle colored by species (Adelie, Gentoo, or Chinstrap). It also encodes bill length and bill depth as the circle’s `rx` and `ry` attributes, though these do not affect the circular shape since `r` is fixed. The code uses D3 v5 APIs (`csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`) to load data from a gist URL, scales the coordinates, and renders an SVG with circles and labeled axes.

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the ten most populous countries as horizontal bars on an SVG canvas, with each bar’s length encoding the population value. Built with React and D3 v5, the code uses `d3.csv` to load data from a remote GitHub Gist, `d3.scaleBand` for the categorical country axis, and `d3.scaleLinear` for the numeric population scale. The bars are rendered as SVG `rect` elements, each assigned a unique color via CSS `nth-of-type` selectors, with tick marks and labels generated using D3’s scale methods.

Loading thumbnail…

My D3.js Face

This gallery example shows a stylized smiley face built directly in SVG, with individual `<circle>` and `<path>` elements for the head, eyes, nose, mouth, hair, and ears. Using D3.js v6 within a React framework, the illustration combines static geometry with rotation and translation transforms for the eyebrows and mouth, creating a playful character. The code also demonstrates a custom D3 selector (`d3.selectAll`) to group elements like the eyes and brows, while inline CSS defines the face palette—yellow, brown, and skin tones—against a white background.

Loading thumbnail…

Weird Smiley Face

A stylized smiley face built with React and D3 renders as an SVG, with asymmetrical eyes, rotated brows, a triangular nose, and an open mouth arc. React components manage the SVG elements, while D3’s `arc` generator defines the mouth, brow, and inner mouth paths. Eyebrows and mouth are repositioned using SVG `transform` rotations and translations, and facial features are styled with varied fills, strokes, and opacity.

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a stylized smiley face composed of SVG shapes, with distinct eyes, eyebrows, nose, mouth, and hair rendered in React. The face is centered within a 960×500 viewport, using a yellow circle for the head and colored arcs for the eyebrows and mouth. The code leverages React for component rendering and D3’s `arc()` generator to create the curved eyebrow and mouth paths, applying rotations and translations via SVG transform attributes. Stroke widths, fill colors, and opacity vary across features, highlighting the mix of D3 geometry helpers with declarative React markup.

Loading thumbnail…

Fork of Fork of Smiley Face Part III

A stylized smiley face built with React and D3 v5, rendered as SVG. The face includes yellow circular head, asymmetrical eyes with pupils, a purple triangular nose, grey eyebrows, and a white mouth drawn using d3.arc paths with rotations and translations applied. Additional facial features like hair and eyestalks are drawn with path elements, while the mouth uses two concentric arc paths with distinct stroke styling. The code defines arc generators for the mouth and eyebrows, and applies transforms to rotate and reposition these components.

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a stylized smiley face composed of SVG shapes, with distinct eyes, eyebrows, nose, mouth, and hair rendered in React. The face is centered within a 960×500 viewport, using a yellow circle for the head and colored arcs for the eyebrows and mouth. The code leverages React for component rendering and D3’s `arc()` generator to create the curved eyebrow and mouth paths, applying rotations and translations via SVG transform attributes. Stroke widths, fill colors, and opacity vary across features, highlighting the mix of D3 geometry helpers with declarative React markup.

Loading thumbnail…

Fork of Smiley Face Part III

A React and D3 composite renders a stylized smiley face using SVG primitives. The face features asymmetric eyes—one white with a black outline, the other light blue with a green outline—along with a purple triangular nose, gray rotated eyebrows, a white arc-shaped mouth with a concentric seam, and black hair-like strokes. D3’s `arc` generator constructs the mouth and eyebrow curves, while SVG `<circle>` and `<path>` elements define the remaining features. The composition is centered via a translated `<g>` group, with rotations applied to the mouth and eyebrows for expressive positioning.

Loading thumbnail…

My D3.js Face

This D3.js and React example constructs a stylized smiley face using SVG primitives, combining circles, paths, and rectangles for its features. The face is assembled with D3 selections and vector drawing, including a mouth arc generated by the `arc()` API. The implementation also includes an animated eyebrow movement using the `transition()` method, which repeatedly shifts the eyebrows up and down over two-second intervals. The code demonstrates a hybrid approach, mixing declarative React components for some facial elements with imperative D3 commands for others, all rendered as static SVG within the page.

Loading thumbnail…

Fork of the funn face

A cartoon face constructed from modular React components renders in SVG. The face features a gradient-filled circular head, elliptical eyes, an arc-based mouth, and teeth drawn with lines and arcs. Built with React components and D3's `arc` generator for the mouth and teeth shapes, the face is assembled from reusable parts like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Teeth`. The visualization demonstrates a declarative component approach to creating SVG shapes with D3 utilities within a React framework.

Loading thumbnail…

Fork of Smiley Happy Face with D3.js

This example presents a classic smiley face built with vector shapes. It shows a yellow circular face with distinct eyes, eyebrows, a nose, a mouth, cheeks, hair, and teeth, all styled as SVG elements. The visualization uses D3.js version 3's selection and manipulation API, specifically `d3.select` and `svg.append`, to create the shapes. Styling, including transforms for positioning and rotation, is applied through an external CSS file, while the face is rendered using SVG primitives like circles and lines.

Loading thumbnail…

Smiley Happy Face with D3.js

This example presents a classic smiley face built entirely from SVG shapes. The face, eyes, eyebrows, nose, mouth, cheeks, hair, and teeth are all created using D3.js selection and append methods, which add circles, lines, and paths to the SVG canvas. The styling is handled through a separate CSS file, using transform properties for positioning and rotation. The code demonstrates D3’s basic API for constructing static, styled visual elements with data-driven markup.

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays the text “Hello HTML!” centered on a plain white page. The message is styled using a CSS rule that sets the font size to 13em and aligns the text to the center of the viewport. The implementation relies on a single `index.html` file that combines embedded `<style>` and `</style>` tags with standard HTML markup. No JavaScript libraries or data sources are used; the page is a minimal demonstration of basic HTML and CSS for static visual output.

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” in large, centered type using a simple CSS class. The page structure comes from a minimal `index.html` file with an embedded `<style>` block that sizes the message to 13em and aligns it to the middle of the viewport. It serves as a basic starter template demonstrating static HTML and CSS rendering without any external libraries or JavaScript logic. The fork builds on an original HTML starter from VizHub, offering a clean base for further customization.

Loading thumbnail…

Fork of Face with D3.js

This example draws a stylized cartoon face using D3.js v3 selections and SVG primitives. It appends circles for the face, eyes, and nose, lines for eyebrows, and additional shapes for ears, hair, and teeth, all styled via CSS transforms and classes. The code directly constructs each element with `d3.select`, `append`, and `attr` calls, rendering static geometry into a 400x400 SVG container without data binding or animation.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A smiley face built with D3.js animates by raising and lowering its eyebrows. The code selects an SVG canvas and constructs the face from basic shapes, including circles for eyes and a path for the mouth using `d3.arc`. Eyebrow movement is achieved with chained `transition().duration()` calls that shift the rectangle positions over two seconds. The example uses D3 v5, imported via `d3.select` and `d3.arc`.

Loading thumbnail…

Face with D3.js

This example draws a cartoon face using D3.js. The visualization constructs facial features—including the head, eyes, eyebrows, nose, mouth, ears, hair, and teeth—as individual SVG shapes. The code creates these elements by chaining `d3.select` and `.append` calls to add circles, lines, and paths to the SVG canvas, with dimensions controlled via geometry attributes. Styling is applied through a linked stylesheet that positions the features using CSS transforms. The data is hard-coded within the JavaScript, with the SVG output rendered at 400 by 400 pixels.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a cartoon smiley face from SVG elements, including a circle for the face, white eyes, colored eyebrows, a nose, mouth, ears, hair, and teeth. The code uses d3.select to append and style each shape with class-based CSS transformations. It relies on D3 v5 via a CDN link, rendering entirely in SVG without data binding, instead showcasing direct element creation and attribute assignment as a beginner-friendly exercise.