Last active
December 5, 2015 03:37
-
-
Save nacyot/9c4e49f540b86c8a7d0c to your computer and use it in GitHub Desktop.
Multimedia 작가 연대기
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
</head> | |
<body> | |
<svg width="960" height="1200"></svg> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script> | |
<script src="./timeline.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
chapter | author | title | year | birth | death | |
---|---|---|---|---|---|---|
1 | Richard Wagner | Outlines of the Artwork of the Future | 1849 | 1813 | 1883 | |
2 | F. T. Marinetti | The Futurist Cinema | 1916 | 1876 | 1944 | |
2 | Bruno Corra | The Futurist Cinema | 1916 | 1892 | 1976 | |
2 | Emilio Settimelli | The Futurist Cinema | 1916 | 1891 | 1954 | |
2 | Arnaldo Ginna | The Futurist Cinema | 1916 | 1890 | 1982 | |
2 | Giacomo Balla | The Futurist Cinema | 1916 | 1871 | 1958 | |
2 | Remo Chiti | The Futurist Cinema | 1916 | 1891 | 1971 | |
3 | László Moholy-Nagy | Theater,Circus,Variety | 1924 | 1895 | 1946 | |
4 | Dick Higgins | Intermedia | 1966 | 1938 | 1998 | |
5 | Billy Klüver | The Great Northeastern Power Failure | 1966 | 1927 | 2004 | |
6 | Nam June Paik | Cybernated Art | 1966 | 1932 | 2006 | |
6 | Nam June Paik | Art and Satellite | 1984 | 1932 | 2006 | |
7 | Norbert Wiener | Cybernetics in History | 1954 | 1894 | 1964 | |
8 | J.C.R. Licklider | Man-Computer Symbiosis | 1960 | 1915 | 1990 | |
9 | Douglas Engelbart | Augmenting Human Intellect: A Conceptual Framework | 1962 | 1925 | 2013 | |
10 | John Cage | Diary: Audience 1966 | 1966 | 1912 | 1992 | |
11 | Roy Ascott | Behaviourist Art and the Cybernetic Vision | 1966 | 1934 | 0 | |
12 | Myron Krueger | Responsive Environments | 1977 | 1942 | 0 | |
13 | Alan Kay | User Interface: A Personal View | 1989 | 1940 | 0 | |
14 | Jeffrey Shaw | Modalities of Interactivity and Virtuality | 1992 | 1944 | 0 | |
15 | Vannevar Bush | As We May Think | 1945 | 1890 | 1974 | |
16 | Ted Nelson | excerpt from Computer Lib/Dream Machines | 1974 | 1937 | 0 | |
17 | Alan Kay | Personal Dynamic Media | 1977 | 1942 | 0 | |
17 | Adele Goldberg | Personal Dynamic Media | 1977 | 1945 | 0 | |
18 | Richard A. Bolt | Spatial Data-Management | 1979 | 1911 | 2002 | |
19 | Marc Canter | The New Workstation: CD ROM Authoring Systems | 1986 | 1957 | 0 | |
20 | Tim Berners-Lee | Information Management: A Proposal | 1989 | 1955 | 0 | |
21 | George Landow | Hypertext,Hypermedia and Literary Studies: The State of the Art | 1991 | 1940 | 0 | |
21 | Paul Delany | Hypertext,Hypermedia and Literary Studies: The State of the Art | 1991 | 1937 | 0 | |
22 | Morton Heilig | The Cinema of the Future | 1955 | 1926 | 1997 | |
23 | Ivan Sutherland | The Ultimate Display | 1965 | 1938 | 0 | |
24 | Scott Fisher | Virtual Interface Environments | 1989 | 1955 | 1996 | |
25 | William Gibson | Academy Leader | 1991 | 1948 | 0 | |
26 | Marcos Novak | Liquid Architectures in Cyberspace | 1991 | 1957 | 0 | |
27 | Daniel Sandin | A Room with a View | 1993 | 1942 | 0 | |
27 | Thomas DeFanti | A Room with a View | 1993 | 1948 | 0 | |
28 | Char Davies | Changing Space: Virtual Reality as an Arena of Embodied Being | 1998 | 1954 | 0 | |
29 | William Burroughs | The Future of the Novel | 1964 | 1914 | 1997 | |
30 | Allan Kaprow | Untitled Guidelines for Happenings | 1965 | 1927 | 2006 | |
31 | Bill Viola | Will There Be Condominiums in Data Space? | 1982 | 1951 | 0 | |
32 | Lynn Hershman | The Fantasy Beyond Control | 1990 | 1941 | 0 | |
33 | Roy Ascott | Is There Love in the Telematic Embrace? | 1990 | 1934 | 0 | |
34 | Kit Galloway | Welcome to 'Electronic Café International': A Nice Place for Hot Coffee,Iced Tea,& Virtual Space | 1992 | 1948 | 0 | |
34 | Sherrie Rabinowitz | Welcome to 'Electronic Café International': A Nice Place for Hot Coffee,Iced Tea,& Virtual Space | 1992 | 1950 | 2013 | |
35 | Pavel Curtis | Mudding: Social Phenomena in Text-Based Virtual Realities | 1992 | 1953 | 0 | |
36 | Pierre Lévy | Collective Intelligence | 1994 | 1956 | 0 | |
37 | Janet Murray | Agency | 1997 | 1946 | 0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Title | |
// axis | |
// grid - yGRID, multimedia published | |
// mouseOver | |
// order - year, birth, death | |
// Parts - color | |
// Wikipedia link | |
d3.csv('./multimedia.csv', (data) => { | |
// data = _.sortBy(data, (datum) => { return datum.year; }) | |
data = _.sortBy(data, (datum) => { return datum.birth; }) | |
var width = 960; | |
var height = 1200; | |
var xPadding = 50; | |
var yPadding = 30; | |
var xScale = d3.scale.linear() | |
.domain([1800, 2015]) | |
.range([0 + xPadding, width - xPadding]); | |
var yScale = d3.scale.ordinal() | |
.domain(_.map(data, (datum) => datum.author )) | |
.rangeRoundBands([0 + yPadding, height - yPadding], .1); | |
var getYCenter = function(datum){ | |
return yScale(datum) + yScale.rangeBand() / 2; | |
} | |
d3.select('svg') | |
.style('border', '1px solid white') | |
d3.select('svg') | |
.selectAll('text.author-text') | |
.data(_.uniq(_.sortBy(data, (datum) => datum.year), (datum) => datum.author)) | |
.enter() | |
.append('text') | |
.attr('x', (datum) => xScale(datum.year) - 5) | |
.attr('y', (datum) => getYCenter(datum.author) - 5) | |
.text((datum) => datum.author ) | |
.style('font-size', '10px') | |
.style('text-anchor', 'end') | |
d3.select('svg') | |
.selectAll('text.year-text') | |
.data(data) | |
.enter() | |
.append('text') | |
.attr('x', (datum) => xScale(datum.year) + 5) | |
.attr('y', (datum) => getYCenter(datum.author) - 5) | |
.text((datum) => datum.year) | |
.style('font-size', '10px') | |
.style('text-anchor', 'start') | |
d3.select('svg') | |
.selectAll('text.birth-text') | |
.data(_.uniq(data, (datum) => datum.author)) | |
.enter() | |
.append('text') | |
.attr('x', (datum) => xScale(datum.birth) - 5) | |
.attr('y', (datum) => getYCenter(datum.author)) | |
.text((datum) => { return datum.birth }) | |
.style('font-size', '8px') | |
.style('text-anchor', 'end') | |
.style('dominant-baseline', 'middle') | |
.style('fill', 'gray') | |
d3.select('svg') | |
.selectAll('text.start-text') | |
.data(_.uniq(data, (datum) => datum.author)) | |
.enter() | |
.append('text') | |
.attr('x', (datum) => xScale(datum.death) + 5) | |
.attr('y', (datum) => getYCenter(datum.author)) | |
.text((datum) => datum.death) | |
.style('font-size', '8px') | |
.style('text-anchor', 'start') | |
.style('dominant-baseline', 'middle') | |
.style('fill', 'gray') | |
d3.select('svg') | |
.selectAll('line') | |
.data(data) | |
.enter() | |
.append('line') | |
.attr('x1', (datum) => xScale(datum.birth)) | |
.attr('y1', (datum) => getYCenter(datum.author)) | |
.attr('x2', (datum) => datum.death == 0 ? xScale(2015) : xScale(datum.death)) | |
.attr('y2', (datum) => getYCenter(datum.author)) | |
.attr("stroke-width", 1) | |
.attr("stroke", "lightgray") | |
d3.select('svg') | |
.selectAll('circle') | |
.data(data) | |
.enter() | |
.append('circle') | |
.attr('cx', (datum) => xScale(datum.year)) | |
.attr('cy', (datum) => getYCenter(datum.author)) | |
.attr('r', '2px'); | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment