Ziggy Jonsson ZJONSSON

## README.md

      
              5 files
            
          
              10 forks
            
          
              8 comments
            
          
              17 stars
            
          
                ZJONSSON
                / README.md
            
            
              Created
              October 19, 2012 13:59
                — forked from mbostock/.block
            
              
                d3.legend example
              
          
    d3.legend

d3.legend is a quick hack to add a legend to a d3 chart.  Simply add a g and .call(d3.legend).  Any elements that have a title set in the "data-legend" attribute will be included when d3.legend is called.  Each title will appear only once (even when multiple items define the same data-legend) as the process uses a set based on a existing names, not an array of all items.
Color

By default the color in the legend will try to match the fill attribute or the stroke attribute of the relevant items.  Color can be explicitly defined by attribute "data-legend-color"
Order

The order of items in the legend will be sorted using the top of the bounding box for each included item.  The order can be explicitly defined by attribute "data-legend-pos"

  
## README.md

      
              4 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                ZJONSSON
                / README.md
            
            
              Created
              October 15, 2012 20:09
                — forked from syntagmatic/README.md
            
              
                Avg Price Histories (force_labels)
              
          
    This line chart is constructed from a CSV in the "Multi-Series Format" from Bureau of Labor Statistics Consumer Price Index data. The chart employs conventional margins and a number of D3 features:

d3.csv - load and parse data
d3.time.format - parse dates
d3.time.scale - x-position encoding
d3.scale.linear - y-position encoding
d3.hcl - a perceptual color space
d3.extent, d3.min and d3.max - compute domains
d3.svg.axis - display axes
[d3.svg.line](https://github.com/mbostock/d3/wiki/SVG


## d3.f.js
// Function helpers for various array functions

d3.f = {}

d3.f.get = function (key) {
    return function(d) {
        return typeof key === "function" ? key(d) : d[key]
    }
};

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

.arc {
  fill-opacity: .2;
}

.axis .fill {
  stroke: #aaa;

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

.arc {
  fill-opacity: .2;
}

.axis .fill {
  stroke: #aaa;

## README.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                ZJONSSON
                / README.md
            
            
              Created
              August 27, 2012 18:14
            
              
                zQuiz rendered with jQuizMe
              
          
    ###zQuiz
Code: https://github.com/ZJONSSON/zQuiz 

(original demo: http://zjonsson.github.com/zQuiz/)


###jQuizMe
code:

  
## cards.svg

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                ZJONSSON
                / cards.svg
            
            
              Created
              August 10, 2012 14:54
            
              
                Blackjack?
              
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!doctype html>

<link rel="stylesheet" type="text/css" href="style.css" />

<h1>Nutrient Scatterplot (WebGL-2D)</h1>
<canvas id="chart"></canvas>
<div id="controls">
  <span id="hover-food"></span><br/>
  X axis <select id="xaxis"></select><br/>
  Y axis <select id="yaxis"></select><br/>

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Testing d3.js in Leaflet.js</title>

	<link rel="stylesheet" href="leaflet.css"></link>
	<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
	<script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
	<style type="text/css">
	svg , g

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
<title>barStack</title>
<style>
.axis text {
  font: 10px sans-serif;
}
.axis path, .axis line {
	// Function helpers for various array functions

	d3.f = {}

	d3.f.get = function (key) {
	return function(d) {
	return typeof key === "function" ? key(d) : d[key]
	}
	};
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.arc {
	fill-opacity: .2;
	}

	.axis .fill {
	stroke: #aaa;
	<!doctype html>

	<link rel="stylesheet" type="text/css" href="style.css" />

	<h1>Nutrient Scatterplot (WebGL-2D)</h1>
	<canvas id="chart"></canvas>
	<div id="controls">
	<span id="hover-food"></span><br/>
	X axis <select id="xaxis"></select><br/>
	Y axis <select id="yaxis"></select><br/>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Testing d3.js in Leaflet.js</title>

	<link rel="stylesheet" href="leaflet.css"></link>
	<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
	<script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
	<style type="text/css">
	svg , g