Wen Yi Chu seyna

## container
<ul id="Grid">
  <li class="mix dogs"></li>
  <li class="mix cats"></li>
  <li ...
</ul>

#也可以加入其他 HTML5 data attributes 幫助排序/filter
<ul id="Grid">
  <li class="mix dogs" data-name="Abby" data-age="2"></li>
  <li class="mix cats" data-name="Bucky" data-age="9"></li>

## Filter
<ul>
  <li class="filter" data-filter="dogs"></li>
  <li class="filter" data-filter="cats"></li>
  <li class="filter" data-filter="dogs cats"></li>
</ul>

## multifilter
$(function(){
  $('#Grid').mixitup({
    showOnLoad: 'category_1 category_2 category_3',
    multiFilter: true
  });
});

## Tooltip
<!DOCTYPE html>
<html>
    <head>
        <title>Hello D3</title>
        <script type="text/javascript" src="d3.v3.js"></script>
        <script type="text/javascript" src="d3.tip.js"></script>
        <style>
            .d3-tip {
              line-height: 1;
              font-weight: bold;

## data.csv

          
            country
            continent
            population
            GDPcap
            GERD
            growth

            
              Australia
              Oceania
              22319.07
              40718.78167
              2.21367
              2.48590317

            
              Austria
              Europe
              8427.318
              42118.46375
              2.74826
              3.10741128

            
              Belgium
              Europe
              10590.44
              38809.66436
              1.96158
              1.89308521

            
              Canada
              America
              33909.7
              39069.91407
              1.80213
              3.21494841

            
              Chile
              America
              17248.45
              15106.73205
              0.39451
              5.19813626

            
              Czech Republic
              Europe
              10286.3
              25956.76492
              1.52652
              1.65489834

            
              Denmark
              Europe
              5495.246
              40169.83173
              3.01937
              1.04974368

            
              Estonia
              Europe
              1335.347
              22403.02459
              1.44122
              7.63563272

            
              Finland
              Europe
              5366.482
              37577.71225
              3.84137
              2.85477157

## load_csv.html
<html>
  <head>
    <title>Simple Line Graph using SVG and d3.js</title>
    <script src="http://mbostock.github.com/d3/d3.v2.js"></script>
  </head>

  <body>
    <script>
        var dataset = [];
        d3.csv("tmp.csv", function(data) {

## load_csv_render_table.html
<html>
  <head>
    <title>Simple Line Graph using SVG and d3.js</title>
    <script src="http://mbostock.github.com/d3/d3.v2.js"></script>
  </head>

  <body>
    <div id="viz"></div>
    <script>
      d3.text("tmp.csv", function(datasetText) {

## .vimrc
set fileencodings=ucs-bom,utf-8,big-5,cp936,gb18030,euc-jp,euc-kr,latin1
set nocompatible
set smartindent
set backspace=2
set nowrap

set sw=2
set ts=2
set et

## .vimrc
set fileencodings=ucs-bom,utf-8,big-5,cp936,gb18030,euc-jp,euc-kr,latin1
set nocompatible
set smartindent
set autoindent
set backspace=2
set nowrap

set sw=2
set ts=2
set et

## Myrrix
install.packages('Myrrix')
install.packages("devtools")
install.packages("rJava")
install.packages("ffbase")
library(devtools)
install_github("Myrrix-R-interface", "jwijffels", subdir="/Myrrixjars/pkg")
install_github("Myrrix-R-interface", "jwijffels", subdir="/Myrrix/pkg")

library(Myrrix)
## Download example dataset
	<ul id="Grid">
	<li class="mix dogs"></li>
	<li class="mix cats"></li>
	<li ...
	</ul>

	#也可以加入其他 HTML5 data attributes 幫助排序/filter
	<ul id="Grid">
	<li class="mix dogs" data-name="Abby" data-age="2"></li>
	<li class="mix cats" data-name="Bucky" data-age="9"></li>
	<ul>
	<li class="filter" data-filter="dogs"></li>
	<li class="filter" data-filter="cats"></li>
	<li class="filter" data-filter="dogs cats"></li>
	</ul>
	$(function(){
	$('#Grid').mixitup({
	showOnLoad: 'category_1 category_2 category_3',
	multiFilter: true
	});
	});
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hello D3</title>
	<script type="text/javascript" src="d3.v3.js"></script>
	<script type="text/javascript" src="d3.tip.js"></script>
	<style>
	.d3-tip {
	line-height: 1;
	font-weight: bold;
country	continent	population	GDPcap	GERD	growth
Australia	Oceania	22319.07	40718.78167	2.21367	2.48590317
Austria	Europe	8427.318	42118.46375	2.74826	3.10741128
Belgium	Europe	10590.44	38809.66436	1.96158	1.89308521
Canada	America	33909.7	39069.91407	1.80213	3.21494841
Chile	America	17248.45	15106.73205	0.39451	5.19813626
Czech Republic	Europe	10286.3	25956.76492	1.52652	1.65489834
Denmark	Europe	5495.246	40169.83173	3.01937	1.04974368
Estonia	Europe	1335.347	22403.02459	1.44122	7.63563272
Finland	Europe	5366.482	37577.71225	3.84137	2.85477157
	<html>
	<head>
	<title>Simple Line Graph using SVG and d3.js</title>
	<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
	</head>

	<body>
	<script>
	var dataset = [];
	d3.csv("tmp.csv", function(data) {
	set fileencodings=ucs-bom,utf-8,big-5,cp936,gb18030,euc-jp,euc-kr,latin1
	set nocompatible
	set smartindent
	set backspace=2
	set nowrap

	set sw=2
	set ts=2
	set et
	install.packages('Myrrix')
	install.packages("devtools")
	install.packages("rJava")
	install.packages("ffbase")
	library(devtools)
	install_github("Myrrix-R-interface", "jwijffels", subdir="/Myrrixjars/pkg")
	install_github("Myrrix-R-interface", "jwijffels", subdir="/Myrrix/pkg")

	library(Myrrix)
	## Download example dataset