D3.js로 인구 피라미드 만들기

Question

D3.js를 사용하여 고전적인 인구 피라미드를 만들어야 합니다.이 이미지와 비슷한 것:

나는 정말 좋아 보이는 몇 가지 예를 발견했습니다(이것 그리고 이것) 하지만 제가 찾고 있는 것보다 더 복잡합니다.내가 볼 수 있는 좋은 간단한 예를 아는 사람이 있나요?이것을 시작하기 위한 조언이 있나요?각 성별 그룹에 대해 하나씩 서로 옆에 두 개의 막대 그래프를 만들어야 합니까?

Answer 1

이와 같은 시각화를 만드는 핵심은 무엇이든 그리기 전에 미리 레이아웃을 설정하는 데 상당한 시간을 투자하는 것입니다.

차트의 눈금과 축을 만들 때 인생을 훨씬 쉽게 만들기 위해 사용하고 싶은 몇 가지 주요 측정이 있습니다.그런 다음 다음을 활용할 수 있습니다. <g> 차트의 각 "섹션"에서 로컬 좌표로 작업할 수 있도록 번역이 포함된 요소입니다.

목표는 다음과 같이 두 개의 미러링 영역을 만드는 것입니다.

이렇게 하면 두 영역 간에 x 및 y 차원에 대해 동일한 배율을 공유할 수 있습니다.

이러한 영역을 정의하려면 먼저 svg 내부 여백에 대한 일부 값을 설정한 다음 해당 여백 내부에 배치할 그룹을 만들 수 있습니다.이는 d3 시각화의 일반적인 관행이며, 아직 익숙하지 않다면 배우기 좋은 시간입니다.일반적으로 다음과 같습니다.

var width = 400,
    height = 300;

var margin = {
  top: 20,
  right: 10
  bottom: 40,
  left: 10
};

var svg = d3.select('body').append('svg')
  .attr('width', margin.left + width + margin.right)
  .attr('height', margin.top + height + margin.bottom)
  .append('g')
    .attr('class', 'inner-region')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

시각화 자체의 일부를 배치할 때 해당 공간을 고려할 필요 없이 축 눈금, 레이블 및 제목을 위한 공간을 svg 문서에 남겨둘 수 있으므로 따라야 할 좋은 방법입니다.나중에 더 많은 공간이 필요하다고 판단되면 전체 다이어그램의 위치를 ​​다시 지정하는 대신 코드 상단에서 값 하나만 조정하면 됩니다.

중요한 다른 점은 두 y축의 x좌표입니다.즉, 남성과 여성의 인구가 0이 되는 지점입니다(아래 빨간색 선으로 표시).이는 내부 영역의 중심선으로부터 설정된 거리입니다(아래 파란색 선으로 표시됨).

이 값을 참조하기 위해 이전에 생성된 여백 개체에 중간 여백 속성을 추가할 수 있습니다.

margin.middle = 28;

위의 두 빨간색 선의 위치를 ​​저장하는 변수를 만들고 싶을 것입니다.지금은 전화해 보자 pointA (남성 인구에 대한 0선의 x 좌표) 및 pointB (여성 인구의 해당 지점).

var regionWidth = (width/2) - margin.middle;

var pointA = regionWidth,
    pointB = width - regionWidth;

이러한 포인트를 설정하고 나면 이러한 값을 svg 변환에 연결하여 생성한 개체를 해당 위치로 변환할 수 있기 때문에 상황이 훨씬 더 간단해집니다.

가장 까다로운 부분은 단일 레이블 세트를 공유하는 두 개의 중앙 y축입니다.이를 위해서는 방법을 잘 이해해야 합니다. d3.svg.axis() 텍스트 레이블을 생성하고 어떤 속성을 조작할 수 있는지 알아보세요.이를 위해 알아야 할 네 가지 중요한 속성이 있습니다.

1. axis.orient(direction) 축에서 나오는 틱이 가리키는 방향을 지정합니다.이 경우에는 눈금이 중앙을 가리키도록 하려고 하기 때문에 약간 혼란스러울 것입니다. .orient('right') 오른쪽 축은 .orient('left')

2. axis.tickSize(inner,outer) 축에서 나오는 눈금 표시의 길이(svg 단위)를 설정합니다."외부" 표시는 축의 끝점에 있는 표시이며 다음과 같이 설정할 수 있습니다. 0 이 경우에는 범위 대역이 있는 순서 척도를 사용하므로 끝점이 값을 나타내지 않습니다.내부 눈금에 대해 작은 값을 선택합니다. 이 예에서는 4.

3. axis.tickPadding(padding) 레이블 텍스트의 텍스트 앵커가 눈금 끝에서 얼마나 멀리 배치되는지 설정합니다.우리는 두 축 바로 사이, 이미지 중앙에 텍스트 앵커를 배치하려고 합니다.우리는 이미 중간 마진(중심선에서 각 축까지의 거리)을 알고 있고 tickSize (틱의 길이), 다음 두 값의 차이를 취하여 이를 중앙에 배치할 수 있습니다. .tickPadding(margin.middle - 4).

4. axis.tickFormat(format) 눈금 레이블의 형식을 지정합니다.겹치는 일이 발생하지 않도록 축 중 하나에서 눈금 레이블을 제거하려면 빈 문자열로 설정할 수 있습니다. .tickFormat('')

따라서 두 개의 y축은 다음과 같이 정의할 수 있습니다.

var yAxisLeft = d3.svg.axis()
  .scale(yScale)
  .orient('right')
  .tickSize(4,0)
  .tickPadding(margin.middle - 4);

var yAxisRight = d3.svg.axis()
  .scale(yScale)
  .orient('left')
  .tickSize(4,0)
  .tickFormat('');

그런 다음 실제로 왼쪽 y축을 그릴 때 해당 <text> 요소를 추가하고 텍스트 앵커를 다음과 같이 설정합니다. middle 그러면 앵커를 중심으로 중심이 맞춰집니다.

.call(yAxisLeft)
  .selectAll('text')
  .style('text-anchor', 'middle');

여기 는 인위적인 데이터를 사용한 전체 차트의 간단한 예입니다.나는 쉽게 따라할 수 있도록 일반적인 구조에 대해 가능한 많은 설명을 하려고 노력했습니다.나는 또한 translation(x,y) 문자열 연결을 사용할 때보다 각 번역의 x 및 y 좌표를 더 쉽게 찾을 수 있도록 하는 기능입니다.스크립트 하단에서 해당 정의를 찾을 수 있습니다.

이 정보가 도움이 되기를 바랍니다. 구체적인 내용에 대해 궁금한 점이 있으면 알려주시기 바랍니다.