D3.js로 노드 시뮬레이션 구현하기
Force Simulation 이해하기 Force Simulation은 입자들 간의 힘과 운동을 시뮬레이션하는 D3.js의 기능이다. 노드와 링크로 구성된 네트워크 데이터를 자동으로 레이아웃하는 데 주로 사용된다. 기본 개념 // 기본 시뮬레이션 생성 const simulation = d3.forceSimulation() .force('...
Force Simulation 이해하기 Force Simulation은 입자들 간의 힘과 운동을 시뮬레이션하는 D3.js의 기능이다. 노드와 링크로 구성된 네트워크 데이터를 자동으로 레이아웃하는 데 주로 사용된다. 기본 개념 // 기본 시뮬레이션 생성 const simulation = d3.forceSimulation() .force('...
이벤트 핸들링 기초 D3.js는 DOM 이벤트를 쉽게 처리할 수 있는 방법을 제공한다. 1. 기본 이벤트 리스너 // 기본 이벤트 바인딩 d3.select('circle') .on('mouseover', function(event, d) { // event: 이벤트 객체 // d: 바인딩된 데이터 ...
데이터 로딩하기 1. CSV 데이터 로딩 // CSV 파일 구조 // date,value // 2024-01-01,10 // 2024-01-02,15 // 2024-01-03,12 d3.csv('data.csv').then(data => { // 데이터 파싱 const parsedData = data.map(d => ({...
D3.js란? D3.js(Data-Driven Documents)는 웹 브라우저에서 데이터를 시각화하기 위한 자바스크립트 라이브러리다. HTML, SVG, CSS를 사용해 데이터를 시각적으로 표현하며, 강력한 시각화 컴포넌트들을 제공한다. 주요 특징: 웹 표준 기술 사용 (HTML, SVG, CSS) 유연한 데이터 바인딩 다양한 상호작...
『트러스트』(원제: Trust) 글: 에르난 디아스 옮김: 강동혁 출판사: 문학동네 발행일: 2023년 02월 24일 차례 채권|해럴드 배너 나의 인생|앤드루 베벨 회고록을 기억하며|아이다 파르텐자 선물|밀드레드 베벨 p. 201 모든 인생은 우리를 앞으로 나아가게 하거나 삐걱거리다 멈추게 하는 소수...
WORK 올해 일 관련해서 그닥 특별한 건 없었다. 💼 풀타임 재택근무 종료 이제 풀타임 재택근무는 끝났다. 주 2회는 사무실에 출근한다. 휴… 재택 근무만 계속 하고 싶다. 📊 D3.js 공부 시작 12월부터 D3.js 공부를 시작한 것이 그나마 새로운 재미이자 도전 과제가 될 것 같다. 얼른 자바스크립트와 D3에 익숙해져서 개인적...
JSON은 정보 교환의 주요 표준으로 빠르게 부상했다. API로 데이터를 전송하거나 문서 데이터베이스에 정보를 저장할 때 주로 JSON을 접하게 될 거다. 요즘엔 JSON이 데이터 배포에 가장 널리 사용되는 형식이지만, XML과 YAML도 비슷한 목적으로 사용할 수는 있다. 아무튼 본 포스팅에서는파이썬으로 JSON 데이터 다루는 방법 소개. ...
『픽션들』(원제: Ficciones) 글: 호르헤 루이스 보르헤스 옮김: 송병선 출판사: 민음사 발행일: 2011년 10월 21일 ⬆️ M. C. Escher 차례 두 갈래로 갈라지는 오솔길들의 정원 서문 틀뢴, 우크바르, 오르비스 테르티우스 ⭐ 알모타심으로의 접근 피...
『대성당』(원제: Cathedral) 글: 레이먼드 카버 옮김: 김연수 출판사: 문학동네 발행일: 2014년 05월 23일 차례 깃털들 셰프의 집 보존 칸막이 객실 별것 아닌 것 같지만, 도움이 되는 비타민 신경써서 내가 전화를 거는 곳 기차 열 굴레 대성당⭐ 해설 : 맹인에게서 ‘...
『브람스를 좋아하세요…』(원제: Aimez-vous Brahms…) 글: 프랑수아즈 사강 옮김: 김남주 출판사: 민음사 발행일: 2008년 05월 02일 ⬆️ Marc Chagall “그리고 당신, 저는 당신을 인간으로서의 의무를 다하지 않았다는 이유로 고발합니다. 이 죽음의 이름으로, 사랑을 스쳐 지나가게 한 죄,...