CND 주소
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
D3 예제 주소
https://observablehq.com/@d3/gallery
D3 gallery
Looking for a good D3 example? Here’s a few (okay, …) to peruse. Animation D3’s data join, interpolators, and easings enable flexible animated transitions between views while preserving object constancy. Interaction D3’s low-level approach allows f
observablehq.com
샘플 데이터
https://observablehq.com/@observablehq/sample-datasets
Sample datasets
To help you get started, the Observable standard library provides a handful of sample datasets by default in all notebooks. (For more datasets, learn how to load data in Observable.) The included datasets are: `aapl` `alphabet` `cars` `citywages` `diamonds
observablehq.com
기본 예제
<!DOCTYPE html>
<div id="container"></div>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script type="module">
// 차트에 크기와 마진 선언
const width = 640;
const height = 400;
const marginTop = 20;
const marginRight = 20;
const marginBottom = 30;
const marginLeft = 40;
// x축 스케일 선언
const x = d3.scaleUtc()
.domain([new Date("2023-01-01"), new Date("2024-01-01")])
.range([marginLeft, width - marginRight]);
// y축 스케일 선언
const y = d3.scaleLinear()
.domain([0, 100])
.range([height - marginBottom, marginTop]);
// svg container 생성
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// x축 추가
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x));
// y축 추가
svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y));
// html svg 붙이기
container.append(svg.node());
</script>