D3로 테일러 스위프트 가사의 상호작용 스트랩을 만든다.js와 관찰가능

데이터 시각화는 데이터를 검사하고 사고하는 간편한 방법이다.Observable는 Jupyter 노트북과 같은 도구로 칸에서 자바스크립트 코드를 쉽게 실행할 수 있습니다. 그러면 자신이 무엇을 하는지 실시간으로 볼 수 있습니다.
이 글은 테일러 스위프트가 가장 자주 사용하는 가사를 표시하고 D3를 사용하여 관찰하는 상호작용식 스트라이프를 만드는 방법을 소개한다.js.동시에 당신은 이곳에서 완성된 노트와 가시화를 볼 수 있고, 직접 편집할 수 있습니다.

Observable 소개

너는 each different cell as a function을 생각할 수 있다.세포는 두 가지 주요 형식이 있다.

표현식.표현식 칸은 가장 간결한 것으로 간단한 정의에 사용됩니다. 패키지 이외의 관찰 가능한 범위 내에서 var/const/let 키워드가 필요하지 않습니다.

블록.블록 단원은 국부 변수와 순환을 포함할 수 있는 더 복잡한 코드를 포함하여 괄호로 둘러싸여 있다.

상기 arr 등 일부 변수는 다른 칸에 인용될 수 없기 때문에 많은 노트북들이 자신의 칸에 서로 다른 정의와 함수를 배치한 것을 관찰할 수 있다.이것도 본고에서 하고자 하는 것이다. 모든 코드 부분은 자신의 칸에 있어야 한다. 코드를 칸에 추가한 후, shift-return을 입력하여 실행해야 한다.
Observable에 대한 자세한 내용은 check out this Notebook을 참조하십시오.

설치 프로그램

this dataset of Taylor Swift lyrics을 다운로드하고 Observable account을 만드세요. 아직 없으면.계정이 있으면 오른쪽 상단에 있는 새로 만들기 버튼을 클릭하여 새 노트북을 만듭니다.

먼저 마우스를 셀 왼쪽 근처에 놓습니다.너는 반드시 이런 더하기 번호를 보아야 한다.

기존 주식 가격 인하 칸 아래에 있는 더하기 번호를 누르면 칸을 관찰할 수 있고, 맥에서 shift-command-u을 누르면 기계에서 데이터 집합을 가져올 수 있습니다.그리고 가져올 파일을 선택하십시오 (압축을 잊지 마세요!)선택한 셀에는 다음과 같은 내용이 표시됩니다.

FileAttachment("tswiftlyrics.csv")

파일 이름은 다를 수 있습니다.[셀 실행] 버튼의 오른쪽 끝에 있는 직각 삼각형을 클릭하여 셀을 실행할 수 있습니다.

또는 shift-return을 입력하면 다음 내용이 반환됩니다.

CSV의 실제 데이터를 보려면 를 추가합니다.text () 를 실행하여 위의 데이터를 보려면 다음과 같이 하십시오.

FileAttachment("tswiftlyrics.csv").text()

오른쪽에 파일 기호가 있기 때문에 이 칸에서 파일을 가져온 것을 볼 수 있습니다.우리가 본 데이터는 각 곡의 예술가(테일러 스위프트), 앨범 명칭, 곡 제목, 앨범의 곡 번호, 가사, 가사가 있는 줄, 그리고 노래의 발매 연도를 포함한다.
이제 셀 왼쪽에 있는 더하기 기호를 클릭하여 주석을 포함하는 새 셀을 삽입합니다.우리는 가격 인하를 통해 이 점을 실현할 수 있다.

md`#### Require d3`

새 셀을 삽입하고 다음 내용을 추가하여 D3가 필요합니다.js.

d3 = {
  const d3 = require("d3-dsv@1", "d3@5","d3-scale@3","d3-scale-chromatic@1", "d3-shape@1", "d3-array@2")
  return d3
}

관찰 가능한 노트북에서는 npm 패키지를 사용할 수 없습니다. UMD나 AMD를 통해 모듈을 공개하는 도구만 사용할 수 있습니다.보통 unpkg에서 모듈을 포함할 수 있습니다.com은 CDN을 통해 웹 페이지에서 Observable에서 사용할 수 있습니다.
현재 우리는 CSV 파일을 훑어보고 require을 호출하여 입력 문자열(CSV 파일의 내용)을 분석합니다.이것은 해석된 줄에 따라 대상 그룹을 되돌려줍니다.

data = {
  const text = await FileAttachment(<your-imported-taylor-swift-file-name.csv>).text();
  return d3.csvParse(text, ({lyric}) => ({
    lyric: lyric
  }));
}

셀을 실행하고 확장하면 CSV 파일의 가사만 포함하는 입력을 볼 수 있습니다.

새 칸에 빈 그룹을 만들고 가사에 단어를 추가합니다.

lyrics = []

새로운 칸에 다음 내용을 추가하여 csvParse의 대상을 순환시키고 모든 가사를 data의 그룹에 추가합니다.

data.forEach(lyric => lyrics.push(lyric.lyric));

새 셀에서 수정된 lyrics 객체를 볼 수 있습니다.

가사 정리

Observable에서는 "Named cells are declarations, not assignments"때문에 변수를 재할당할 수 없습니다.lyrics 변수를 재설정하거나 재할당하려고 하면 셀 이름이 고유해야 하기 때문에 이 오류가 발생합니다.

테일러의 가사에서 가장 많이 사용되는 단어를 분석하기 위해서, 새로운 칸에서, 우리는 그룹을 문자열로 변환하고, 정규 표현식을 사용하여 비문자열 문자를 삭제합니다.

newLyrics = lyrics.join(' ').replace(/[.,\/#!""'$%\?^&\*;:{}=\-_`~()0-9]/g,"").toLowerCase()

가사를 정리한 후, 가사 그룹에서 정지어를 삭제합시다.이 단어들 중 대부분은 NLTK개의 정지어 목록에서 추출된 것이지만, 실제로는 그다지 많이 말하지 않았다. 새로운 칸add에서 그것들은 약간'scaffold-y'가 있다.

stopwords = ['i','me','my','myself','we','our','ours','ourselves','you','your','yours','yourself','yourselves','he','him','his','himself','she','her','hers','herself','it','its','itself','they','them','their','theirs','themselves','what','which','who','whom','this','that','these','those','am','is','are','was','were','be','been','being','have','has','had','having','do','does','did','doing','a','an','the','and','but','if','or','because','as','until','while','of','at','by','for','with','about','against','between','into','through','during','before','after','above','below','to','from','up','down','in','out','on','off','over','under','again','further','then','once','here','there','when','where','why','how','all','any','both','each','few','more','most','other','some','such','no','nor','not','only','own','same','so','than','too','very','s','t','can','will','just','don','should','now', 'im', 'ill', 'let', 'said', 'thats', 'oh', 'say', 'see', 'yeah', 'youre', 'ey', 'cant', 'dont', 'cause']

이 정지 단어를 가사에서 삭제하려면 이 기능을 새 칸에 추가하십시오.

remove_stopwords = function(str) {
    var res = []
    var words = str.split(' ')
    for(let i=0;i<words.length;i++) {
       var word_clean = words[i].split(".").join("")
       if(!stopwords.includes(word_clean)) {
           res.push(word_clean)
       }
    }
    return(res.join(' '))
}  

현재, 우리는 lyrics 함수를 호출하는 새 칸에 새 변수를 만듭니다.

lyrics_no_stopwords = remove_stopwords(newLyrics)

각 가사의 문자열 주파수 가져오기

가사에 있는 단어의 출현 횟수를 가져오려면 remove_stopwords을 사용하여 이 코드를 새 칸에 추가합니다.

strFrequency = function (stringArr) { //es6 way of getting frequencies of words
  return stringArr.reduce((count, word) => {
        count[word] = (count[word] || 0) + 1;
        return count;
  }, {})
}

그리고 우리는 [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) 함수를 호출하여 출력을 새로운 변수 strFrequency에 분배합니다.

obj = strFrequency(lyrics_no_stopwords.split(' '))

셀을 실행하면 다음과 같이 표시됩니다.

단어 주파수를 정렬하다

JavaScript 객체이므로 obj만 호출할 수 없습니다.우리의 주파수를 정렬하기 위해서, 이 함수를 새로운 단원에 추가하여, 우리의 대상을 최대에서 최소로 정렬합니다.

sortedObj = Object.fromEntries(
  Object.entries(obj).sort( (a,b) => a[1] - b[1] )    
) 

셀을 실행하면 다음 출력이 표시됩니다.

새 칸에 새 함수를 만들고 대상 항목의 첫 번째 x 번호만 되돌려줍니다. (이 예에서 30) 대상을 편집합니다. 각 값 앞에 sort()과 lyric이 있어서 쉽게 접근할 수 있습니다.

final = Object.entries(sortedObj).map(([lyric, freq]) => ({lyric, freq})).slice(0,30);

단원격을 실행하면 freq은 하나의 수조로 위의 final과 약간 다르다.

우리의 도표를 만들다

우리는 도표의 일부 속성을 설정해야 한다.새 셀에 추가

margin = ({top: 20, right: 0, bottom: 30, left: 40})

그리고 또 다른 새로운 칸입니다.

height = 500

현재, 우리는 새로운 칸에 x값을 만듭니다. sortedObj은 모든 Taylor Swift 가사의 영역을 d3.scaleBand() 대상에서 일련의 값으로 분해합니다. 이 값은 주파수 대역의 가장 작고 가장 큰 범위입니다.

x = d3.scaleBand()
    .domain(final.map(d => d.lyric))
    .rangeRound([margin.left, width - margin.right])
    .padding(0.1)

우리의 y 값은 새 단원에서 유사한 방식으로 생성됩니다.

y = d3.scaleLinear()
    .domain([0, d3.max(final, d => d.freq)])
    .range([height - margin.bottom, margin.top])

우리의 축을 설계하고 표시하기 위해서, 우리는 그것을 설정된 방향에 따라 적당한 위치로 바꾸는 함수로 정의해야 한다.두 개의 개별 셀에 다음이 포함됩니다.

xAxis = g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).tickSizeOuter(0))

yAxis = g => g
    .call(d3.axisLeft(y).ticks(15))
    .call(g => g.select(".domain").remove())

이제 제목을 y축에 추가하려면 다음 코드를 새 칸에 추가하십시오.

yTitle = g => g.append("text")
    .attr("font-family", "sans-serif")
    .attr("font-size", 10)
    .attr("y", 10)
    .text("Frequency")

현재 우리는 새로운 칸에 도표를 그려서 이것들을 호출합니다.final 속성을 사용하여 위치와 차원을 설정하는 SVG 객체를 만들었습니다.그리고 우리는 viewBox 요소를 추가합니다. (D3.js만의 것이 아닙니다. SVG 모양을 한데 묶는 데 사용되기 때문입니다.) 가사 데이터에서 직사각형을 만들고 가사를 각 직사각형의 x값으로 설정하며 가사 주파수를 각 직사각형의 y값으로 설정합니다.우리는 또한 일부 스타일 속성을 설정한 후에 g, xAxis과 yAxis을 호출했다.

{
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);

  svg.append("g")
  .selectAll("rect")
  .data(final)
  .enter().append("rect")
    .attr('x', d => x(d.lyric))
    .attr('y', d => y(d.freq))
    .attr('width', x.bandwidth())
    .attr('height', d => y(0) - y(d.freq))
    .style("padding", "3px")
    .style("margin", "1px")
    .style("width", d => `${d * 10}px`)
    .text(d => d)
    .attr("fill", "#CEBEDE")
    .attr("stroke", "#FFB9EC")
    .attr("stroke-width", 1)

  svg.append("g")
      .call(xAxis);
  svg.append("g")
      .call(yAxis);
  svg.call(yTitle);

  svg.call(yTitle);

  return svg.node();

이 칸을 실행하려면 이 도표를 출력해야 합니다.타다!

스트라이프에 상호작용 추가

yTitle 셀 아래에 도구 설명이 포함된 새 셀을 추가합니다. 사용자가 사각형 위에 커서를 놓으면 도구 설명이 표시됩니다.우리는 다른 스타일 요소를 Taylor Swift 앨범과 다른 CSS와 유사한 속성과 관련된 16진수 색으로 설정합니다.

tooltip = d3.select("body")
      .append("div")
      .style("position", "absolute")
      .style("font-family", "'Open Sans', sans-serif")
      .style("font-size", "15px")
      .style("z-index", "10")
      .style("background-color", "#A7CDFA")
      .style("color", "#B380BA")
      .style("border", "solid")
      .style("border-color", "#A89ED6")
      .style("padding", "5px")
      .style("border-radius", "2px")
      .style("visibility", "hidden"); 

다음 툴팁 코드를 추가하여 이전 차트 셀을 편집합니다.yAxis 이벤트에서는 툴팁이 표시되고 Taylor Swift 노래에 단어가 나타나는 빈도가 표시됩니다.마우스가 막대 그림의 직사각형 위에 멈추면 도구 알림과 텍스트도 이동합니다.

{
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);

  // Call tooltip
  tooltip;

  svg.append("g")
  .selectAll("rect")
  .data(final)
  .enter().append("rect")
    .attr('x', d => x(d.lyric))
    .attr('y', d => y(d.freq))
    .attr('width', x.bandwidth())
    .attr('height', d => y(0) - y(d.freq))
    .style("padding", "3px")
    .style("margin", "1px")
    .style("width", d => `${d * 10}px`)
    .text(d => d)
    .attr("fill", "#CEBEDE")
    .attr("stroke", "#FFB9EC")
    .attr("stroke-width", 1)
  .on("mouseover", function(d) {
      tooltip.style("visibility", "visible").text(d.lyric + ": " + d.freq);
      d3.select(this).attr("fill", "#FDE5BD");
    })
    .on("mousemove", d => tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px").text(d.lyric + ": " + d.freq))
    .on("mouseout", function(d) {
      tooltip.style("visibility", "hidden");
      d3.select(this)
    .attr("fill", "#CEBEDE")
    });

  svg.append("g")
      .call(xAxis);
  svg.append("g")
      .call(yAxis);

  svg.call(yTitle);

  return svg.node();
}

다음을 참조하십시오.

타다!이제 마우스를 줄에 걸면 정확한 값을 볼 수 있습니다.만약 당신이 완전한 코드를 보고 싶다면, 당신은 이곳에서 발표된 관찰 노트를 가지고 놀 수 있습니다.

데이터 시각화의 다음 단계는 무엇입니까?

관찰 가능한 노트북을 사용하여 JavaScript에서 데이터를 시각화할 필요가 없습니다. D3를 사용할 수 있습니다.js와 다른 데이터 시각화 라이브러리도 선택한 텍스트 편집기에서 웹 페이지에 표시합니다.그러나 Observable는 코드 출력을 신속하게 볼 수 있고 프레젠테이션을 쉽게 구축하고 공유하는 데 도움이 되는 편리한 도구입니다.different datasets here on Kaggle과 같은 다른 데이터 집합을 사용할 수도 있고 ask yourself these 5 questions before working with a dataset을 확보할 수도 있습니다.네가 뭘 짓고 있는지 온라인으로 알려줘!

GitHub:elizabethsiegle

트위터:

이메일: [email protected]