인공지능 시대

1. 개요 이전 페이지에서는 elements를 만들고, 여러개를 동시에 수정하는 방법에 대해 학습했다. 이번 시간에는 픽셀값을 스케일링하는 법에 대해 학습하겠다. 2. Linear Scaling 설명 값을 선형 변환 해주는 함수 d3.scaleLinear() 함수를 이용 .domain() 함수: 원래 값에 대한 범위 .range() 함수 : 결과 값에 대한 범위 예시 let width = 400; let data = [{x:10,y:15},{x:20,y:10},{x:25,y:20},{x:35,y:30}] let xScale = d3.scaleLinear() .domain([0, d3.max(data,d=>d.x)]) .range([0, 400]) let yScale = d3.scaleLinear() .d..

1. 정리 앞 장 에서는 Selection과 자주 사용되는 함수에 대해서 학습하였다. 다음으로는 D3의 더 복잡한 내용을 다루도록 하겠다. 2. 함수 2.1. Append 설명 append 함수를 이용해서 tag를 생성할 수 있음 letsvg = d3.select("#svg"); svg.append("circle") .attr("cx",10) .attr("cy",20) .attr("r",5) 2.2. Update Pattern 2.2.1. enter data함수를 통해 데이터가 저장되어 있음 데이터가 svg에는 들어가 있지 않음 2.2.2. update data함수를 통해 데이터가 저장되어 있음 데이터가 svg에 들어감 2.2.3. exit data함수를 통해 데이터가 저장되어 있지 않음 데이터가 svg..

1. 데이터 시각화와 D3 데이터를 그림, 그래프 형태로 보여주어 대략적인 데이터의 중요사항을 한눈에 알 수 있도록 함 D3는 데이터 시각화를 위한 도구, Javascript 라이브러리이다. D3를 실행한 결과는 HTML이다. 2. D3 입력 방법 html 파일에 삽입하여 사용 3. D3 기능 SVG의 요소를 ADD, modify, remove 할 수 있다. SVG (html을 활용해 그래프를 그릴 수 있는 라이브러리) 4. Selecting Elements 4.1. select 설명 하나의 element만 불러옴 # 은 html의 아이디를 불러옴 . 은 html의 클래스를 불러옴 예시 d3.select(".apple") d3.select("#apple") 4.2 selectAll 예시 d3.select..