DataVisualization7 [Three] Curious about the mind of AI Hello guys :) Today, I tried an interesting experiment. Recently, I've been studying AI and I've become interested in "embeddings". Here, embeddings refer to the artificial intelligence interpreting characters, images, or videos according to its own criteria and representing them as vectors. For example, when reading the character "Love," it transforms into numerous vectors like the following: [.. 2024. 1. 19. [Three] AI의 머릿속이 궁금하다 안녕하세요 :) 오늘은 재밌는 실험을 해보았습니다. 최근 AI를 공부하면서 임베딩에 관심이 생겼습니다. 여기서 임베딩이란 어떤 문자나 사진 영상을 인공지능이 나름의 기준으로 해석해 벡터로 표현하는 것을 의미합니다. 예를 들어 "Love"라는 글자를 읽으면, 아래와 같이 무수히 많은 벡터로 변형하게 됩니다. [1.2472897123532, -2.1258931740124, 0.02148483, ...] 이 숫자가 무엇을 의미하는지 그리고 왜 이렇게 만들었는지는 그 누구도 알지 못합니다. 말로만 듣던 인공지능의 블랙박스인 것이죠. 따라서 인공지능 A 모델이 임베딩한 벡터는 다른 인공지능이 이해할 수 없습니다. 오로지 같은 모델만이 위의 벡터를 읽고 의미가 "Love"인 것을 알게 됩니다. 여기서 재미있는 생각.. 2024. 1. 19. [Highcharts] "removePoint" 에러 해결 안녕하세요 :) 오늘은 하이차트 작업 중에 위와 같은 에러가 발생했습니다. 필터를 선택하면 필터에 따라 위의 플래그가 나타나는 기능을 구현 중이었습니다. 이런저런 실험을 진행해 보니 아무래도 차트를 리렌더링 하는 과정에 문제가 발생하는 듯합니다. 정확한 원인을 파악하지 못했지만, 이전에 하이차트가 기존의 데이터를 캐싱해 발생하는 문제를 겪어본 경험이 있어 관련 문제라 짐작하고 해결을 시도해 보았습니다. 저의 경우 리엑트를 사용하고 있기 때문에 리엑트 라이브러리에 관련 옵션이 있는지 살펴보았고 아래와 같은 설정이 가능하다는 것을 발견 했습니다. immutable Boolean no false Reinitialises the chart on prop update (as oppose to chart.updat.. 2024. 1. 17. [Highcharts] 바차트에서 radius값 적용하기 안녕하세요 :) 오늘은 바차트 ui를 만들었는데요, 디자이너님이 네 모서리 모두 예쁘게 둥근 바차트를 디자인으로 넣어주셨습니다. 그래서 아래와 같이 borderRadius값을 넣어주었는데요, plotOptions: { bar: { pointWidth: 12, borderRadius: '30%', dataLabels: { enabled: false }, stacking: 'normal', borderWidth: 0, } }, 문제는 radius 적용이 오른쪽 상단과 오른쪽 하단만 되는 것이었습니다. highcharts 포럼을 뒤적이니 series에 borderRadiusTopLeft, borderRadiusBottomLeft 등의 값을 적용해 문제를 해결할 수 있다고는 나와있지만 documentation을.. 2023. 8. 23. [SVG] SVG를 이용한 gauge 차트 만들기 안녕하세요 :) 오늘은 게이지 차트를 아래와 같이 만들어 보았습니다. 고등학교 때 배운 삼각함수 개념정도만 이해하고 있으면 차트를 만드는데 큰 어려움은 없습니다. 1. 삼각함수를 이용해 좌표값 구하기 게이지 차트를 위해 가장 중요한 좌표는 게이지가 끝나는 지점 (sx, sy)입니다. (s는 starting의 약어인데 적절하지 않은 변수명이네요 ㅠㅠ) 코사인 세타에 반지름을 곱하면 cx에서 sx까지의 거리값이 나옵니다. 여기에다 중앙값인 cx값을 더하면 sx값이 구해지게 됩니다. y좌표도 마찬가지 방법으로 구했습니다. 2. SVG 태그를 이용해 호 그리기 이부분이 살짝 어려운데요, 공식문서를 찾아보면 Arc를 그리는 방법에 대해 설명이 되어 있습니다. SVG에서 Arc를 그리기 위해서는 꽤나많은 파라미터를.. 2023. 8. 1. [Highcharts] Key events 플래그 만들기 안녕하세요 :) 구글 파이낸스 웹사이트에서는 Key events라는 신기한 기능을 지원하길래 비슷한 기능을 highchart로 구현해 보았습니다. Key events란 특정 시점에 어떤 일이 있었는지 자세히 알려줄때 유용한 기능입니다. 위와 같이 차트상 어떤 시점에 중요한 이벤트가 있었다면 표시하는 방식으로 사용자가 빠르게 중요 과거사에 대해 알 수 있도록 해줍니다. 지금 근무하는 회사에서도 주식 차트를 다루기 때문에 해당 기능을 구현하면 좋겠다 싶어 한번 기능 구현만 간단하게 해 보았습니다. 사실 highchart에서는 필요한 기능을 이미 지원하기 때문에 별다른 기능추가 없이 간단하게 keyEvents 차트를 만들 수 있습니다. 위 플래그 부분의 경우 아래와 같이 코드를 추가하면 됩니다. { type:.. 2023. 5. 22. [Highcharts] 유연한 그룹핑 바차트 만들기 안녕하세요, 개발자 Sean입니다. 베타 버전 배포까지 2회의 스프린트밖에 남지 않아 최근 굉장히 피로에 쩔은 나날을 보내고 있습니다... 오늘은 최근에 새롭게 도전해본 '유연한 그루핑 바차트'에 대해 포스팅해보려고 합니다. 사실 이름이 따로 정해져 있는 건 아니고 제가 그냥 멋대로 지은 이름입니다 ㅎㅎ;; highcharts를 이용해서 아래와 같은 그룹핑 바차트를 만들었습니다. 여기서 그룹핑이란 일정 기간동안의 데이터를 모아서 나타내는 것을 말합니다. 예를 들어 한 달 동안의 데이터를 합친다거나 일주일간의 평균을 내거나 하는 방식으로 말이죠. 하지만 여기서 문제가 하나 발생했습니다. 위처럼 차트 시간이 길어질수록 바끼리 포개지는 문제가 발생했습니다. 생각해보면 당연한 현상입니다. 시각적으로 색깔 구분이.. 2022. 10. 13. 이전 1 다음
