D3 초보자용 산점도 프로젝트

한동안 D3 certificate program으로 freeCodeCamp의 데이터 분석을 통해 작업했으며 지금까지 인증서의 처음 두 프로젝트인 Bar Chart 및 Scatterplot을 완료했습니다.

나는 D3가 내가 처음에 상상했던 것보다 더 힘든 것으로 입증되었다는 것을 인정해야 합니다. 많은 것들과 마찬가지로 멋진 그래프와 차트를 생성하는 자바스크립트 라이브러리의 개념은 구현하기 정말 쉬워 보였습니다. 그러나 완전히 파악하고 올바르게 사용하는 것은 재미있는 연습이었습니다.

그리고 documentation은 말할 것도 없이 압도적입니다.

맨 처음부터 어떻게 해야할지 인터넷 검색을 했고...처음부터 의미심장했습니다. 처음에는 모든 코드를 .then 선언 안에 넣지 못했습니다.

그리고 그때부터 (올바른 경우와 마찬가지로) 내 흐름은 정확히 무엇인가를 수행하는 방법을 검색하고... 시도해 보고... 다시 검색하고... 작동할 때까지 조정하는 것입니다.

나는 console.log()ing의 건전한 습관을 활용하여 거의 모든 것을 태양 아래에서 사용했습니다. 특히 프로젝트를 시작할 때 여러 변수(일부는 필요하고 일부는 더미 증명 코드가 필요함)를 만든 다음 제대로 작동하는지 확인하기 위해 모든 것을 console.log()합니다. 이것은 나에게 많은 마음의 고통을 덜어주었습니다.

다음은 y축 데이터 및 척도에 대한 시간을 적절하게 설정하기 위해 나중에 사용해야 하는 timeParse 변수를 먼저 설정한 산점도 프로젝트의 시작 부분입니다. 그런 다음 데이터에서 정보를 가져와 도메인 값을 설정합니다.

  let minutes = d3.timeParse("%M:%S")
  let minYear =(d3.min(data,(d)=>d.Year))
  let maxYear =(d3.max(data,(d)=>d.Year))
  let minTime =minutes((d3.min(data,(d)=>d.Time)))
  let maxTime =minutes((d3.max(data,(d)=>d.Time)))

산점도 프로젝트에서 시간을 보내는 동안 서식 문제가 많이 발생했습니다. 그리고 특히 여기에서 문제를 파악하기 위해 시행착오를 많이 겪었습니다. 우리는 각각 x축과 y축의 날짜와 시간을 다루기 때문에 눈금과 축에 scaleTime()을 사용했습니다.

  const xScale = d3.scaleTime()
    .domain([minYear-1,maxYear])
    .range([padding, w-padding])
  const xAxis = d3.axisBottom(xScale)
    .tickFormat(d3.format(".0f"))

제가 오랫동안 시험을 통과하지 못하는 부분은 "cy"값이었습니다. 나는 처음에 minutes() timeParsing 변수를 사용하지 못했고, 내 생략을 깨닫기 전에 거의 모든 것을 폐기했습니다.

 svg.selectAll(".dot")
    .data(data)
    .enter()
    .append("circle")
    .attr("class","dot")
    .attr("r", 8.5)
    .attr("cx",(d)=>xScale(d.Year))
    .attr("cy",(d)=>yScale(minutes(d.Time)))

점의 색상을 설정하기 위해 스타일 섹션 내에서 간단한 if 문을 만들었습니다.

  .style("fill",function(d,i){
      if(d["Doping"]===""){
        return ("rgb(251,180,174)");
      }else{
        return("rgb(179,205,227)")
      }

범례의 경우 내가 사용한 유용한 기사here를 찾았습니다. 여기에서 "...동일한 것에 대해 동일한 값을 일관되게 반환"하는 좋은 방법인 scaleOrdinal()에 대해서도 배웠습니다.

이것은 내 작은 데이터 세트에 대한 과잉이었지만 그럼에도 불구하고 재미있는 학습 기회였습니다!

  let key = ["No doping allegations", "Yes doping allegations"]
  let colors = d3.scaleOrdinal()
    .domain(key)
    .range(d3.schemePastel1)

이 모든 것에 대한 코드를 작성하는 것은 짧은 두 항목 범례를 하드 코딩하는 것보다 훨씬 길지만 다시 한 번 이것에 대해 배우는 것이 즐거웠습니다.

svg.append("text")
    .text("Legend go here")
    .attr("id","legend")
    .attr("x", w-padding*4.5)
    .attr("y", 150)
  svg.selectAll("legenddots")
    .data(key)
    .enter()
    .append("rect")
      .attr("x",w-padding*2).attr("y",(d,i)=>175+i*(20+5)).attr("width",20).attr("height",20).style("fill",(d)=>colors(d))
    svg.selectAll("legendlabels")
      .data(key)
      .enter()
        .append("text")
        .attr("x",w-padding*7).attr("y",(d,i)=>185+i*(20+5)).attr("width",20).attr("height",20).style("fill",(d)=>colors(d)).attr("text-anchor","left").style("alignment-baseline", "middle")
        .text((d)=>d)

Codepenhere에서 내 전체 코드를 확인하십시오. 하지만 이 인증을 통해 작업하는 경우 주의 사항: 작동하기 때문에 여기에 무언가를 복사하지 마십시오(freeCodeCamp에서 제공한 예제에서 바로 수행할 수 있음) ).

처음에는 왜 무언가가 작동하지 않는지 이해하지 못하는 두통을 통해 많은 것을 배웠습니다. 나는 당신이 그 고통을 헤쳐나가고, 주위를 둘러보고, 많은 것을 시도해 보기를 권한다. 진정한 학습이 이루어지는 곳입니다!

나를 따라와, 난 인사하고 싶어요!

에 같은 거래!

행운과 행복한 코딩!