Animated Periodic Table
A animated periodic table built with modern frontend techniques for responsive and reusable UI.
Data Visualization
19 snippetsWelcome to the Data Visualization resource page — a curated directory for developers. Browse practical UI patterns, specialized libraries, and small interactive demos. Use the table of contents to explore subcategories below.
javascript-data-visualization
Snippets(19)
Centennial Timeline with Google SheetsA centennial timeline with google sheets built with modern frontend techniques for responsive and reusable UI.
Goal ProgressA goal progress built with modern frontend techniques for responsive and reusable UI.
Motion Blurred Number CounterA motion blurred number counter built with modern frontend techniques for responsive and reusable UI.
Thermometer with AnimationA thermometer with animation built with modern frontend techniques for responsive and reusable UI.
Animated D3.js Pie Chart with Elastic EasingA animated d3.js pie chart with elastic easing built with modern frontend techniques for responsive and reusable UI.
D3 Line Marker ChartA d3 line marker chart built with modern frontend techniques for responsive and reusable UI.
Nested Animated Doughnut Data VisualizationA nested animated doughnut data visualization built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Dual Series, Central Totalizer, HSL Stepping, Animated Entry
Semicircular Animated Radar GaugeA semicircular animated radar gauge built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Radial Progress, Dynamic Theming, Rounded Columns, Animated Entry
Serpentine Timeline ChartA serpentine timeline chart built with modern frontend techniques for responsive and reusable UI.
Simple SVG Circle Graph with AnimationA simple svg circle graph with animation built with modern frontend techniques for responsive and reusable UI.
Semantic Custom Progress Bar KitA semantic custom progress bar kit built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Semantic Hydration, Gradient Fills, Striped Patterns, CSS Variables
Incrementing CounterA incrementing counter built with modern frontend techniques for responsive and reusable UI.
Animated Pie Chart (V2)A animated pie chart (v2) built with modern frontend techniques for responsive and reusable UI.
Technologies
SVG, GSAP, JavaScriptFeatures
Animated segments, Hover interactions, Adaptive ring design
3D Rotating Value DialA 3d rotating value dial built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 111+, Edge 111+, Firefox 108+, Safari 15.4+Features
Trigonometric Layout, Layered Text, Dynamic ColorResponsive
Yes
Glitch Equalizer with Web Audio API and CanvasA glitch equalizer with web audio api and canvas built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, HTML5 Canvas, Web Audio APIDifficulty
intermediateFeatures
Real-time audio analysis, Dynamic glitch animation, Frequency visualization
Container-Aware Plotly ChartA container-aware plotly chart built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 64+, Edge 79+, Firefox 69+, Safari 13.1+Features
Element Resizing, Data Fetching, Fluid LayoutResponsive
Yes
Dynamic Data-Driven Tag Cloud ComponentA dynamic data-driven tag cloud component built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 42+, Edge 14+, Firefox 39+, Safari 10.1+Features
Data-Driven Scaling, Fetch API, Inset Hover FillResponsive
Yes
Oculus II: Immersive 3D Weather StationA oculus ii: immersive 3d weather station built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
3D Parallax, Particle System, Real-time API Data, Procedural TexturesResponsive
Yes