Bind Your Data! - DCSLABdcslab.snu.ac.kr/courses/cp2017s/project1_spec.pdf · 2019-03-16 · Spring 2017 컴퓨터프로그래밍. Bind Your Data! • enter •

Spring 2017

컴퓨터프로그래밍프로젝트 : Bind Your Data!

Spring 2017 컴퓨터프로그래밍

Bind Your Data!

• 제출 기한 및 딜레이

• 5월 23일 자정까지

• 5월 25일 자정까지 딜레이 허용, 하루에 20%씩 감점

• https://cp2017s.snu.ac.kr/project 에 제출 바랍니다.

2

제출 기한 및 참고사항

Bind Your Data!

• 주어진 CSV와 Recipe로 SVG를만드는인터프리터만들기

• CSV란?• Comma-Separated Values

• 각열을콤마로구분하는 데이터기술형식을뜻함

• 이번프로젝트에서는명령줄인자로 n개의 CSV 파일이들어오게된다.• 이번프로젝트에서한번에주어지는 CSV파일들의필드의이름과그타입은동일하다.

• 사용할 CSV의형식은아래와같음

• 이번프로젝트에서 value의타입은 string, int, float으로한정된다.

CSV + Recipe (Interpreter : Your PROJECT) SVG

3 Spring 2017 컴퓨터프로그래밍


Bind Your Data!


• Recipe란?• 주어진 CSV를 SVG로변환하는과정이쓰여진문서

• 이번프로젝트에서는 STDIN으로입력되어진다

• Recipe의 print instruction을 통해해당명령전까지만들어진 SVG를출력한다


4

<out.html>


Bind Your Data!


• SVG란?• Scalable Vector Graphics

• XML(Extensible Markup Language)형식으로 기술된 2차원벡터그래픽을표현하기

위한파일형식

• Chrome등의웹브라우저에서바로해석하여렌더링이가능하다

• <[태그] {[어트리뷰트이름]=“[어트리뷰트값]”} x n></[태그]> 형식으로이루어짐

• 계층구조를가지며 <>와 </> 사이에자식노드들이들어가게된다.

• 지금까지의과제와는다르게 SVG의텍스트값을비교하는것이아닌렌더링이

제대로되었는지가평가기준이다. (렌더링은크롬최신버전에서수행)


5


Bind Your Data!


• 인터프리터란?• 명령줄인자로주어진 CSV들을숙지하고 STDIN으로한줄씩입력되는 Recipe의

Instruction을 해석하여수행하는프로그램

• Instruction을 수행할때마다인터프리터가선택하고있는 SVG 객체가달라질수

있음, 인터프리터가선택하고있는 SVG 객체들의목록을 Selection이라고 함

• Selection에는 세종류가있으며아래와같다.• root-selection : root svg 객체를선택하고있는경우

• single-selection : root svg 객체가아닌다른 svg 객체를선택하고있는경우

• multiple-selection : 같은부모를둔 svg 객체들을선택하고있는경우

• ※ multiple-selection이 0개또는 1개의 svg 객체를선택하고있을수도있다.

• “html”을태그이름으로하는 root svg 객체는프로그램수행시자동으로

생성되어야하며, 인터프리터의초기 selection은 무조건이객체를선택하는 root-selection이다.


6


Bind Your Data!

• append <svg-tag-name>• (root-selection || single-selection) (single-selection)

• Selection의 child로 <svg-tag-name> tag를가진새로운 svg 객체를자식계층의마지막에추가한다.

• Instruction 수행후 selection은새로추가된 svg를선택한다.

7

Instructions : append


Bind Your Data!

• select <svg-tag-name>• (root-selection || single-selection) (single-selection)

• Selection의 child중 <svg-tag-name>을가지는객체를선택한다.• ※ <svg-tag-name>을 가지는 child가 단하나있음이보장되어있다.

• Instruction 수행후 selection은해당 child를선택한다.

8

Instructions : select


Bind Your Data!

• selectAll <svg-tag-name>• (root-selection || single-selection) (multiple-selection)

• Selection의 child중 <svg-tag-name>을가지는객체를모두선택한다.• ※ <svg-tag-name>을 가지는 child가 없어도, 1개만있어도무방하다

• Instruction 수행후 selection은해당 child들을선택한다.

9

Instructions : selectAll


Bind Your Data!

10

Instructions : selectAll


Bind Your Data!

• remove• (single-selection || multiple-selection) (single-selection || root-selection)

• 현재 selection이선택하고있는모든 svg 객체를삭제한다

• Instruction 수행후 selection은삭제된 svg 객체(들)의부모를선택한다.

11

Instructions : remove


Bind Your Data!

• end• (single-selection || multiple-selection || root-selection) (single-selection || root-

selection)

• Selection이현재 selection의부모 svg 객체를선택하도록한다.

• 만약현재 selection이 root-selection이라면프로그램을종료한다.

12

Instructions : end


Bind Your Data!

• enter <csv-index>• (multiple-selection) (multiple-selection)

• 현재 selection의 svg 객체들이바인딩하고있는데이터들과 <csv-index>번째의 csv 파일의데이터들을비교한다.

• csv 파일의데이터중그 unique-id가 svg 객체에바인딩된데이터의unique-id와같지않은데이터들에바인딩된 svg 객체들을새로만들어같은계층에마지막에추가한다.

• 이때, unique-id를오름차순정렬하여바인딩해야한다.

• unique-id는첫번째필드의 value다.• 다시말해 csv 파일의첫번째필드가 primary key가된다.• 첫번째필드의모든 value는 unique함(중복값이 존재하지않음)이보장된다.

• Instruction 후 selection은새로추가된 svg 객체들이다.

13

Instructions : enter


Bind Your Data!

• enter <csv-index>• (multiple-selection) (multiple-selection)

• selection이 0개일때에도 enter가가능하다는것에주의

14

Instructions : enter (figure, rect의 닫는 태그 생략)


Bind Your Data!

• update <csv-index>• (multiple-selection) (multiple-selection)


• csv 파일의데이터중그 unique-id가 svg 객체에바인딩된데이터의

unique-id와같은데이터들을해당 svg 객체에다시바인딩한다.

• Instruction 후 selection은다시바인딩된 svg 객체들이다.

15

Instructions : update


Bind Your Data!

• update <csv-index>• (multiple-selection) (multiple-selection)

16

Instructions : update (figure, rect의 닫는 태그 생략)


Bind Your Data!

• exit <csv-index>• (multiple-selection) (multiple-selection)


• selection은 svg 객체에바인딩된데이터중그 unique-id가 csv 파일의데이터의 unique-id와같지않은 svg 객체들을선택한다.

17

Instructions : exit


Bind Your Data!

• exit <csv-index>• (multiple-selection) (multiple-selection)

18

Instructions : exit (figure, rect의 닫는 태그 생략)


Bind Your Data!

• cattr <svg-attr-name> <svg-attr-value>

• Selection이선택하고있는 svg 객체(들)의 attribute를수정한다.• attribute가 없다면새로추가하고, 있다면값을수정한다.

19

Instructions : cattr


Bind Your Data!

• tattr <x-multiplier> <y-multiplier>

• Selection이선택하고있는 svg 객체(들)을 translate한다.

• svg 객체의 translate는해당객체에 transform=“translate(x, y)” 형식의attribute를넣음으로써수행할수있다.

• 이때 x와 y에는 <_-multiplier> * index에 해당하는수치가들어간다.

• index는 해당 svg객체가 selection에서 몇번째에 위치하는지에대한순서정보

• transform attribute가 없다면새로추가하고, 있다면값을수정한다.

20

Instructions : tattr


Bind Your Data!

21

Instructions : tattr (figure, rect의 닫는 태그 생략)


Bind Your Data!

• dattr <svg-attr-name> <datum-field-name> [<mul>] [<add>]

• Selection이선택하고있는 svg 객체(들)의 attribute를그객체가바인딩하고있는데이터의필드를참조하여수정한다.

• attribute가 없다면새로추가하고, 있다면값을수정한다.

• 만약 <datum-field-name>에해당하는 field의타입이 int거나 float이고,[<mul>]과 [<add>]가주어졌다면, value * <mul> + <add>의값으로수정한다.

• dattr은 [<mul>]과 [<add>] 둘다주어지지않거나, [<mul>]만주어지거나,[<mul>]과 [<add>]가동시에주어지는세가지의입력이가능함.

• <datum-field-name>의 타입이 string인데 [<mul>]과 [<add>]를주는 dattr 명령은들어오지않음이보장된다.

• Selection이선택하고있는 svg 객체(들) 중하나라도데이터가바인딩되어있지않은경우에 dattr 명령은들어오지않음이보장된다.

22

Instructions : dattr


Bind Your Data!

23

Instructions : dattr (figure, rect의 닫는 태그 생략)


Bind Your Data!

• print <output-name>

• root svg 객체들을 <output-name> 파일에출력한다.

• 출력양식은아래의양식을재귀적으로호출하면된다.• <tag attr1=“attr1-value” attr2=“attr2-value” ...>

(tag의자식들출력)</tag>

24

Instructions : print


Bind Your Data!

25

예시 입력과 출력 (1)


Bind Your Data!

26


<2.html>

<1.html>


Bind Your Data!

27


<4.html>

<3.html>


Bind Your Data!

28


<5.html>


Bind Your Data!

29



Bind Your Data!

30


<1.html> <2.html>


Bind Your Data!

31


<3.html> <4.html>

Documents

Bind Your Data! - DCSLABdcslab.snu.ac.kr/courses/cp2017s/project1_spec.pdf · 2019-03-16 · Spring 2017 컴퓨터프로그래밍. Bind Your Data! • enter •