곱연산 계산

곱연산이 헷갈려서 만들었다.

calc([50, 30, 20]);

function calc(persents){
 let value = 1;
 let calcPersent = 1;

 for(persent of persents){
  calcPersent *= (1-(persent/100));
 }
 value -= calcPersent;
 return value*100 + " %";
}

spacebar로 값을 구분하며 숫자만 입력

Read more →

데이터의 시각화, D3

D3

D3(Data-Driven Documents).js는 은 웹 표준을 사용하여 데이터를 시각화하는 JavaScript 라이브러리입니다. SVG, Canvas 및 HTML을 사용하여 데이터를 실제로 사용할 수 있도록 도와줍니다. 강력한 시각화 및 상호 작용 기술과 DOM 조작에 대한 데이터 중심 접근 방식을 결합하여 최신 브라우저의 모든 기능을 제공하고 데이터에 적합한 시각적 인터페이스를 자유롭게 설계 할 수 있습니다.

API Reference

아래의 기준에따라 시각화를 분류할 수 있습니다.

• Arrays (Statistics, Search, Transformations, Histograms)
• Axes
• Brushes
• Chords
• Collections (Objects, Maps, Sets, Nests)
• Colors
• Color Schemes
• Contours
• Dispatches
• Dragging
• Delimiter-Separated Values
• Easings
• Fetches
• Forces
• Number Formats
• Geographies (Paths, Projections, Spherical Math, Spherical Shapes, Streams, Transforms)
• Hierarchies
• Interpolators
• Paths
• Polygons
• Quadtrees
• Random Numbers
• Scales (Continuous, Sequential, Diverging, Quantize, Ordinal)
• Selections (Selecting, Modifying, Data, Events, Control, Local Variables, Namespaces)
• Shapes (Arcs, Pies, Lines, Areas, Curves, Links, Symbols, Stacks)
• Time Formats
• Time Intervals
• Timers
• Transitions
• Voronoi Diagrams
• Zooming

Gallery

Gallery 에서 데이터들을 정렬한 방식들을 확인할 수 있습니다.

Read more →

markdown 기반 flow chart, mermaid

mermaid

markdown 기반 flow chart, sequence / class diagram, gantt chart, git graph 등을 표현할 수 있는 API

Flowchart #

Link text

One

Two

Hard edge

Round edge

Decision

Result one

Result two

Sequence Diagram#

Ganttchart#

Blog Setting

mermaid.initialize({ startOnLoad:true, theme: 'forest' });
window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));

현재 이 블로그에서 위와 같은 설정을 통해 markdown 방식으로 아래와 같은 형태로 사용 가능

```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
```

Read more →