📄 CSS

10 CSS Checkout Forms

CSS design Awards

Styled Components vs Sass in 2019

Rich docs with Storybook MDX

styled-components는 어떻게 동작할까?

Top 18 CSS Animated Gradient Examples

Beautiful CSS box-shadow examples

다양한 CSS 예제 모음

탭 모서리를 라운드로 만드는 방법

CSS 변수 합성의 강력함

야무님의 Graphics ARIA Guide

야무님의 SVG Gitbook

CSS GPU 애니메이션 제대로 하기

스크린리더에서 content=''는 읽힌다

---

📄 Graphics

Webgl, Opengl, Shader, Webgpu, WASM

2020년과 이후 JavaScript의 동향 - WebAssembly

AI in browsers: Comparing TensorFlow, ONNX, and WebDNN for image classification

Finally We May Have a Path to the Fundamental Theory of Physics and It’s Beautiful

Creative Coding (Generative Art, Data visualization, Interaction Design, Resources.)

Creative Coding & Generative Art with JavaScript

WebGL 1.0 Study (youtube)

WebGL Samples (Aquarium 물고기 최대치로 성능테스트를 많이함)

Modular WebGL components

---

Threejs

└ 🔗

• 3js 레이캐스팅 속도 높인 예제
• Awwwards(interactive 3D scenes for the web)
• Webgl memory tracker
• Cx20 archives
• Loader for 3js
• 3Dmol (WebGL accelerated JavaScript molecular graphics library)
• Enable3d (TS, 3js, ammojs)
• Vite-threejs-ts-starter
• Timeline (Visually display various historical time periods and historical maps)
• threeify (A Typescript 3D library loosely based on three.js)
• Ogl
• WebGL studio
• Creativeprojects
• BabylonJS
• 꽃, | flower 개발기
• Three.js Realistic Rain Effect Tutorial

---

Shader, GLSL, GLTF

└ 🔗

• The book of shaders (github)
• Shadershop 함수 시각화 (Description)
• ShaderFrog (Demo)
• Shadertoy
• 30 days of shade 1
• 30 days of shade 2
• ez shader editor
• glsl fast gaussian blur
• glsl Sandbox (demo)
• phong shading tutorial with glslify
• Shader Daily(twitter) (Repo)
• gltf test
• gltf viewer

---

Map

└ 🔗

• 3D 지도 Openglobus (demo)
• loaders gl
• deck gl
• vis gl
• nebula gl

---

Data Visualization

Tools

└ 🔗

• Charticulator (크롬 기반 데이터 시각화 툴, Tableau 유사)
• 인포그래픽 제작 툴 리뷰
• Observable (자바스크립트 기반 Jupyter-like 시각화 도구, D3.js & TensorFlow.js 등)
• 네트워크 그래프 시각화 & 분석 툴 Gephi
• 태블로 팁 블로그
• 태블로 지도 기능 & 사례
• 시간 데이터를 바라 보는 여러 가지 방법 (with 태블로)
• 플랜잇 태블로 교육자료
• 태블로 공식 시작키트
• 유통/소매 데이터의 수익 연결 (태블로) 실습자료
• 태블로 무료교육동영상
• 데이터시각화 툴 infogram (presenting 에 최적화되어 있음, embed 배포 가능) 2

Use Case

└ 🔗

• 데이터 시각화 교과서 & 2
• Data Visualization with SVG/React/D3/JS (FreeCodeCamp, 17h)
• 데이터 시각화를 위한 PPT 애니메이션 템플릿
• 연도별 출생 & 수능지원자 추이 시각화 (이제현, matplotlib)
• 민간 아파트 분양가 분석 (박조은, ggplot) & 2
• 교통사고 데이터 시각화 with R / D3.js / Google Charts
• TULP interactive (다양한 인터랙티브 데이터 시각화)

With Matplotlib

└ 🔗

• Matplotlib axes 튜토리얼 (객체지향 방식)
• matplotlib 상태기반 vs 객체지향 튜토리얼 (이제현) & 2
• Matplotlib 튜토리얼 (OOP/subplot/annotate/3d/animation 등) & 2
• Matplotlib Colormap Customization (한글)
• Picking & Modifying Matplotlib Colors (이제현)

With Python

└ 🔗

• Python 시각화 라이브러리 모음 & 2
• plot.ly 뉴비에게 뉴비가
• Top 6 Python libs for Visualization: Matplotlib/Seaborn/Plotly/Bokeh/Altair/Folium (장단점)
• 데이터 시각화와 통계의 함정
• ggplot2 in Python
• Seaborn Data Visualization
• D3.js 시각화 무료 강의
• D3.js By Example (책)
• 데이터 분석 종류에 따른 올바른 차트 타입
• 판다스 데이터 분석과 시각화 뽀개기 (인프런, 박조은)
• Violin Plot 상세 설명 (영문)
• 공대형아의 데이터 시각화를 위한 파이썬 (2만)
• Folium 제주 오름지도 안내서비스 (제코베)