In progress, rough draft of an identity map showing my current interests and aspirations, and how they are mentally linked. I wrote about it at blog.ameliagreenhall.com
Thank you Scott for making your book interactive just as I was working on this. Also referenced this bl.ock.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3: Force layout</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> | |
| <style type="text/css"> | |
| /* No style rules here yet */ | |
| text { | |
| font: 10px sans-serif; | |
| pointer-events: none; | |
| } | |
| circle{ | |
| opacity: 0.5; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| //Width and height | |
| var w = 800; | |
| var h = 600; | |
| //Original data | |
| var dataset = { | |
| nodes: [ | |
| { name: "ideal amelia" }, | |
| { name: "herbal wisdom" }, | |
| { name: "makes things by hand" }, | |
| { name: "connected" }, | |
| { name: "generous" }, | |
| { name: "affluent" }, | |
| { name: "divinely feminine" }, | |
| { name: "writer" }, | |
| { name: "artist" }, | |
| { name: "startup pace work" }, | |
| { name: "midwife" }, | |
| { name: "accordion player" }, | |
| { name: "strong woman" }, | |
| { name: "wild" }, | |
| { name: "open" }, | |
| { name: "gardener" }, | |
| { name: "maker of tinctures" }, | |
| { name: "maker of tea blends" }, | |
| { name: "maker of salves" }, | |
| { name: "maker of bitters" }, | |
| { name: "has a kitchen herb garden" }, | |
| { name: "fermenter" }, | |
| { name: "gurerilla gardens" }, | |
| { name: "seed bombs" }, | |
| { name: "wild crafter" }, | |
| { name: "sourdough" }, | |
| { name: "pizza nights" }, | |
| { name: "soaking beans" }, | |
| { name: "sprouting seeds" }, | |
| { name: "no microwave" }, | |
| { name: "helping anyone I can" }, | |
| { name: "dinner parties" }, | |
| { name: "helping with d3.js user group" }, | |
| { name: "hosting Quantified Self meetup" }, | |
| { name: "public speaking" }, | |
| { name: "tips well" }, | |
| { name: "hosts" }, | |
| { name: "gives money" }, | |
| { name: "gives time and art to causes" }, | |
| { name: "bicycle advocacy" }, | |
| { name: "does datavis for causes" }, | |
| { name: "spends on adventure, gear, good food, clothing, home" }, | |
| { name: "has bodywork done" }, | |
| { name: "flow" }, | |
| { name: "posture" }, | |
| { name: "long, lean, muscle" }, | |
| { name: "dress well" }, | |
| { name: "subtle makeup" }, | |
| { name: "adorn yourself (jewels)" }, | |
| { name: "energy work" }, | |
| { name: "meditation" }, | |
| { name: "tarot" }, | |
| { name: "reiki" }, | |
| { name: "acupuncture" }, | |
| { name: "small, curated selection" }, | |
| { name: "accessories" }, | |
| { name: "boots" }, | |
| { name: "skirts" }, | |
| { name: "skinny jeans" }, | |
| { name: "dresses" }, | |
| { name: "chambray" }, | |
| { name: "adventurer" }, | |
| { name: "climber" }, | |
| { name: "alpine climbng" }, | |
| { name: "trad leader" }, | |
| { name: "trip leader" }, | |
| { name: "bike tours" }, | |
| { name: "mountaineering" }, | |
| { name: "sex" }, | |
| { name: "Open Review Quarterly" }, | |
| { name: "published" }, | |
| { name: "Taking The Lane Press" }, | |
| { name: "ameliagreenhall.com/blog" }, | |
| { name: "drawing/illustration" }, | |
| { name: "spoke cards" }, | |
| { name: "cover of zines" }, | |
| { name: "screenprinter" }, | |
| { name: "annual valentines day cards" }, | |
| { name: "photographer" }, | |
| { name: "posters" }, | |
| { name: "cyanotypes" }, | |
| { name: "content marketing" }, | |
| { name: "design" }, | |
| { name: "data scientist" }, | |
| { name: "studies" }, | |
| { name: "product design" }, | |
| { name: "User Experience (UX)" }, | |
| { name: "User Interface (UI)" }, | |
| { name: "hacker" }, | |
| { name: "strong female community" }, | |
| { name: "present" }, | |
| { name: "connected to earth" }, | |
| { name: "yoga" }, | |
| { name: "pushups" }, | |
| { name: "busking" }, | |
| { name: "blackbird raum" }, | |
| { name: "balkan folk" }, | |
| { name: "knows songs by heart" }, | |
| { name: "reads music" }, | |
| { name: "harmonica" }, | |
| { name: "morning pages" }, | |
| { name: "sacred/divine print series" }, | |
| { name: "print exchanges" }, | |
| { name: "maker" }, | |
| { name: "textiles" }, | |
| { name: "dyes" }, | |
| { name: "feminist womens book club" }, | |
| { name: "folk" }, | |
| { name: "non-violent communication (NVC)" } | |
| ], | |
| edges: [ | |
| { source: 0, target: 1 }, | |
| { source: 0, target: 2 }, | |
| { source: 0, target: 3 }, | |
| { source: 0, target: 4 }, | |
| { source: 0, target: 5 }, | |
| { source: 0, target: 6 }, | |
| { source: 0, target: 7 }, | |
| { source: 0, target: 8 }, | |
| { source: 0, target: 9 }, | |
| { source: 0, target: 10 }, | |
| { source: 0, target: 11 }, | |
| { source: 0, target: 12 }, | |
| { source: 0, target: 13 }, | |
| { source: 0, target: 14 }, | |
| { source: 0, target: 15 }, | |
| { source: 0, target: 61 }, | |
| { source: 1, target: 16 }, | |
| { source: 1, target: 17 }, | |
| { source: 1, target: 18 }, | |
| { source: 1, target: 19 }, | |
| { source: 1, target: 20 }, | |
| { source: 1, target: 21 }, | |
| { source: 1, target: 24 }, | |
| { source: 21, target: 25 }, | |
| { source: 15, target: 22 }, | |
| { source: 15, target: 24 }, | |
| { source: 15, target: 28 }, | |
| { source: 22, target: 23 }, | |
| { source: 2, target: 25 }, | |
| { source: 2, target: 26 }, | |
| { source: 3, target: 26 }, | |
| { source: 2, target: 27 }, | |
| { source: 2, target: 28 }, | |
| { source: 2, target: 29 }, | |
| { source: 3, target: 30 }, | |
| { source: 3, target: 31 }, | |
| { source: 3, target: 32 }, | |
| { source: 3, target: 33 }, | |
| { source: 3, target: 34 }, | |
| { source: 3, target: 4 }, | |
| { source: 4, target: 5 }, | |
| { source: 4, target: 35 }, | |
| { source: 4, target: 36 }, | |
| { source: 4, target: 37 }, | |
| { source: 4, target: 38 }, | |
| { source: 4, target: 39 }, | |
| { source: 4, target: 40 }, | |
| { source: 5, target: 36 }, | |
| { source: 5, target: 38 }, | |
| { source: 5, target: 39 }, | |
| { source: 5, target: 40 }, | |
| { source: 5, target: 41 }, | |
| { source: 5, target: 42 }, | |
| { source: 5, target: 43 }, | |
| { source: 5, target: 6 }, | |
| { source: 6, target: 41 }, | |
| { source: 6, target: 44 }, | |
| { source: 6, target: 45 }, | |
| { source: 6, target: 46 }, | |
| { source: 6, target: 47 }, | |
| { source: 6, target: 48 }, | |
| { source: 6, target: 49 }, | |
| { source: 49, target: 50 }, | |
| { source: 49, target: 51 }, | |
| { source: 49, target: 52 }, | |
| { source: 49, target: 53 }, | |
| { source: 46, target: 54 }, | |
| { source: 54, target: 55 }, | |
| { source: 54, target: 55 }, | |
| { source: 54, target: 56 }, | |
| { source: 54, target: 57 }, | |
| { source: 54, target: 58 }, | |
| { source: 54, target: 59 }, | |
| { source: 54, target: 60 }, | |
| { source: 61, target: 62 }, | |
| { source: 61, target: 66 }, | |
| { source: 61, target: 68 }, | |
| { source: 62, target: 63 }, | |
| { source: 62, target: 64 }, | |
| { source: 62, target: 65 }, | |
| { source: 62, target: 67 }, | |
| { source: 7, target: 69 }, | |
| { source: 7, target: 100 }, | |
| { source: 7, target: 70 }, | |
| { source: 7, target: 72 }, | |
| { source: 7, target: 8 }, | |
| { source: 70, target: 71 }, | |
| { source: 71, target: 75 }, | |
| { source: 73, target: 72 }, | |
| { source: 73, target: 74 }, | |
| { source: 73, target: 75 }, | |
| { source: 73, target: 76 }, | |
| { source: 73, target: 81 }, | |
| { source: 73, target: 79 }, | |
| { source: 73, target: 8 }, | |
| { source: 8, target: 78 }, | |
| { source: 78, target: 80 }, | |
| { source: 78, target: 79 }, | |
| { source: 8, target: 103 }, | |
| { source: 103, target: 104 }, | |
| { source: 103, target: 105 }, | |
| { source: 81, target: 82 }, | |
| { source: 9, target: 81 }, | |
| { source: 9, target: 83 }, | |
| { source: 9, target: 88 }, | |
| { source: 82, target: 84 }, | |
| { source: 82, target: 85 }, | |
| { source: 82, target: 86 }, | |
| { source: 86, target: 87 }, | |
| { source: 83, target: 84 }, | |
| { source: 83, target: 87 }, | |
| { source: 83, target: 86 }, | |
| { source: 82, target: 83 }, | |
| { source: 82, target: 84 }, | |
| { source: 10, target: 89 }, | |
| { source: 10, target: 90 }, | |
| { source: 10, target: 91 }, | |
| { source: 89, target: 106 }, | |
| { source: 12, target: 89 }, | |
| { source: 12, target: 92 }, | |
| { source: 12, target: 93 }, | |
| { source: 11, target: 94 }, | |
| { source: 11, target: 95 }, | |
| { source: 11, target: 96 }, | |
| { source: 11, target: 97 }, | |
| { source: 11, target: 98 }, | |
| { source: 11, target: 99 }, | |
| { source: 11, target: 107 }, | |
| { source: 11, target: 14 }, | |
| { source: 14, target: 68 }, | |
| { source: 14, target: 108 }, | |
| { source: 76, target: 77 }, | |
| { source: 76, target: 101 }, | |
| { source: 76, target: 102 }, | |
| { source: 76, target: 104 } | |
| ] | |
| }; | |
| //Initialize a default force layout, using the nodes and edges in dataset | |
| var force = d3.layout.force() | |
| .nodes(dataset.nodes) | |
| .links(dataset.edges) | |
| .size([w, h]) | |
| .linkDistance([90]) | |
| .charge([-250]) | |
| .start(); | |
| var colors = d3.scale.category10(); | |
| //Create SVG element | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| //Create edges as lines | |
| var edges = svg.selectAll("line") | |
| .data(dataset.edges) | |
| .enter() | |
| .append("line") | |
| .style("stroke", "#ccc") | |
| .style("stroke-width", 1); | |
| var node = svg.selectAll(".node") | |
| .data(dataset.nodes) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| .on("mouseover", mouseover) | |
| .on("mouseout", mouseout) | |
| .call(force.drag); | |
| //Create nodes as circles | |
| //var nodes = svg.selectAll("circle") | |
| //.data(dataset.nodes) | |
| // .enter() | |
| node.append("circle") | |
| .attr("r", 10) | |
| .style("fill", function(d, i) { | |
| return colors(i); | |
| }) | |
| .attr("class","circle"); | |
| //.call(force.drag); | |
| //Add text | |
| node.append("text") | |
| .attr("x", 12) | |
| .attr("dy", ".35em") | |
| .text(function(d) { console.log(d.name); return d.name; }); | |
| //Every time the simulation "ticks", this will be called | |
| force.on("tick", function() { | |
| edges.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; }); | |
| node | |
| .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); | |
| }); | |
| function mouseover() { | |
| d3.select(this).select("circle").transition() | |
| .duration(750) | |
| .attr("r", 16); | |
| } | |
| function mouseout() { | |
| d3.select(this).select("circle").transition() | |
| .duration(750) | |
| .attr("r", 8); | |
| } | |
| </script> | |
| </body> | |
| </html> |
