| #!/bin/zsh | |
| # Script to generate thumbnails of a video and combine into one tile image. | |
| # | |
| # CAUTION: | |
| # FFprobe might fail to extract duration info from a MKV container. Use | |
| # ffmpeg -i video.mkv -c:v copy -c:a copy video.mp4 | |
| # to swap to an MP4 container. | |
| # | |
| # Dependencies: | |
| # 1. ffmpeg |
There's been a strange explosion in misinformation about browserify recently, particularly in comparisons to webpack.
Generally speaking, most of this confusion stems from how webpack is more willing to pull features into its core to ease discoverability while browserify is more likely to push features out to userland instead.
I think that longer-term, separability has more benefits from a maintenance and
| source | target | value | |
|---|---|---|---|
| Harry | Sally | 1.2 | |
| Harry | Mario | 1.3 | |
| Sarah | Alice | 0.2 | |
| Eveie | Alice | 0.5 | |
| Peter | Alice | 1.6 | |
| Mario | Alice | 0.4 | |
| James | Alice | 0.6 | |
| Harry | Carol | 0.7 | |
| Harry | Nicky | 0.8 |
| Harry | Sally | 1.2 | |
|---|---|---|---|
| Harry | Mario | 1.3 | |
| Sarah | Alice | 0.2 | |
| Eveie | Alice | 0.5 | |
| Peter | Alice | 1.6 | |
| Mario | Alice | 0.4 | |
| James | Alice | 0.6 | |
| Harry | Carol | 0.7 | |
| Harry | Nicky | 0.8 |
This example demonstrates a simple method of hand-tweaking a force-directed layout. Using d3.behavior.drag, the nodes in this network are made draggable; dragging updates the x and y properties of each node. The resulting graph could then be saved back to a JSON file using JSON.stringify.
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Force based label placement</title> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.6.0"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.6.0"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.6.0"></script> | |
| </head> | |
| <body> |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <style> | |
| path { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: 3px; | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" /> | |
| <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script> | |
| <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' /> |
Selectively applying path markers from a simple collection.
Inspired by Tom MacWright’s previous take on one-way line markers, this example adopts a technique from my path tween example: uniform sampling via getPointAtLength. A rendered line is resampled such that each control point is equally spaced along the length of the line. Thus, the desired number of markers are rendered.