Published
Edited
Jun 19, 2020
2 stars
DOM // expand and get familiar with the DOM elements
DOM // 확장해보면 DOM element와 친숙합니다
{
const D3Svg = d3.selectAll('svg').remove() // Without this, D3 just keeps appending new svg each time, try commenting and running this.
//D3 selection of class parent-container (which continues down the method chain...)
const d3Selection = d3.select('.parent-container')
.append('svg') // append svg element with d3 object
.attr('width', 100) // add attribute width to svg
.attr('height', 100) // add attribute height to svg
// Appending CIRCLE (NOT using method-chaining. Which do you prefer?)
const d3AppendedCircle = d3Selection.append('circle') // appending circle element
d3AppendedCircle.attr('cx', 50) // add attribute x-axis coordinate of the center of the circle.
d3AppendedCircle.attr('cy', 50) // add attribute y-axis coordinate of the center of the circle.
d3AppendedCircle.attr('r', 25) // add attribute radius to circle
d3AppendedCircle.attr('fill', 'purple') //fill circle with described colour.
return D3Svg
}
{
const D3Svg = d3.selectAll('svg').remove() // 이게 없으면, D3는 계속해서 매번 새로운 svg를 추가로 붙이기만 합니다, 한번 이걸 주석처리하고 실행해보세요.
//parent-container 클래스에 대한 D3 선택자 (함수 체이닝으로 아래에 계속 추가)
const d3Selection = d3.select('.parent-container')
.append('svg') // d3 객체에 svg 요소를 추가
.attr('width', 100) // svg 가로 속성 추가
.attr('height', 100) // svg 세로 속성 추가
// CIRCLE 추가 (이건 함수-체이닝을 사용하지 않았습니다. 뭐가 더 좋은가요?)
const d3AppendedCircle = d3Selection.append('circle') // circle 요소 추가
d3AppendedCircle.attr('cx', 50) // circle 중앙으로부터 x-axis 좌표 속성 추가
d3AppendedCircle.attr('cy', 50) // circle 중앙으로부터 y-axis 좌표 속성 추가
d3AppendedCircle.attr('r', 25) // circle 반지름 속성 추가
d3AppendedCircle.attr('fill', 'purple') // 보라색 색상으로 circle 채우기
return D3Svg
}
{
const D3DataConnection = d3.select(p).selectAll("p")
.data(ArrayofData)
.enter()
.append("p")
.text(function(d) {
return "I can count up to " + d;
})
.style("color", function(d) {
if (d > 15) { //Threshold of 15
return "red"; // paragraph appears in red if value is greater than 15
} else {
return "black"; // paragraph appears in black if value is less than or equal to 15
}
})
return D3DataConnection
}
{
const D3DataConnection = d3.select(p).selectAll("p")
.data(ArrayofData)
.enter()
.append("p")
.text(d => "I can count up to " + d)
.style("color", (d => {
if (d > 15) {
return "red"; // 값이 15보다 크면 빨간색으로 문장을 나타냅니다.
} else {
return "black"; // 값이 15보다 작으면 검정색으로 문장을 나타냅니다.
}
}))
return D3DataConnection
}
{
const width = 500 //width of svg
const height = 250 //height of svg
//Another direct method to create svg is DOM.svg(specific to Observables)
const svg = d3.select(DOM.svg(width, height))
const ArrayofData = [50,90, 120,250,200,150,100,50,10,40,80,60,40,70,50,90, 120,60,40,70,50,60,40,70]
svg.selectAll('rect')
.data(ArrayofData) //connect ArrayofData with DOM <rect/> elements
.enter() // returns the portion of the data which is new ("entering") and not yet bound to DOM elements
.append('rect') // for each data value, append a <rect/> to selected svg
.attr('x', (d, itemsIndexInArray) => itemsIndexInArray * 20)// For each, set x attr
.attr('y', d => height - d) // for each, set y attr
.attr('width', 15) // for each, set width attribute
.attr('height', arrayItemTypicallyNamed_d => arrayItemTypicallyNamed_d)
.attr('fill', 'purple')
// Once we append the visualization elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
const width = 500 // svg 가로
const height = 250 // svg 높이
const svg = d3.select(DOM.svg(width, height)) // DOM.svg로 svg를 새로 만들어 d3에 element지정
const ArrayofData = [50,90,120,250,200,150,100,50,10,40,80,60,40,70,50,90,
120,60,40,70,50,60,40,70]
svg.selectAll('rect') // 모든 DOM <rect/> element를 선택
.data(ArrayofData) // DOM <rect/> element에 ArrayofData 연결 (1대1)
.enter() // 아직 DOM 요소에 바인딩되지 않은 데이터 부분을 반환합니다.
.append('rect') // 각 데이터 값에 대한 선택된 svg에 <rect/>를 추가
.attr('x', (d, idx) => idx * 20) // 각 x 속성(위치) 지정
.attr('y', d => height - d) // y 속성 지정 (250 - 데이터 값) -> svg 상단 지점이 0
.attr('width', 15) // 가로 속성 각 15로 지정
.attr('height', d => d) // 세로 속성은 그대로 반환
.attr('fill', 'purple')
return svg.node()
}
d3 = require('d3@5')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
