al cmdoptesc

## README.md

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                cmdoptesc
                / README.md
            
            
              Last active
              August 29, 2015 14:25
                — forked from mbostock/.block
            
              
                D3 Arc Progress Gauge / Meter (for d3-js group)
              
          
    D3: Async Arc Progress Gauge / Meter

View on bl.ocks.org/cmdoptesc/e9b3bfc6f43b4bd237e2
Forked from Bostock's original Progress Events example to answer Rex X's post on the d3-js group:
The progress meter is based on the number of files that have downloaded. In our case, numberOfFiles is set to 20.
We then generate 20 random durations between 0 - 3000ms to simulate download times, and call setTimeout using the durations. Each timer then calls update, which increments the number of files downloaded, increasing the progress arc with a tweening function.

  
## Readme.md

      
              6 files
            
          
              1 fork
            
          
              0 comments
            
          
              2 stars
            
          
                cmdoptesc
                / Readme.md
            
            
              Last active
              November 26, 2021 17:38
            
              
                D3: Open Hours (.csv parsing)
              
          
    D3: Open Hours

view on bl.ocks.org

github repo
D3 visualisation utilising D3's text/CSV to read/parse a CSV file with restaurant information and display which restaurants are currently open.
Users can drag the time (red line) to display restaurants open at other hours.

  
## quicksort.js
// quicksort using new arrays is easy, but surprisingly, there weren't too many examples
// in javascript of in-place quick sort...

// the outer function is simply just a wrapper that copies the original array;
// you can just use lines 12-37 if preserving the original array isn't important

function quickSortInPlace(unsortedArray) {

  var unsorted = unsortedArray.slice();    // copy the original array

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

   .graticule {
      fill: none;
      stroke: #777;
      stroke-opacity: .5;
      stroke-width: .5px;
   }

## nodejs-express-cors.js
// Express CORS middleware.. so much easier than trying to get Restify to work

var allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'X-Requested-With, Accept, Origin, Referer, User-Agent, Content-Type, Authorization');

  // intercept OPTIONS method
  if (req.method === 'OPTIONS') {
    res.send(200);

## Readme.md

      
              3 files
            
          
              1 fork
            
          
              0 comments
            
          
              1 star
            
          
                cmdoptesc
                / Readme.md
            
            
              Last active
              February 12, 2018 16:51
            
              
                JavaScript D3: Arc tween transitions using attrTween and attr methods
              
          
    D3: Arcs Tweening Animation

view on bl.ocks.org
Click on the grey circles. The green arcs will transition using attr, whereas the red ones will use the attrTween method.
If you have not seen/read Bostock's arc tween example, it's probably the best place to start. Secondly, I've posted up a basic example of drawing static, concentric arcs (gist), which might be helpful before adding on tweens/animations.
Below is some annotated source code from my experience playing with arcs. The biggest issue I came across was understanding the role of the arcTween helper function in relation to attrTween. Unlike attr, which takes a value as its second argument, attrTween requires a helper function, arcTween, which will be called during the intermediary animation ticks. This method was used for my [muniNow project](http

  
## Readme.md

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                cmdoptesc
                / Readme.md
            
            
              Last active
              March 4, 2018 01:53
            
              
                JavaScript D3: Drawing Concentric Arcs
              
          
    D3: Concentric Arcs

view on bl.ocks.org
The basics of drawing data-driven arcs by using values to determine the arc length. Very stripped down to give beginners an idea of how to draw and color shapes using the accessor functions in D3. For transitions and tweens, check out Bostock's well-annotated example, or my second arc example.
Idea was used for my SF Muni webapp (gist).
al lin, aug. 2013

  
## Readme.md

      
              6 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                cmdoptesc
                / Readme.md
            
            
              Last active
              March 12, 2016 09:52
            
              
                muniNow Quick Demo
              
          
    muniNow Demo

muniNow aims to be a nicer NextMuni by giving users the ability to see when the soonest Muni bus is arriving at a glance.
Live demo on Bl.ocks.org
Powered by D3, built at Catalyst/Hack Reactor as a personal project. And many thanks to Mike and Adnan.
al lin, aug. 2013

  
## to-read__d3.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                cmdoptesc
                / to-read__d3.md
            
            
              Last active
              December 20, 2015 21:09
            
              
                TO READ: d3
              
          
    Articles

http://www.jeromecukier.net/blog/2013/03/05/d3-tutorial-at-strata-redux/
transition parameter inheritance
d3/d3#400 (comment)
DRYing up D3
http://urbanairship.com/blog/2013/07/11/drying-up-d3

  
## color-palettes
http://design-seeds.com/
http://www.colourlovers.com/palettes/most-loved/past-month/
	// quicksort using new arrays is easy, but surprisingly, there weren't too many examples
	// in javascript of in-place quick sort...

	// the outer function is simply just a wrapper that copies the original array;
	// you can just use lines 12-37 if preserving the original array isn't important

	function quickSortInPlace(unsortedArray) {

	var unsorted = unsortedArray.slice(); // copy the original array
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.graticule {
	fill: none;
	stroke: #777;
	stroke-opacity: .5;
	stroke-width: .5px;
	}
	// Express CORS middleware.. so much easier than trying to get Restify to work

	var allowCrossDomain = function(req, res, next) {
	res.header('Access-Control-Allow-Origin', '*');
	res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
	res.header('Access-Control-Allow-Headers', 'X-Requested-With, Accept, Origin, Referer, User-Agent, Content-Type, Authorization');

	// intercept OPTIONS method
	if (req.method === 'OPTIONS') {
	res.send(200);
	http://design-seeds.com/
	http://www.colourlovers.com/palettes/most-loved/past-month/