Quantum Letters Daniel Cavalcanti
QUANTUM LETTERS Master project by Daniel Cavalcanti Graphic Design and illustration IDEP, Barcelona, September 2014
2
Thanks to Xavier Alamany, Xavi Palouzie, Juan Cardosa, Fernando Cucchietti, Mario Sรกnchez,Victoria Torres, Junia Fatorelli, Joanna Fatorelli, Gina Reincke, and Libby Heaney.
3
CONTENT 1. Presentation
5
2. Motivation
6
3. Methodology
7
4. References
8
5. Quantum physics and the wave-particle duality
25
6. Quantum letters
29
Parameters defining the letters
31
Spread
32
The underlining size
33
Number of points
34
Colour 35 Opacity 36 Quantum version of known fonts
37
Other possibilities
38
Consequences 39
7. Applications
45
8. Conclusions
52
Bibliography 53 Appendix: D3.js codes
54 4
1. Presentation
T
his project consists in proposing a new way of thinking and designing letters. It uses concepts developed in the framework of quantum physics to bring new insight to the fields of lettering and typography. It is thus an interdisciplinary project that aims at exploring quantum physics ideas to obtain new methods in graphic design.
5
2. Motivation
I
n the beginning of the 20th century the world witnessed a revolution in science. In order to explain some newly found phenomena at small scales – like the behaviour of atoms, molecules, and small particles– physicists had to come up with a totally new theory, namely quantum mechanics. This new theory was not simply an extension of the old classical physics. It had to be built from scratch. New concepts had to be created. New axioms were formulated. New mathematical tools had to be developed. The quantum revolution totally changed the way science is developed. The appearance of quantum mechanics had a direct impact in other sciences like biology and chemistry. But more interestingly for the sake of the present project, quantum mechanics has also influ-
enced several other fields like philosophy, literature, arts, and architecture. The interplay between quantum physics and graphic design seems to be much less explored however. Most of the works on this intersection are descriptive, it is, they use graphic design techniques to explain literally a given concept. Many examples can be found, for instance, in physics book covers or in conference posters. The main motivation for the present project is then to fill this gap by borrowing concepts from quantum physics to develop insights into graphic design, or, more specifically, lettering and typography.
6
3. Methodology
The methodology used in this project consisted in two steps: 1. Background 1.1. Search for interdisciplinary works involving visual arts and physics, in special quantum physics. 1.2. Study of the main concepts in quantum physics. 2. Designing 2.1. Choice of a quantum physics concept that represents faithfully the conceptual rupture with classical physics. 2.2. Definition of the letter designing. 2.3. Generation of examples. 2.4. Proposal for the implementation in a user friendly way.
7
4. References
here are several levels in which the intersection between science and visual arts can occur. On the most representative level there is the field of scientific illustration, which aims at displaying in a direct way some scientific concept or situation.
T
concepts, without the need to accurately describe them. These works appear, for instance, on the design of scientific communication, like in covers of scientific books, illustrations in scientific magazines, websites, and posters of scientific conferences.
In a second level we may include infographics, data visualisation, or information design. These disciplines deal with the interpretation and representation of (a usually big amount of) data. The main goal is to convey information graphically in a simple and fast way. Different visual representations of the same data convey different information of it. Thus, a good representation allows us to understand the information better.
Finally, there are the truly interdisciplinary works, in which a symbiotic fusion between visual arts and science can be found. This can be found, for example, in fine arts projects. Such works are generally more abstract and do not necessarily have the goal of explaining the used concept.
In a bit more abstract level there are the works that aim at illustrating science
In what follows examples of such projects can be found. Among these examples there are graphic design projects, and art works like sculptures, movies and dance based on scientific concepts. 8
Infographics Francesco Frachini web Francesco is designer, art director, journalist, and author of the book Designing News. He publishes a monthly infographic at the magazine Intelligence in Lifestyle. Francesco has wan several prizes including the European Design Award 2013.
9
Data visualisation Information is beautiful, Web and book web Information is Beautiful is a website and book devoted to data visualisation. It was created by David McCandless, a London based writer and designer. Information is Beautiful contains several projects on different fields ranging from climate to music. As stated in the website “Myself, and the rest of the crack team here at Information is Beautiful, are dedicated to distilling the world’s data, information and knowledge into beautiful, interesting and, above all, useful visualizations, infographics and diagrams. “
10
Data visualisation Fernanda Viegas web Fernanda Viegas is a brazilian scientist and designer. She is co-leader of the Google’s “Big Picture” data visualization group. She is founder of the website Many Eyes in which the public can upload data and create visualisations. Fernanda is known for her artistic approach to displaying information. An example of her scientific-artistic work is Wind Map, co-authored with Martin Wattenberg, which shows in real time the tracery of wind flowing over the US.
11
Data visualisation Martin Wattenberg web
Martin Wattenberg is a computer scientist and artist and co-leader, with Fernanda Viegas, of Google’s “Big Picture” data visualization group. Martin’s work focuses on cultural subjects and ways to represent information in a narrative and beautiful way.
12
Data visualisation Aron Koblin web / videos
Aron Koblin uses community-generated data to create images that display patterns and correlations found in human behaviour. Aron has works in the permanent collection of the Museum of Modern Art (MoMA) in New York, the Victoria & Albert Museum (V&A) in London, and the Centre Pompidou in Paris. He currently leads the Data Arts Team in Google’s Creative Lab.
Flight patterns over U.S.
13
Graphic Design Laws of Motion Four fundamental forces Justin Van Genderen web Laws of motion is a project by the graphic artist Justin Van Genderen. In this project Justin represents, in a graphical way, the tree laws of motion by Isaac Newton. Four Fundamental Forces provides a graphical representation of the four types of forces that are observed in nature.
14
Graphic Design Philographics GenĂs Carrera web GenĂs Carrera is a Spanish graphic designer based in London. His most known project is Philographics, a series of 24 posters representing philosophical ideas through basic shapes and colours. This gives a quick and direct idea about complex concepts and can be used as pieces of design or on educational purposes.
15
Graphic Design Scientists Series Kapil Bhagatweb web
Kapil is a graphic designer from Mumbai, India. His series Scientists consists of posters in which the name of great scientists are written in a way that illustrates the concept or theory created by each of them.
16
Graphic Design and illustration International Year of Astronomy International Year of Chemistry Simon Page web
Simon Page is a London based graphic designer specialised in scientific communication. He has developed poster series for the International Year of Astronomy and Chemistry, in which he developed graphical ways of representing concepts in physics and chemistry.
17
Sculpture Invisible man Julian Voss-Andreae web
Julian Voss-Andreae is a German sculptor that pursued his graduate research in quantum physics. His works are frequently based on concepts of quantum mechanics, like the sculpture Quantum Man (besides).
18
Sculpture Feyman Diagrams Edward Tufte web Edward Tufte is a professor emeritus of political science, statistics, and computer science at Yale University. He is one of the pioneers in the field of information design. He has written several books on this subject including the well known The Visual Display of Quantitative Information. In his work Feyman Diagrams (besides), Tufte creates a series of sculptures based on theory of the physicist Richard Feyman on the behaviour of subatomic particles.
19
Sculpture Elements of reality/God’s dice/Decoherence Libby Heaney web
Libby Heaney is PhD in physics and has worked on quantum information and foundations of quantum mechanics. She has moved into arts and creates sculptures inspired by concepts in quantum physics like randomness, correlations, and decoherence.
20
Cinema Colapse Dagomir Kazlikowisk web Dagomir Kazlikowisk is a movie maker and professor of quantum physics in the Center for Quantum technologies in Singapore. Dagomir explores concepts from quantum physics to create intriguing screenplays. His movie Don’t Hang Up, My Love wan the best screenplay in 3rd Kolkata Shorts International Film Festival.
21
Cinema The splitter/The Mechanics Karol Jalochowski web Karol Jalochowski is a scientific writer and movie maker based in Singapore. He currently works at the Centre for Quantum Technologies creating movies about science and the life of scientists. In his movie The Splitter he uses the concepts of the Many Worlds interpretation of quantum mechanics to create surrealistic scenes that illustrate it.
22
Cinema Time dilation/Quantum particles Andrzej Dragan web Andrzej Dragan is a polish physicist and movie maker. He obtained his PhD in quantum physics from the University of Warsaw where he currently runs a research group on quantum information. Andrzej’s movies are heavily based on concepts of quantum physics and relativity.
23
Dance Spooky action Strangeweather Movement web
Strangeweather movement is a dance company based in Singapore. They have developed the show Spooky Action (2012) in which they explore the phenomenon of quantum entanglement to create correlated movements.
24
5. Quantum physics and the wave-particle duality
T
o understand how quantum mechanics changed our perception of reality let us start by describing the physics before its birth. Until the beginning of the 20th century the Newtonian mechanics were considered the most suitable way of describing the movement of objects. On the one hand it is impressive simple, involving basic mathematics and few axioms. On the other hand it explains precisely a wide variety of phenomenon ranging from the movement of the planets until the behaviour of gases and small objects. Newtonian mechanics is based on natural concepts like position, velocity, and forces. According to it, if one knows the mass, position, speed and the forces acting in a given object, one can describe its entire future behaviour. Nowadays
these concepts are so natural that most of people have not even thought on what they really mean. Besides studying the movement of particles, Newton was also concerned with another type of movement: wave behaviour. Differently from particles, a wave is something that does not have a fixed position: it is spreads. While particles collide, waves interfere. Perhaps the best way of understanding the difference between waves and particles is through an example, the socalled double slit experiment. This is an experimental situation in which waves and particles behave totally different. It is described in Fig. 1a. The experiment consists of a source, a first plate with two slits, and a second plate or screen.
25
In figure 1A we can see what would be the resulting pattern if the source would send particles. As one might expect, each particle travels following a given trajectory, some of them crossing thought the slits and some others reflecting. Since there are two slits the particles arrive in two distinct regions at the final screen.
Fig. 1a
However, if the source produces waves (like in oscillating water) what happens is totally different, as shown in Fig. 1b. When the wave reaches each slit, new waves are produced after them. Moreover, these waves interfere, it is, when two peaks of the different waves meet, they sum up producing a peak with double height. In the regions where a peak of a wave meets a valley of the other they cancel each other, and the waves disappear. When the waves finally reach the Fig. 1b 26
final screen what is seen is that in some positions there are peaks and in others no wave at all. Following the works of Newton, several important scientists put on solid grounds the theory of movement, of classical mechanics, and the theory of waves. It was basically agreed that some physical entities could be described like particles (like the planets, cars, gases, etc) and some others as waves (like light and the electromagnetic field). When the first experiments on the atomic level started to be realised, physicists noticed that this strong separation between wave and particle behaviour was not accurate enough. At small scales the objects presented both particle and wave features at the same time. But particles and waves exhibit opposite features. So, how can it be?
trons or photons, one by one (see figure 2). Each electron that is sent reaches the screen in a given precise position. This may give the impression that electrons are particles, as those ones illustrated in Fig 1A. However, after sending many photons, one realises that they actually reach the screen in very specific positions, following exactly the same pattern exhibited by the waves in Fig 1B: the electrons never arrive at places where the waves would have shown destructive interference and cancel out; and the number of electrons at each position is proportional to how much the waves would have added up. This is a very counter-intuitive result: on the one hand the electrons behave as particles, by reaching the screen in a very specific position. On the other hand
Let us come back to the double-slit experiment, but now considering that the source sends quantum objects, say elec27
they behave as waves, by filling the two holes, interfering with themselves and changing their trajectory to reach the screen in determined areas. In fact, this is a way of seeing that an electron, as any other quantum object, does not have a determined position or speed. Those are somehow classical concepts that do not apply straightforwardly to the quantum regime.
Fig. 2
28
6. Quantum letters
29
H
aving explained the wave-particle duality in quantum physics I can now describe the present project. As mentioned before, the main goal is to propose a new way of designing letters based on quantum mechanics. What the double-slit experiment shows is that a quantum object does not have a fixed position, but has a given probability of being in a given place. In the quantum double-slit this probability is given by the wave pattern shown in Fig 1b. The main goal here is to use this idea in the design of letters. I am going to call this method quantum lettering. In quantum lettering each letter is composed by a given number of points. Each point will be distributed in the sheet (or computer screen) according to a probability distribution, whose shape is based on the specific letter. Then, each time that a letter is chosen the points composing it randomly appear, following the probability distribution defining the letter.
30
Parameters defining the letters Size of the points The size of the points composing the letters plays an important role on their readability. Moreover it also affects the values that the letters can transmit to the reader. Besides you can see two different letters “A� constructed with the same number of points and spread, but with different point’s sizes.
31
Spread The spread of the underlining probability distribution will roughly determine how blurred the letter will appear. The bigger the spread more points will fall over a bigger area. Contrarily, if the spread is very small we will be able to see a very precise letter, as most of the point will fall over a definite area. In the next examples we show the same letter constructed with the same number of points but different spreads.
32
The underlining size Each letter will be based on a probability distribution. This distribution can have different “sizes�. The bigger the size of the distribution, the bigger will be our perception about the relative size between the letter and the sheet.
33
Number of points Each letter is composed by a definite number of points, that is chosen in advance. If very few points are chosen, we wont be able to recognise the letter, in the same way that few electrons do not provide us with a wave patter in the double-slit experiment.
10pts
20pts
50pts
Besides you can see the same letter, constructed from the same probability distribution, but with different number of points.
80pts
100pts
200pts 34
Colour By changing the colour of different letters one can recognise which point comes from which letter. Below one can find the word “colour� written with letters of different colours.
35
Opacity By changing the opacity of each point one can see easier that two points may fall over the same area.
opacity 50%
opacity 100% 36
Quantum version of known fonts We can construct the quantum version of any font, by generating the probability distribution defining the letter based on a given font.
Helvetica based
Baskerville based 37
Other possibilities Other possibilities that were not explored in this project were the “dynamical construction� and the use of other symbols. The dynamical construction refers to the fact that by pressing a letter button the points forming this letter can appear one by one, dynamically. This resembles the double-slit experiment where one electron is sent at each time. This may be an interesting resource for web or digital publications. In the letters shown previously circles were used. However one may think of other symbols to construct them, as in the example on the right, in which several letters N compose a big letter N.
38
Consequences The main goal of developing quantum letters was to break with some classical typography rules. In the same way that in quantum mechanics objects do not have a definite position or direction of movement, in quantum letters the letters do not have some features as the distance between letters. Each letter may contain points all over the page. Thus, classical concepts like the x-height, descender, ascender, kerning, tracking, and ligatures do not make sense anymore. Another consequence of quantum lettering is the fact that each time we call for a letter a different one will appear. There will never be two identical letters, as the points composing them appear randomly.
39
Implementation in D3.js An important question is how to implement the quantum letters in a user friendly way. It is not possible to use standard typography generators, since, as we have just seen, quantum lettering is not based on standard typographic parameters. Moreover it can not be classified as standard lettering as well, as the letters do not have a definite form, and change at each use.
distribution. This can be simply done using a grayscale image. This sort of images associate a intensity to each pixel, which will refer to how black or white the pixel is. So, a grayscale image is simply a table of numbers, that, if divided by the sum of all pixel intensities in the image, becomes a probability distribution.
One possible way of implementing quantum letters would be to use D3.js, a JavaScript library that allows to convert data into images that can be displayed in modern internet browsers.
After having the probability distributions for each letter defined, one can then feed it into D3.js. Whenever one press a letter button on the computer D3.js access the probability distribution and uses it to generate the pre-defined number of points.
Here is a sketch of how one could implement quantum letters using D3.js: For each letter, underlining size and spread we have to associate a probability
In what follows I present some examples of D3.js based graphics that are related to the present project. In the Appendix the specific codes of each example are shown. 40
Example 1: U.S. urban areas This hows graphically the size of the urban areas in the United States according to a 2008 census. web
41
Example 2: Hexagonal Binning (Area) This examples shows the binning of 2,000 random points with a normal distribution. They were binned into hexagons whose area encodes the number of points that fall into each bin. web
42
Example 3: Mitchell’s best candidate This examples shows points generated progressively by an algorithm that samples from a given probability distribution that is updated at each round. web
43
Example 4: Build your own graphics This example allows one to add points into a canvas. Each point is separated from the others following a repulsive rule. web
44
7. Applications
uantum letters have direct applications in scientific communication. For instance, it can be used in physics books covers, in the illustration and signage of research institutes, conference posters, websites of scientific organisations, etc.
Q
mentations of it as plug-ins for FontLab, Illustrator, InDesign, or Photoshop. Apps for generating quantum letters could also be based on D3.js, that furthermore could include the possibility of exporting the letters into pixel and vector based images.
Besides these obvious applications, I believe that the letters developed have an interesting visual appealing that make it appropriate to other situations. For instance, it could be used to communicate the concepts of freedom, diffusion, expansion, group, imprecision, use of space, intersection, interchange of ideas/things, among others.
In what follows I provide some specific examples of where applications where quantum letters could be used.
On the commercial side, given that the 3D.js Java Script could be used to implement Quantum Letters I envision imple-
45
46
F 47
48
49
50
51
8. Conclusions
Q
uantum letters is an interdisciplinary project that brings new insights to the field of lettering and typography. The main goal was to use concepts from quantum physics to design letters based on new parameters. In the same way that quantum physics broke with the standard rules of physics, quantum lettering breaks with standard typographic concepts. In this way we hope that the present project can inspire further studies on typography and lettering that go beyond the currently view about these fields.
52
Bibliography
Texts and books • The Feyman’s lectures on physics vol. 3 Richard Feynman, Robert B. Leighton, and Matthew Sands, Basic Books (2011). • Quantum Theory: Concepts and Methods Asher Peres, Springer (1995) • The turning point Fritjof Capra, Bantam books (1983). web • Physics and Beyond, Werner Heisenberg, HarperCollins Publishers Ltd (1971).
Exhibition • Designing Science, Amy Edmondson. web
• Big Bag Data - CCCB (Barcelona), 09/05 to 26/10/2014. web
• Quantum Sculpture: Art Inspired by the Deeper Nature of Reality, Julian Voss-Andreae Journal of the International Society for the Arts, Sciences and Technology, vol 44, 1 (2011).
Websites
• • • • •
Visual complexity BCN center for supercomputing Information is beautiful Many eyes D3.js
Talks • Visualizing ourselves ... with crowdsourced data, Aron Koblin’s TED talk • Fernanda Viegas, TEDx Talk
53
Appendix: D3.js codes
Example 1: U.S. urban areas
index.html#
web
<!DOCTYPE html> <meta charset=”utf-8”> <style> </style> <body> <script src=”http://d3js.org/d3.v3.min.js”></script> <script src=”http://d3js.org/topojson.v1.min.js”></script> <script> var width = 960, height = 600; var path = d3.geo.path() .projection(null); var svg = d3.select(“body”).append(“svg”) .attr(“width”, width) .attr(“height”, height); d3.json(“us.json”, function(error, us) { svg.append(“path”) .datum(topojson.feature(us, us.objects.uac)) .attr(“d”, path); }); d3.select(self.frameElement).style(“height”, height + “px”); </script> 54
Example 2: Hexagonal Binning (Area) web
var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;
.append(“g”) .attr(“transform”, “translate(“ + margin.left + “,” + margin.top + “)”);
index.html#
var randomX = d3.random.normal(width / 2, 80), randomY = d3.random.normal(height / 2, 80), points = d3.range(2000).map(function() { return [randomX(), randomY()]; });
<!DOCTYPE html> <meta charset=”utf-8”> <style>
var radius = d3.scale.sqrt() .domain([0, 50]) .range([0, 20]);
svg.append(“clipPath”) .attr(“id”, “clip”) .append(“rect”) .attr(“class”, “mesh”) .attr(“width”, width) .attr(“height”, height);
.axis text { font: 10px sans-serif; }
var hexbin = d3.hexbin() .size([width, height]) .radius(20);
.axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; }
var x = d3.scale.identity() .domain([0, width]);
.hexagon { fill: steelblue; stroke: #fff; stroke-width: .5px; }
var xAxis = d3.svg.axis() .scale(x) .orient(“bottom”) .tickSize(6, -height);
</style> <body> <script src=”http://d3js.org/d3.v3.min.js”></script> <script src=”http://d3js.org/d3.hexbin.v0.min. js?5c6e4f0”></script> <script>
var y = d3.scale.linear() .domain([0, height]) .range([height, 0]);
var yAxis = d3.svg.axis() .scale(y) .orient(“left”) .tickSize(6, -width);
svg.append(“g”) .attr(“clip-path”, “url(#clip)”) .selectAll(“.hexagon”) .data(hexbin(points)) .enter().append(“path”) .attr(“class”, “hexagon”) .attr(“d”, function(d) { return hexbin.hexagon(radius(d.length)); }) .attr(“transform”, function(d) { return “translate(“ + d.x + “,” + d.y + “)”; }); svg.append(“g”) .attr(“class”, “y axis”) .call(yAxis); svg.append(“g”) .attr(“class”, “x axis”) .attr(“transform”, “translate(0,” + height + “)”) .call(xAxis); </script>
var svg = d3.select(“body”).append(“svg”) .attr(“width”, width + margin.left + margin.right) .attr(“height”, height + margin.top + margin.bottom) 55
Example 3: Mitchell’s best candidate web
index.html# <!DOCTYPE html> <meta charset=”utf-8”> <body> <script src=”http://d3js.org/d3.v3.js”></script> <script> var maxRadius = 32, // maximum radius of circle padding = 1, // padding between circles; also minimum radius margin = {top: -maxRadius, right: -maxRadius, bottom: -maxRadius, left: -maxRadius}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var k = 1, // initial number of candidates to consider per circle m = 10, // initial number of circles to add per frame n = 2500, // remaining number of circles to add newCircle = bestCircleGenerator(maxRadius, padding); var svg = d3.select(“body”).append(“svg”) .attr(“width”, width) .attr(“height”, height) .append(“g”) .attr(“transform”, “translate(“ + margin.left + “,” + margin.top + “)”);
d3.timer(function() { for (var i = 0; i < m && --n >= 0; ++i) { var circle = newCircle(k); svg.append(“circle”) .attr(“cx”, circle[0]) .attr(“cy”, circle[1]) .attr(“r”, 0) .style(“fill-opacity”, (Math.random() + .5) / 2) .transition() .attr(“r”, circle[2]); // As we add more circles, generate more candidates per circle. // Since this takes more effort, gradually reduce circles per frame. if (k < 500) k *= 1.01, m *= .998; } return !n; }); function bestCircleGenerator(maxRadius, padding) { var quadtree = d3.geom.quadtree().extent([[0, 0], [width, height]])([]), searchRadius = maxRadius * 2, maxRadius2 = maxRadius * maxRadius; return function(k) { var bestX, bestY, bestDistance = 0;
for this candidate quadtree.visit(function(quad, x1, y1, x2, y2) { if (p = quad.point) { var p, dx = x - p[0], dy = y - p[1], d2 = dx * dx + dy * dy, r2 = p[2] * p[2]; if (d2 < r2) return minDistance = 0, true; // within a circle var d = Math.sqrt(d2) - p[2]; if (d < minDistance) minDistance = d; } return !minDistance || x1 > rx2 || x2 < rx1 || y1 > ry2 || y2 < ry1; // or outside search radius }); if (minDistance > bestDistance) bestX = x, bestY = y, bestDistance = minDistance; }
}
var best = [bestX, bestY, bestDistance - padding]; quadtree.add(best); return best; };
</script>
for (var i = 0; i < k || bestDistance < padding; ++i) { var x = Math.random() * width, y = Math.random() * height, rx1 = x - searchRadius, rx2 = x + searchRadius, ry1 = y - searchRadius, ry2 = y + searchRadius, minDistance = maxRadius; // minimum distance 56
Example 4: Build your own graphics
var fill = d3.scale.category20();
web
var force = d3.layout.force() .size([width, height]) .nodes([{}]) // initialize with a single node .linkDistance(30) .charge(-60) .on(“tick”, tick);
index.html# <!DOCTYPE html> <meta charset=”utf-8”> <style> rect { fill: none; pointer-events: all; } .node { fill: #000; } .cursor { fill: none; stroke: brown; pointer-events: none; } .link { stroke: #999; } </style> <body> <script src=”http://d3js.org/d3.v3.min.js”></script> <script> var width = 960, height = 500;
var svg = d3.select(“body”).append(“svg”) .attr(“width”, width) .attr(“height”, height) .on(“mousemove”, mousemove) .on(“mousedown”, mousedown); svg.append(“rect”) .attr(“width”, width) .attr(“height”, height); var nodes = force.nodes(), links = force.links(), node = svg.selectAll(“.node”), link = svg.selectAll(“.link”); var cursor = svg.append(“circle”) .attr(“r”, 30) .attr(“transform”, “translate(-100,-100)”) .attr(“class”, “cursor”);
// add links to any nearby nodes nodes.forEach(function(target) { var x = target.x - node.x, y = target.y - node.y; if (Math.sqrt(x * x + y * y) < 30) { links.push({source: node, target: target}); } }); }
function tick() { link.attr(“x1”, function(d) { return d.source.x; }) .attr(“y1”, function(d) { return d.source.y; }) .attr(“x2”, function(d) { return d.target.x; }) .attr(“y2”, function(d) { return d.target.y; });
}
node.attr(“cx”, function(d) { return d.x; }) .attr(“cy”, function(d) { return d.y; });
function restart() { link = link.data(links); link.enter().insert(“line”, “.node”) .attr(“class”, “link”); node = node.data(nodes);
restart();
node.enter().insert(“circle”, “.cursor”) .attr(“class”, “node”) .attr(“r”, 5) .call(force.drag);
function mousemove() { cursor.attr(“transform”, “translate(“ + d3.mouse(this) + “)”); } function mousedown() { var point = d3.mouse(this), node = {x: point[0], y: point[1]}, n = nodes.push(node);
restart();
}
force.start();
</script> 57