Skip to content

Instantly share code, notes, and snippets.

View hlucasfranca's full-sized avatar

Henrique Lucas França hlucasfranca

51 followers · 56 following
View GitHub Profile
@hlucasfranca
hlucasfranca / README.md
Last active August 29, 2015 14:23 — forked from mbostock/.block
Spline editor

Click to add new points. Hit the DELETE key to remove the selected point. Use the dropdown menu to change the interpolation mode.

@hlucasfranca
hlucasfranca / README.md
Last active August 29, 2015 14:24 — forked from rkirsling/LICENSE

Click in the open space to add a node, drag from one node to another to add an edge.
Ctrl-drag a node to move the graph layout.
Click a node or an edge to select it.

When a node is selected: R toggles reflexivity, Delete removes the node.
When an edge is selected: L(eft), R(ight), B(oth) change direction, Delete removes the edge.

To see this example as part of a larger project, check out Modal Logic Playground!

@hlucasfranca
hlucasfranca / README.md
Last active August 29, 2015 14:25 — forked from mbostock/.block
@hlucasfranca
hlucasfranca / README.md
Last active August 29, 2015 14:25 — forked from vprtwn/README.md
Force Editor + Pan/Zoom

Drag from an existing node to add a new node or link. Click to select/deselect nodes/links. Hit the DELETE key to remove the selected node or link. Drag to pan. Scroll to zoom.

Built with D3.js.

@hlucasfranca
hlucasfranca / README.md
Last active August 29, 2015 14:25 — forked from sathomas/README.md
Understanding D3.js Force Layout - 8: gravity

This is part of a series of examples that describe the basic operation of the D3.js force layout. Eventually they may end up in a blog post that wraps everything together. If you missed the beginning of the series, here's a link to first example.

The code in the previous examples has mentioned a property that D3 calls gravity. The force layout uses this property to keep nodes from wandering off the edges of the visualization, something they might otherwise do to avoid overlap.

@hlucasfranca
hlucasfranca / README.md
Last active August 29, 2015 14:25 — forked from mbostock/.block
Drag + Zoom

An example of how to combine d3.behavior.drag and d3.behavior.zoom, using stopPropagation to allow the drag behavior to take precedence over panning. Use the mouse to pan by clicking on the background, or drag by clicking on individual dots; you may also use the mousewheel to zoom.

Note: combining these two behaviors means that gesture interpretation is ambiguous and highly sensitive to position. A click on a circle is interpreted as dragging that circle, whereas a click one pixel away could be interpreted as panning the background. A more robust method of combining these behaviors is to employ modality. For example, if the user holds down the SPACE key, clicking and dragging is interpreted as panning, rather than dragging, regardless of the click location. This approach is commonly employed in commercial software such as Adobe Photoshop.

This example was created in response to a [Stack Overflow quest

@hlucasfranca
hlucasfranca / responsive_d3_example.html
Last active August 29, 2015 14:26 — forked from rduplain/responsive_d3_example.html
Responsive d3.js D3 Javascript Histogram Example
<!DOCTYPE html>
<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
body {
font: 10px sans-serif;
}
rect {
@hlucasfranca
hlucasfranca / README.md
Last active August 29, 2015 14:26 — forked from jasondavies/README.md
stopPropagation

This demonstrates how stopPropagation can be used to stop an event from propagating up the DOM tree, in response to a Stack Overflow question.

The mousedown event for the circle is prevented from propagating to the parent SVG element.

Note how a click gesture generates mousedown, mouseup and click events, in that order.

Note also that preventing the mousedown event from propagating is not sufficient to prevent the click event from propagating too. This must be done in a click event listener.

@hlucasfranca
hlucasfranca / graph.json
Last active August 29, 2015 14:27 — forked from mbostock/.block
Brushable Network
{"nodes":[{"x":444,"y":275},{"x":378,"y":324},{"x":478,"y":278},{"x":471,"y":256},{"x":382,"y":269},{"x":371,"y":247},{"x":359,"y":276},{"x":364,"y":302},{"x":400,"y":330},{"x":388,"y":298},{"x":524,"y":296},{"x":570,"y":243},{"x":552,"y":159},{"x":502,"y":287},{"x":511,"y":313},{"x":513,"y":265},{"x":602,"y":132},{"x":610,"y":90},{"x":592,"y":91},{"x":575,"y":89},{"x":607,"y":73},{"x":591,"y":68},{"x":574,"y":73},{"x":589,"y":149},{"x":620,"y":205},{"x":621,"y":230},{"x":589,"y":234},{"x":602,"y":223},{"x":548,"y":188},{"x":532,"y":196},{"x":548,"y":114},{"x":575,"y":174},{"x":497,"y":250},{"x":576,"y":196},{"x":504,"y":201},{"x":494,"y":186},{"x":482,"y":199},{"x":505,"y":219},{"x":486,"y":216},{"x":590,"y":306},{"x":677,"y":169},{"x":657,"y":258},{"x":667,"y":205},{"x":552,"y":227},{"x":518,"y":173},{"x":473,"y":125},{"x":796,"y":260},{"x":731,"y":272},{"x":642,"y":288},{"x":576,"y":269},{"x":605,"y":187},{"x":559,"y":289},{"x":544,"y":356},{"x":505,"y":365},{"x":579,"y":289},{"x":619,"y":282},{"x":574,"y"
@hlucasfranca
hlucasfranca / README.md
Last active August 29, 2015 14:27 — forked from mbostock/.block
Stroke Dash Interpolation

By interpolating the stroke-dasharray style property, you can animate a stroke from start to end. This might be used to convey directionality of connected links in a network graphic, such as our graphic of Academy Award nominees. By setting the transition duration proportional to the length of the line and using linear easing, you can further animate the stroke at constant speed.

A related technique is point-along-path interpolation.