Skip to main content
SimilarExport ZIP
100%

Semiconductor 1

✓ Published1🌍 Public
NNita
Last edited Aug 3, 2025
Created on Aug 3, 2025
Forked from HTML Starter

This interactive visualization introduces semiconductor concepts through a clickable diagram of silicon crystal structures. It uses HTML DOM elements created via JavaScript to render silicon, phosphorus, and boron atoms with colored electron and hole markers. Users can click buttons to switch between pure, N-type, and P-type semiconductor views, with accompanying text explanations. The visualization relies directly on DOM manipulation and event listeners rather than a charting library.

AI-generated description

Semiconductor Explained

This is a simple interactive visualization that helps beginners understand:

  • What semiconductors are
  • How pure silicon atoms arrange in a crystal structure
  • How doping creates N-type and P-type semiconductors
  • The concept of electrons and holes in semiconductors

How to Use

  1. Open index.html in a web browser
  2. View the initial pure silicon crystal structure
  3. Click "Dope with Phosphorus" to see N-type semiconductors
  4. Click "Dope with Boron" to see P-type semiconductors
  5. Click "Reset" to return to the pure silicon view

The visualization shows:

  • Silicon atoms (gray)
  • Doped atoms (pink)
  • Electrons (blue)
  • Holes (orange)
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Semiconductor 2

This example presents a simple educational webpage explaining atomic structure with an animated SVG atom model. It shows a red nucleus at the center of a circular diagram with four blue electrons orbiting around it, paired with text sections describing atoms and electrons. The implementation uses inline SVG elements with CSS keyframe animations and JavaScript that sets staggered animation delays on each electron to create a continuous orbital effect. The visual arrangement is rendered directly in the HTML file with accompanying stylesheet styling.

NNita
68% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This bar chart traces the shrinking feature size of semiconductor devices from 1966 to 2021, with each bar representing a specific processor or logic chip. A logarithmic y-axis scales the nanometer values, while hovering or clicking a bar highlights the selected device. The visualization combines React state management with D3 v7 for rendering, using `d3.scaleBand` and `d3.scaleLog` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and CSS transitions for interactive feedback. Data is loaded from a CSV file.

NNita
60% match
Loading thumbnail…

Fork of HTML Starter

This dashboard analyzes semiconductor manufacturing sensor data from the UCI SECOM dataset, visualizing fault detection with a dark-themed layout. It combines four Chart.js (v4.4.1) canvas charts: two donut charts showing class balance and feature quality, a horizontal bar chart ranking top sensors by Cohen's d effect size, and a distribution chart for the strongest feature. The code dynamically loads Chart.js from a CDN and uses custom legends, HTML/CSS stat cards, and responsive grid styling.

Bbrodyoneal10@gmail.com
60% match
Loading thumbnail…

Tree map ICE 8

This interactive tree diagram visualizes a small hierarchical dataset about Intel chip categories, including microprocessors and microcontrollers. Built with React and D3.js, the SVG-based visualization uses animated transitions to reposition nodes and links when users click to expand or collapse branches. The code leverages D3's layout and diagonal projection APIs, with a color-coding function that assigns red to the root and blue to child generations, while CSS styles define node and link appearance.

Pprajoth0405
58% match
Loading thumbnail…

Electrical Circuit

This interactive simulation shows a simple DC electrical circuit with a battery, resistor, LED, wires, and circuit board, along with animated yellow particles representing electron flow. A control panel adjusts voltage and resistance, toggles power, and switches between circuit and 3D views, with current and power readouts updating live. Built with Three.js and OrbitControls, the scene uses WebGL rendering with directional lighting, procedural geometry for components, and real-time animation driven by sliders.

NNita
58% match
Loading thumbnail…

Electronics Tree

A tree diagram displays a hierarchical classification of electronics, branching from "Electronics" into "Display," "Audio," and "Non-display," which further splits into "Fan," "AC," and "Fridge." This example uses D3 v2's `d3.layout.tree` and `d3.svg.diagonal` to compute node positions and draw connecting links on an SVG canvas. Nodes are color-coded by category (yellow for root, pink for main branches, purple for leaves) and interactive tooltips appear on mouseover. The visualization is rendered as static SVG, not animated, despite the metadata listing "animation."

PPriyaEnuganti
58% match
Loading thumbnail…

PERIODIC TABLE

This interactive periodic table maps common data visualization types onto a grid of colored circles, each labeled with a two-letter abbreviation. Users can hover to see the full chart name, click to log it to the console, and press to temporarily change the fill. Built with D3 v5, it uses SVG rendering, CSV data loading via `d3.csv`, and mouse event handlers for tooltips and interaction.

JJoker-tr
57% match
Loading thumbnail…

Electrical Circuit

This interactive Three.js simulation demonstrates Ohm's law in a 3D electrical circuit, showing how voltage and resistance affect current, power, and animated electron flow. Users adjust sliders and toggle power to observe real-time changes in the circuit's behavior. The scene includes 3D models of a battery, resistor, and LED, with WebGL rendering and orbit controls for perspective viewing. The code relies on the Three.js library for 3D scene management and animation, presenting circuit physics through direct manipulation of electrical parameters.

NNita
57% match