Skip to content

Instantly share code, notes, and snippets.

@nacyot

nacyot/index.html

Last active December 5, 2015 03:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nacyot/9c4e49f540b86c8a7d0c to your computer and use it in GitHub Desktop.
Save nacyot/9c4e49f540b86c8a7d0c to your computer and use it in GitHub Desktop.
Download ZIP
Multimedia 작가 연대기
Raw
index.html
<!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>
Raw
multimedia.csv
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
Raw
timeline.js
// 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