資料視覺化 (Citation ArchiveBay.com)

HTML Source

<!DOCTYPE html><html lang="zh-TW" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#" class=" js flexbox webgl no-touch geolocation hashchange history websockets rgba hsla multiplebgs backgroundsize borderimage textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage applicationcache svg svgclippaths mediaqueries no-regions supports" style="" xmlns:og="http://opengraphprotocol.org/schema/"><head>
		<meta charset="utf-8">

<title>資料視覺化</title>

<meta name="description" content="資料之美、視覺化之美">
	<meta property="og:type" content="blog">
	<meta property="og:title" content="資料視覺化">
	<meta property="og:description" content="資料之美、視覺化之美">
	<meta property="og:url" content="https://blog.infographics.tw/">
	<meta property="og:site_name" content="資料視覺化">
	<meta name="twitter:card" content="summary">

var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-59333798-1']);
	_gaq.push(['_gat._forceSSL']);
	_gaq.push(['_trackPageview']);

(function () {
		var ga = document.createElement('script');
		ga.type = 'text/javascript';
		ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(ga, s);
	})();

</script>

<script type="text/javascript" src="https://blog.infographics.tw/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript" src="https://blog.infographics.tw/wp-includes/js/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="https://blog.infographics.tw/wp-content/plugins/easy-facebook-likebox/public/assets/popup/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="https://blog.infographics.tw/wp-content/plugins/easy-facebook-likebox/public/assets/js/jquery.cookie.js"></script>
<script type="text/javascript" src="https://blog.infographics.tw/wp-content/plugins/easy-facebook-likebox/public/assets/js/public.js"></script>
<script type="text/javascript" src="https://blog.infographics.tw/wp-content/themes/simply-read/library/js/libs/modernizr.custom.min.js"></script>
<link rel="https://api.w.org/" href="https://blog.infographics.tw/wp-json/">
<script>
jQuery(document).ready(function(){
jQuery("html").attr("xmlns:og","http://opengraphprotocol.org/schema/");
});
</script>
			
	</head>

<header class="header" role="banner" style="background:url()no-repeat;background-size:cover;">
				<div class="top-area">
					<div id="inner-header" class="wrap cf">
                <div class="social-icons">
		                     <a href="https://www.facebook.com/data.visualize/" class="social-tw" title="https://www.facebook.com/data.visualize/" target="_blank">
          <i class="fa fa-facebook"></i> 
          <span>Facebook</span>
        </a>
               <a href="https://plus.google.com/108759491535575577106/about" class="social-tw" title="https://plus.google.com/108759491535575577106/about" target="_blank">
          <i class="fa fa-google-plus"></i> 
          <span>Google+</span>
        </a>
               <a href="https://pinterest.com/infographicstw" class="social-tw" title="https://pinterest.com/infographicstw" target="_blank">
          <i class="fa fa-pinterest"></i> 
          <span>Pinterest</span>
        </a>
              <a href="mailto:contact@infographics.tw" class="social-tw" title="contact@infographics.tw" target="_blank">
          <i class="fa fa-envelope"></i> 
          <span>Email</span>
        </a>
                  </div> 
                <div class="search-bar">
                    <form role="search" method="get" class="search-form" action="https://blog.infographics.tw/">
					    <label>
					        <input type="search" class="search-field" placeholder="Search" value="" name="s" title="Search for:">
					    </label>
    					<input type="submit" class="search-submit" value="Search">
					</form>
                </div> 
                <div class="clear"></div>
            </div> 
            </div> 
				<div id="inner-header" class="wrap cf">

<p id="logo" class="h1"><a href="https://blog.infographics.tw" rel="nofollow">資料視覺化</a></p>
										<div id="responsive-nav">
            				<img src="https://blog.infographics.tw/wp-content/themes/simply-read/images/nav.png" alt="Nav">
       					 </div>
       					 <div class="clear no-display"></div>
       					 <nav role="navigation" id="main-navigation" class="nav-show">
       					 									<ul class="nav top-nav cf">
  								<li class="page_item page-item-2"><a href="http://blog.infographics.tw/about-us/">關於我們</a></li>
								</ul>
													</nav>

</div>

</header>
		<div class="front-wrapper">

<div id="slide-wrap">
							
							
								<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-slides="> div.slides" data-cycle-timeout="5000" data-cycle-prev="#sliderprev" data-cycle-next="#slidernext" style="display: block; overflow: hidden;"><div class="slides cycle-slide cycle-sentinel" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; visibility: hidden; display: block;">

<div class="slide-copy-wrap" style="visibility: hidden;">
											<div class="slide-copy" style="visibility: hidden;">
												<h2 class="slide-title" style="visibility: hidden;"><a href="https://blog.infographics.tw/2018/02/loading-io-animated-icons/" title="Permalink to 讓視覺化作品躍出畫面 – 使用 loading.io 動畫圖示庫" style="visibility: hidden;">讓視覺化作品躍出畫面 – 使用 loading.io 動畫圖示庫</a></h2>
												<p style="visibility: hidden;">圖表做來做去都一樣、視覺化再怎麼變化都很無聊嗎？試試看 loading.io 動畫圖示庫，讓你的視覺化活起來！…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2018/02/loading-io-animated-icons/" title="Read 讓視覺化作品躍出畫面 – 使用 loading.io 動畫圖示庫" style="visibility: hidden;">Read more »</a></p>
											</div>
										</div>

</div>

<div class="slide-copy-wrap">
											<div class="slide-copy">
												<h2 class="slide-title"><a href="https://blog.infographics.tw/2018/02/loading-io-animated-icons/" title="Permalink to 讓視覺化作品躍出畫面 – 使用 loading.io 動畫圖示庫" rel="bookmark">讓視覺化作品躍出畫面 – 使用 loading.io 動畫圖示庫</a></h2>
												<p>圖表做來做去都一樣、視覺化再怎麼變化都很無聊嗎？試試看 loading.io 動畫圖示庫，讓你的視覺化活起來！…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2018/02/loading-io-animated-icons/" title="Read 讓視覺化作品躍出畫面 – 使用 loading.io 動畫圖示庫">Read more »</a></p>
											</div>
										</div>

</div><div class="slides cycle-slide" style="position: absolute; top: 0px; left: 116.753px; z-index: 99; display: block; opacity: 1;">

<div class="slide-copy-wrap">
											<div class="slide-copy">
												<h2 class="slide-title"><a href="https://blog.infographics.tw/2016/11/vectr/" title="Permalink to Vectr – 永久免費的線上向量圖形編輯服務" rel="bookmark">Vectr – 永久免費的線上向量圖形編輯服務</a></h2>
												<p>向量式圖形在網路時代的地位越來越重要，然而除了卡卡的 Inkscape 、貴鬆鬆的 Adobe Illustr…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/11/vectr/" title="Read Vectr – 永久免費的線上向量圖形編輯服務">Read more »</a></p>
											</div>
										</div>

</div><div class="slides cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 97; display: none;">

<div class="slide-copy-wrap">
											<div class="slide-copy">
												<h2 class="slide-title"><a href="https://blog.infographics.tw/2016/11/google-spreadsheet-data-scraping/" title="Permalink to 無痛爬梳自己來，用 Google Spreadsheet 爬取網頁資料" rel="bookmark">無痛爬梳自己來，用 Google Spreadsheet 爬取網頁資料</a></h2>
												<p>你常用到網路上各種來源的資料嗎？搜集整理總是一番功夫，是不是覺得若有一個小精靈能幫我們從搜集、整理到計算都自動…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/11/google-spreadsheet-data-scraping/" title="Read 無痛爬梳自己來，用 Google Spreadsheet 爬取網頁資料">Read more »</a></p>
											</div>
										</div>

</div><div class="slides cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 96; display: none;">

<div class="slide-copy-wrap">
											<div class="slide-copy">
												<h2 class="slide-title"><a href="https://blog.infographics.tw/2016/11/animate-css/" title="Permalink to 微動畫簡單做！使用 animate.css 五秒提升作品質感" rel="bookmark">微動畫簡單做！使用 animate.css 五秒提升作品質感</a></h2>
												<p>用戶互動的過程中，一點動態效果能有效地提升整體的使用體驗，但程式製作動畫過程繁瑣，撰寫 CSS 也相當費時。這…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/11/animate-css/" title="Read 微動畫簡單做！使用 animate.css 五秒提升作品質感">Read more »</a></p>
											</div>
										</div>

</div><div class="slides cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 95; display: none;">

<div class="slide-copy-wrap">
											<div class="slide-copy">
												<h2 class="slide-title"><a href="https://blog.infographics.tw/2016/11/reveal-js-and-slides-com/" title="Permalink to Reveal.js + slides.com 製作令人驚豔的互動式簡報" rel="bookmark">Reveal.js + slides.com 製作令人驚豔的互動式簡報</a></h2>
												<p>做了超讚視覺化作品想要在簡報中與大家分享，卻總是受限於簡報軟體而無法自由發揮嗎？瀏覽器原生簡報工具 Revea…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/11/reveal-js-and-slides-com/" title="Read Reveal.js + slides.com 製作令人驚豔的互動式簡報">Read more »</a></p>
											</div>
										</div>

</div><div class="slides cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 94; display: none;">

<div class="slide-copy-wrap">
											<div class="slide-copy">
												<h2 class="slide-title"><a href="https://blog.infographics.tw/2016/11/plotdb-the-data-visualization-service/" title="Permalink to 為所有人打造的資料視覺化服務 — PlotDB" rel="bookmark">為所有人打造的資料視覺化服務 — PlotDB</a></h2>
												<p>看到想嘗試的視覺化手法，卻不知道該怎麼做嗎？讓 PlotDB 幫你吧！線上視覺化服務 PlotDB 提供上百種…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/11/plotdb-the-data-visualization-service/" title="Read 為所有人打造的資料視覺化服務 — PlotDB">Read more »</a></p>
											</div>
										</div>

</div><div class="slides cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 93; display: none;">

<div class="slide-copy-wrap">
											<div class="slide-copy">
												<h2 class="slide-title"><a href="https://blog.infographics.tw/2016/11/d3js-transition/" title="Permalink to 讓我的視覺化動起來！D3.js 動畫函式入門" rel="bookmark">讓我的視覺化動起來！D3.js 動畫函式入門</a></h2>
												<p>看膩了靜態圖表，又覺得互動套件效果有限嗎？D3.js 除了提供強大的視覺化輔助函式，就連製作動畫也難不倒他！那…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/11/d3js-transition/" title="Read 讓我的視覺化動起來！D3.js 動畫函式入門">Read more »</a></p>
											</div>
										</div>

</div><div class="slides cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 92; display: none;">

<div class="slide-copy-wrap">
											<div class="slide-copy">
												<h2 class="slide-title"><a href="https://blog.infographics.tw/2016/11/make-choropleth-with-datamaps/" title="Permalink to 熱度地圖簡單做！使用 Datamaps" rel="bookmark">熱度地圖簡單做！使用 Datamaps</a></h2>
												<p>簡單的地圖視覺化，你還要靠 QGIS 繁複的製作步驟嗎？開源專案 Datamaps 讓我們在線上快速產製十來組…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/11/make-choropleth-with-datamaps/" title="Read 熱度地圖簡單做！使用 Datamaps">Read more »</a></p>
											</div>
										</div>

</div><div class="slides cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 91; display: none;">

<div class="slide-copy-wrap">
											<div class="slide-copy">
												<h2 class="slide-title"><a href="https://blog.infographics.tw/2016/08/coding-intro/" title="Permalink to 視覺化編程入門 — 我該選什麼程式語言？" rel="bookmark">視覺化編程入門 — 我該選什麼程式語言？</a></h2>
												<p>你想做視覺化，但不會寫程式嗎？程式設計往往是資料視覺化的一大門檻，即便現今已有相當多工具可以幫我們達成任務，但…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/08/coding-intro/" title="Read 視覺化編程入門 — 我該選什麼程式語言？">Read more »</a></p>
											</div>
										</div>

</div><div class="slides cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 90; display: none;">

<div class="slide-copy-wrap">
											<div class="slide-copy">
												<h2 class="slide-title"><a href="https://blog.infographics.tw/2016/08/tips-on-basic-charts/" title="Permalink to 這樣做就對了！圖表的使用心法 – 基本圖表篇" rel="bookmark">這樣做就對了！圖表的使用心法 – 基本圖表篇</a></h2>
												<p>這是個所有人都需要圖表的時代，但你確定你的圖表做對了嗎？其實，使用圖表有一些簡單的規則跟手法，今天我們就三個最…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/08/tips-on-basic-charts/" title="Read 這樣做就對了！圖表的使用心法 – 基本圖表篇">Read more »</a></p>
											</div>
										</div>

</div></div>

</div> 
						
				<div class="wrap cf" id="inner-content" style="position:relative">
					<div class="divider-title"><span>Latest</span></div>
				</div>
				<ul class="blog-list">
					<div id="masonry" class="masonry" style="position: relative; height: 950px;">
																		<li class="gutter-sizer masonry-brick"></li>
		  						<li class="item masonry-brick" style="position: absolute; left: 0px; top: 0px;">
	<a href="https://blog.infographics.tw/2018/02/loading-io-animated-icons/" title="讓視覺化作品躍出畫面 – 使用 loading.io 動畫圖示庫">
		<img src="https://blog.infographics.tw/wp-content/uploads/2018/02/thumbnail.gif" class="attachment-full size-full wp-post-image" alt="bouncing rainbow heart">	</a>
	<a href="https://blog.infographics.tw/2018/02/loading-io-animated-icons/"><h2>讓視覺化作品躍出畫面 – 使用 loading.io 動畫圖示庫</h2></a>
	<div class="date">
		<time class="updated" datetime="02-08-2018" pubdate="">2 月 8, 2018</time>	</div>
	<div class="excerpt"><p>圖表做來做去都一樣、視覺化再怎麼變化都很無聊嗎？試試看 loading.io 動畫圖示庫，讓你的視覺化活起來！…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2018/02/loading-io-animated-icons/" title="Read 讓視覺化作品躍出畫面 – 使用 loading.io 動畫圖示庫">Read more »</a></p>
</div>
</li>		  										<li class="gutter-sizer masonry-brick"></li>
		  						<li class="item masonry-brick" style="position: absolute; left: 345px; top: 0px;">
	<a href="https://blog.infographics.tw/2016/11/vectr/" title="Vectr – 永久免費的線上向量圖形編輯服務">
		<img src="https://blog.infographics.tw/wp-content/uploads/2016/11/COVER.jpg" class="attachment-full size-full wp-post-image" alt="" srcset="http://blog.infographics.tw/wp-content/uploads/2016/11/COVER.jpg 900w, http://blog.infographics.tw/wp-content/uploads/2016/11/COVER-300x176.jpg 300w, http://blog.infographics.tw/wp-content/uploads/2016/11/COVER-768x450.jpg 768w" sizes="(max-width: 900px) 100vw, 900px">	</a>
	<a href="https://blog.infographics.tw/2016/11/vectr/"><h2>Vectr – 永久免費的線上向量圖形編輯服務</h2></a>
	<div class="date">
		<time class="updated" datetime="11-26-2016" pubdate="">11 月 26, 2016</time>	</div>
	<div class="excerpt"><p>向量式圖形在網路時代的地位越來越重要，然而除了卡卡的 Inkscape 、貴鬆鬆的 Adobe Illustr…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/11/vectr/" title="Read Vectr – 永久免費的線上向量圖形編輯服務">Read more »</a></p>
</div>
</li>		  										<li class="gutter-sizer masonry-brick"></li>
		  						<li class="item masonry-brick" style="position: absolute; left: 690px; top: 0px;">
	<a href="https://blog.infographics.tw/2016/11/google-spreadsheet-data-scraping/" title="無痛爬梳自己來，用 Google Spreadsheet 爬取網頁資料">
		<img src="https://blog.infographics.tw/wp-content/uploads/2016/11/cover.jpg" class="attachment-full size-full wp-post-image" alt="" srcset="http://blog.infographics.tw/wp-content/uploads/2016/11/cover.jpg 900w, http://blog.infographics.tw/wp-content/uploads/2016/11/cover-300x176.jpg 300w, http://blog.infographics.tw/wp-content/uploads/2016/11/cover-768x450.jpg 768w" sizes="(max-width: 900px) 100vw, 900px">	</a>
	<a href="https://blog.infographics.tw/2016/11/google-spreadsheet-data-scraping/"><h2>無痛爬梳自己來，用 Google Spreadsheet 爬取網頁資料</h2></a>
	<div class="date">
		<time class="updated" datetime="11-23-2016" pubdate="">11 月 23, 2016</time>	</div>
	<div class="excerpt"><p>你常用到網路上各種來源的資料嗎？搜集整理總是一番功夫，是不是覺得若有一個小精靈能幫我們從搜集、整理到計算都自動…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/11/google-spreadsheet-data-scraping/" title="Read 無痛爬梳自己來，用 Google Spreadsheet 爬取網頁資料">Read more »</a></p>
</div>
</li>		  										<li class="gutter-sizer masonry-brick"></li>
		  						<li class="item masonry-brick" style="position: absolute; left: 345px; top: 254px;">
	<a href="https://blog.infographics.tw/2016/11/animate-css/" title="微動畫簡單做！使用 animate.css 五秒提升作品質感">
		<img src="https://blog.infographics.tw/wp-content/uploads/2016/11/cover.gif" class="attachment-full size-full wp-post-image" alt="" srcset="http://blog.infographics.tw/wp-content/uploads/2016/11/cover.gif 900w, http://blog.infographics.tw/wp-content/uploads/2016/11/cover-300x176.gif 300w, http://blog.infographics.tw/wp-content/uploads/2016/11/cover-768x450.gif 768w" sizes="(max-width: 900px) 100vw, 900px">	</a>
	<a href="https://blog.infographics.tw/2016/11/animate-css/"><h2>微動畫簡單做！使用 animate.css 五秒提升作品質感</h2></a>
	<div class="date">
		<time class="updated" datetime="11-20-2016" pubdate="">11 月 20, 2016</time>	</div>
	<div class="excerpt"><p>用戶互動的過程中，一點動態效果能有效地提升整體的使用體驗，但程式製作動畫過程繁瑣，撰寫 CSS 也相當費時。這…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/11/animate-css/" title="Read 微動畫簡單做！使用 animate.css 五秒提升作品質感">Read more »</a></p>
</div>
</li>		  										<li class="gutter-sizer masonry-brick"></li>
		  						<li class="item masonry-brick" style="position: absolute; left: 690px; top: 254px;">
	<a href="https://blog.infographics.tw/2016/11/reveal-js-and-slides-com/" title="Reveal.js + slides.com 製作令人驚豔的互動式簡報">
		<img src="https://blog.infographics.tw/wp-content/uploads/2016/10/cover-1.png" class="attachment-full size-full wp-post-image" alt="" srcset="http://blog.infographics.tw/wp-content/uploads/2016/10/cover-1.png 900w, http://blog.infographics.tw/wp-content/uploads/2016/10/cover-1-300x176.png 300w, http://blog.infographics.tw/wp-content/uploads/2016/10/cover-1-768x450.png 768w" sizes="(max-width: 900px) 100vw, 900px">	</a>
	<a href="https://blog.infographics.tw/2016/11/reveal-js-and-slides-com/"><h2>Reveal.js + slides.com 製作令人驚豔的互動式簡報</h2></a>
	<div class="date">
		<time class="updated" datetime="11-17-2016" pubdate="">11 月 17, 2016</time>	</div>
	<div class="excerpt"><p>做了超讚視覺化作品想要在簡報中與大家分享，卻總是受限於簡報軟體而無法自由發揮嗎？瀏覽器原生簡報工具 Revea…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/11/reveal-js-and-slides-com/" title="Read Reveal.js + slides.com 製作令人驚豔的互動式簡報">Read more »</a></p>
</div>
</li>		  										<li class="gutter-sizer masonry-brick"></li>
		  						<li class="item masonry-brick" style="position: absolute; left: 0px; top: 386px;">
	<a href="https://blog.infographics.tw/2016/11/plotdb-the-data-visualization-service/" title="為所有人打造的資料視覺化服務 — PlotDB">
		<img src="https://blog.infographics.tw/wp-content/uploads/2016/10/cover.png" class="attachment-full size-full wp-post-image" alt="" srcset="http://blog.infographics.tw/wp-content/uploads/2016/10/cover.png 900w, http://blog.infographics.tw/wp-content/uploads/2016/10/cover-300x176.png 300w, http://blog.infographics.tw/wp-content/uploads/2016/10/cover-768x450.png 768w" sizes="(max-width: 900px) 100vw, 900px">	</a>
	<a href="https://blog.infographics.tw/2016/11/plotdb-the-data-visualization-service/"><h2>為所有人打造的資料視覺化服務 — PlotDB</h2></a>
	<div class="date">
		<time class="updated" datetime="11-13-2016" pubdate="">11 月 13, 2016</time>	</div>
	<div class="excerpt"><p>看到想嘗試的視覺化手法，卻不知道該怎麼做嗎？讓 PlotDB 幫你吧！線上視覺化服務 PlotDB 提供上百種…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/11/plotdb-the-data-visualization-service/" title="Read 為所有人打造的資料視覺化服務 — PlotDB">Read more »</a></p>
</div>
</li>		  										<li class="gutter-sizer masonry-brick"></li>
		  						<li class="item masonry-brick" style="position: absolute; left: 345px; top: 508px;">
	<a href="https://blog.infographics.tw/2016/11/d3js-transition/" title="讓我的視覺化動起來！D3.js 動畫函式入門">
		<img src="https://blog.infographics.tw/wp-content/uploads/2016/10/cover.gif" class="attachment-full size-full wp-post-image" alt="" srcset="http://blog.infographics.tw/wp-content/uploads/2016/10/cover.gif 900w, http://blog.infographics.tw/wp-content/uploads/2016/10/cover-300x176.gif 300w, http://blog.infographics.tw/wp-content/uploads/2016/10/cover-768x450.gif 768w" sizes="(max-width: 900px) 100vw, 900px">	</a>
	<a href="https://blog.infographics.tw/2016/11/d3js-transition/"><h2>讓我的視覺化動起來！D3.js 動畫函式入門</h2></a>
	<div class="date">
		<time class="updated" datetime="11-07-2016" pubdate="">11 月 7, 2016</time>	</div>
	<div class="excerpt"><p>看膩了靜態圖表，又覺得互動套件效果有限嗎？D3.js 除了提供強大的視覺化輔助函式，就連製作動畫也難不倒他！那…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/11/d3js-transition/" title="Read 讓我的視覺化動起來！D3.js 動畫函式入門">Read more »</a></p>
</div>
</li>		  										<li class="gutter-sizer masonry-brick"></li>
		  						<li class="item masonry-brick" style="position: absolute; left: 690px; top: 508px;">
	<a href="https://blog.infographics.tw/2016/11/make-choropleth-with-datamaps/" title="熱度地圖簡單做！使用 Datamaps">
		<img src="https://blog.infographics.tw/wp-content/uploads/2016/10/cover.jpg" class="attachment-full size-full wp-post-image" alt="" srcset="http://blog.infographics.tw/wp-content/uploads/2016/10/cover.jpg 900w, http://blog.infographics.tw/wp-content/uploads/2016/10/cover-300x176.jpg 300w, http://blog.infographics.tw/wp-content/uploads/2016/10/cover-768x450.jpg 768w" sizes="(max-width: 900px) 100vw, 900px">	</a>
	<a href="https://blog.infographics.tw/2016/11/make-choropleth-with-datamaps/"><h2>熱度地圖簡單做！使用 Datamaps</h2></a>
	<div class="date">
		<time class="updated" datetime="11-01-2016" pubdate="">11 月 1, 2016</time>	</div>
	<div class="excerpt"><p>簡單的地圖視覺化，你還要靠 QGIS 繁複的製作步驟嗎？開源專案 Datamaps 讓我們在線上快速產製十來組…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/11/make-choropleth-with-datamaps/" title="Read 熱度地圖簡單做！使用 Datamaps">Read more »</a></p>
</div>
</li>		  										<li class="gutter-sizer masonry-brick"></li>
		  						<li class="item masonry-brick" style="position: absolute; left: 0px; top: 640px;">
	<a href="https://blog.infographics.tw/2016/08/coding-intro/" title="視覺化編程入門 — 我該選什麼程式語言？">
		<img src="https://blog.infographics.tw/wp-content/uploads/2016/08/cover-1.png" class="attachment-full size-full wp-post-image" alt="" srcset="http://blog.infographics.tw/wp-content/uploads/2016/08/cover-1.png 900w, http://blog.infographics.tw/wp-content/uploads/2016/08/cover-1-300x176.png 300w, http://blog.infographics.tw/wp-content/uploads/2016/08/cover-1-768x450.png 768w" sizes="(max-width: 900px) 100vw, 900px">	</a>
	<a href="https://blog.infographics.tw/2016/08/coding-intro/"><h2>視覺化編程入門 — 我該選什麼程式語言？</h2></a>
	<div class="date">
		<time class="updated" datetime="08-30-2016" pubdate="">8 月 30, 2016</time>	</div>
	<div class="excerpt"><p>你想做視覺化，但不會寫程式嗎？程式設計往往是資料視覺化的一大門檻，即便現今已有相當多工具可以幫我們達成任務，但…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/08/coding-intro/" title="Read 視覺化編程入門 — 我該選什麼程式語言？">Read more »</a></p>
</div>
</li>		  										<li class="gutter-sizer masonry-brick"></li>
		  						<li class="item masonry-brick" style="position: absolute; left: 345px; top: 729px;">
	<a href="https://blog.infographics.tw/2016/08/tips-on-basic-charts/" title="這樣做就對了！圖表的使用心法 – 基本圖表篇">
		<img src="https://blog.infographics.tw/wp-content/uploads/2016/08/cover.png" class="attachment-full size-full wp-post-image" alt="" srcset="http://blog.infographics.tw/wp-content/uploads/2016/08/cover.png 900w, http://blog.infographics.tw/wp-content/uploads/2016/08/cover-300x176.png 300w, http://blog.infographics.tw/wp-content/uploads/2016/08/cover-768x450.png 768w" sizes="(max-width: 900px) 100vw, 900px">	</a>
	<a href="https://blog.infographics.tw/2016/08/tips-on-basic-charts/"><h2>這樣做就對了！圖表的使用心法 – 基本圖表篇</h2></a>
	<div class="date">
		<time class="updated" datetime="08-11-2016" pubdate="">8 月 11, 2016</time>	</div>
	<div class="excerpt"><p>這是個所有人都需要圖表的時代，但你確定你的圖表做對了嗎？其實，使用圖表有一些簡單的規則跟手法，今天我們就三個最…  <a class="excerpt-read-more" href="https://blog.infographics.tw/2016/08/tips-on-basic-charts/" title="Read 這樣做就對了！圖表的使用心法 – 基本圖表篇">Read more »</a></p>
</div>
</li>		  					     				<div class="clear masonry-brick"></div>
					</div>
				</ul>
				</div> 
				<nav class="pagination"><ul class="page-numbers">
	<li><span aria-current="page" class="page-numbers current">1</span></li>
	<li><a class="page-numbers" href="http://blog.infographics.tw/page/2/">2</a></li>
	<li><a class="page-numbers" href="http://blog.infographics.tw/page/3/">3</a></li>
	<li><a class="page-numbers" href="http://blog.infographics.tw/page/4/">4</a></li>
	<li><span class="page-numbers dots">...</span></li>
	<li><a class="page-numbers" href="http://blog.infographics.tw/page/9/">9</a></li>
	<li><a class="page-numbers" href="http://blog.infographics.tw/page/10/">10</a></li>
	<li><a class="page-numbers" href="http://blog.infographics.tw/page/11/">11</a></li>
	<li><a class="next page-numbers" href="http://blog.infographics.tw/page/2/"><i class="fa fa-chevron-right"></i></a></li>
</ul>
</nav>							</div> 
		</div>

<div class="social-icons footer-social">
		           		         <a href="https://www.facebook.com/data.visualize/" class="social-tw" title="https://www.facebook.com/data.visualize/" target="_blank">
          <i class="fa fa-facebook"></i> 
          <span>Facebook</span>
        </a>
               <a href="https://plus.google.com/108759491535575577106/about" class="social-tw" title="https://plus.google.com/108759491535575577106/about" target="_blank">
          <i class="fa fa-google-plus"></i> 
          <span>Google+</span>
        </a>
               <a href="https://pinterest.com/infographicstw" class="social-tw" title="https://pinterest.com/infographicstw" target="_blank">
          <i class="fa fa-pinterest"></i> 
          <span>Pinterest</span>
        </a>
              <a href="mailto:contact@infographics.tw" class="social-tw" title="contact@infographics.tw" target="_blank">
          <i class="fa fa-envelope"></i> 
          <span>Email</span>
        </a>
                  	</div>

<p class="source-org copyright">
						 © 2020 資料視覺化 
						<span>							- <a href="http://wordpress.org/" target="_blank">Powered by WordPress</a> and <a href="http://wpsimplyread.com/" target="_blank">WP Simply Read</a> 
												</span>
					</p>

</div>

</footer>

</div>

</body></html>

infographics.tw--2020-01-21__07-36-56

資料視覺化