이번에는 지금 바로 D3.js 시작하기 : 웹 데이터 시각화 강의 후기로 돌아왔습니다! 💙
지금 바로 D3.js 시작하기 : 웹 데이터 시각화 강의 | The Oreum - 인프런
The Oreum | 🤔 D3를 공부하고 싶지만 너무 어려워 고민하셨나요?? 지금 바로! 이 강의로 D3에 대한 기본 개념과 활용법을 익혀 쉽고 빠르게 나만의 시각화 결과물을 만들어보세요, [사진][사진][사진
www.inflearn.com
먼저 이 수업은 개인적으로 따라가기 살짝 어려웠어요 ㅎㅎ
자바스크립트와 CSS를 알고 있다는 전제하에 강의가 진행되기 때문에
자바스크립트를 배운 지 5년 ...? 이 지난 저에게는 살짝 어려웠답니당 😀
수강 후기
막대그래프 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<svg width="500" height="500"></svg>
<script>
const sampleData = [100, 10, 30, 50, 10, 70, 200, 90];
const svg = d3.select('svg');
sampleData.forEach((data, index) =>{
svg.append('rect')
.attr('height', data)
.attr('width', 30)
.attr('x', 40 * index + 100)//막대 생성좌표 x 막대의 좌측
.attr('y', 300 - data + 100)//막대 생성 좌표 y 막대의 윗부분
})
</script>
</body>
</html>
이렇게 참고 노션에 나와있는 코드를 사용해 강의에서 수정하는 대로 하면 그래프가 나오는 것을 볼 수 있습니다!
막대그래프뿐만 아니라 산점도, 트리 등등 여러 그래프를 만들어요 !
막대그래프와 선 그래프 그리고 숫자까지 보이게 나타낼 수 있습니다!
코드랑 같이 보여주기 위해서 강의에서 캡처해 왔어요!
저는 자바스크립트를 배운 지 오래돼서 기억이 살짝 안나는 이슈로 .. 진도를 따라가는데 어려웠지만,
이미 알고 있는 분들에게는 쉽게 따라갈 수 있다고 생각이 들었습니다.
그리고 저도 자바스크립트를 공부해야겠다고 생각이 들어서 ....^^
다음에는 자바스크립트 관련 강의를 들을까 고민 중입니다.
오늘도 읽어주셔서 감사합니다 !! 💙
'위니브 엠버서더 4기' 카테고리의 다른 글
| [위니브 엠버서더] 위니브 서비스 소개 💙 (2) | 2025.01.24 |
|---|---|
| [위니브 엠버서더] 3분만에 만드는 깃헙 블로그 강의 후기 (2) | 2025.01.06 |
| [위니브 엠버서더] 제주 하간디 이신 데이터들 Python으로 몬딱 분석해불게 강의 후기 (3) | 2024.12.30 |
| [위니브 엠버서더] 웰컴 굿즈 소개 🤍 (3) | 2024.12.30 |
| [위니브 엠버서더] 합격 후기 (4) | 2024.12.05 |