tag:blogger.com,1999:blog-87555957053175343252024-03-05T09:23:34.011-08:00Sugar and SpiceUnknownnoreply@blogger.comBlogger9125tag:blogger.com,1999:blog-8755595705317534325.post-47694096133833866772013-01-16T10:03:00.001-08:002013-01-16T10:04:02.816-08:00Preparing for Frugal FebruaryAs a Senior in college, I have been increasingly interested in personal finance in the past couple months. Especially so because I know I have (or hopefully, <i>had</i>) a spending problem. Not having to pay rent or insurance out of my own pocket as a student, seeing a lump sum in my checking account from my summer internship or part-time work during school would always get me thinking about what wonderful things I could buy with it. Regardless of whether I have $30 or $1000 in my checking, I would find a way to decimate it before the month was over. Facebook and Google knew this problem and taunted me with online shopping ads everywhere.
<br />
<br />
I read about Frugal February on Reddit, and decided to do it. This was in December. It was perfect: I would use December and January to prepare myself for this personal challenge and discover how much I could be saving if only I were more aware of my spendings.
<br />
<br />
Since there are exactly 28 days in February this year, it is perfect to split it into 4 weeks. Each week gets its own Frugal February Checklist I made:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5FnmHdwQY8Ftz_GQGhtdOS_olV1C5ZmPJE_BksP1Xru8VfeSjfxUDyUzVyNJHDC_vvS6vh0XzNs1hfMXU5ndVspgbWnjMwTxyDYQ98ZktVVO-DB7TT7_FmUmudMsw5zI6q9cykO822vv-/s1600/frugalfeb.png" style="border-color: #ddd;" /></div>
<br />
But of course, one can't just jump into Frugal February without having planned for it. It would be like going from eating 5000 calories each day to starving for an ill-planned diet. Which would result in general unhappiness and a yoyo back to 5000 calories afterwards.
<br />
<br />
So here is a list of things I did in preparation for Frugal February in the past month and a half. Most knowledge came from <a href="http://reddit.com/r/frugal/">/r/frual</a> and <a href="http://reddit.com/r/personalfinance/">/r/personalfinance</a>. After watching a few lectures on <a href="http://coursera.org/">Coursera</a> for personal finance and for this 1-unit class called Financial Literacy at Stanford, I realized that the personal finance I learned from poking around Reddit was much richer and more helpful.
<br />
<br />
<h3>
Get a hold of my spending habits</h3>
<br />
So everything I read on personal finance told me I should start out by finding out how and how much I'm spending money before I could make a realistic budget for myself.<br />
<br />
At first I started writing stuff in a journal, by hand. But for some reason that didn't work. I would forget about something, or leave something out, and would be too lazy to find out when or how much. So, against the voice in the back of my head telling me Excel is <i>not badass</i> (probably planted there by friends from <a href="http://addepar.com/">Addepar</a> whose goal is to eliminate inefficient Excel use in the financial sector), I made an Excel spreadsheet:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRfn_FwKPSklRVmJh4zdLgG6pQ39nsy8BdP8zf0lBWsBc5yeDq7zokz2KdtJ53Tygsnbj7IjOpfqZmVIsZgJcrmN1mtn9zRSXwHdIgEPJmUvuH444n-adDmf8NKSWmYJnIaJC0TAhWLHO2/s1600/budgetsheet.png" style="border-color: #ddd;" /></div>
<br />
And it wasn't so bad after all! I have a difficult time keeping track of receipts, and I rarely use cash, so I would just log on to online banking, check the recent transactions, and organize them in my spreadsheet every now and then.
<br />
<br />
On December 25th, I faced the moment of truth, and it was pretty awful:
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="1" style="border-color: #ddd" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWUWZUCpomaE1QRAXVYQu17S2icd_1_57ymuMOI6CmmqJDF83Xrbjbca3MtMQUtvwawVslvgMuY5uRBRvfxHNZzuTjruF5fnXXj8MkAQBqj62NkR6rfgisPfenb14KB4hqCSmgcfiiZCR0/s1600/Screen+Shot+2013-01-15+at+12.36.11+PM.png" />
</div>
<br>
Why the hell did I spend $562.42 on shopping and gifts? $123.13 on entertainment? And, why, even though I could have eaten at home, where I'm currently living with my mom and sister who are visiting from Korea for a year, I spent $416.67 eating out?
<br><br>
I was living like a King when I was just a student with no savings and a monstrous tuition debt I would need to pay off. Good to know!
<br><br>
<h3>
Split accounts</h3>
<br>
The first thing that I was advised to do (by Reddit) was split my accounts. This would accomplish two goals:<br><br>
1. Manage my cash flow more transparently<br>
2. Put money away where it's not just a click away<br><br>
I used to only use a checking and a savings account with the Stanford Federal Credit Union, but transferring money between the two was so easy and instantaneous that I would never accrue any money in the savings account. (Or the checking account, for that matter)<br><br>
I went with Reddit and Mint's suggestion and opened up several savings accounts with Ally Bank, where there is no minimum deposit, no fee, and a 0.95%. I also set up a checking account where I plan to deposit a certain amount every month and make it so that all my bills are paid from there. Appropriate nicknames were given:<br><br>
<div class="separator" style="clear: both; text-align: center;">
<img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN1lvoARfuPMccBArNbLKHlvfy9fdk29NByrZrBscq-ET59QfliOZYF8ZoabT8KddpLTJ0hyjW6UjsW8UtoZ0iHUKscThsi3v689ghNFc26j0oa1fOG3yC2eiHELyYZLGEe0VPsZngdCN7/s1600/ally.png" style="border-color: #ddd;" /></div>
<br>
Er.. the 100K House was sort of spur of the moment and I might make it something else, however; if I had 100K I would rather invest it than have it sit in a savings account.
<br />
<br />
<h3>
Set up direct deposit</h3>
<br />
The next step would be to set up direct deposit so that I wouldn't be tempted to keep more money in my spending account. I figured that if I cut back on gifting, shopping, and eating out, I could live within $400 per month. Bill pay would get a separate $100 per month for phone bills, Dropbox, and Netflix. I get paid biweekly, so this is the direct deposit form I ended up submitting:
<br><br>
<div class="separator" style="clear: both; text-align: center;">
<img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6oTCF0CBlPRiJTRWUBfDAsAW6nayUQwaNb9tY6MWMO2qzP5i18gJ1ngulQsgCtNKBCae53YmqYuPBiKSwS8gqrxe3iFJ1aR6vIKEHDoWE-Qs2HLyLmCUgRvI3UMGKbGfYudEBnFp45OnY/s1600/directdeposit.png" style="border-color: #ddd;" /></div>
<br />
Anything over the $500 I allocated for myself would be deposited in a savings account with Ally, after which I would distribute over the different saving goals depending on the amount of money deposited.
<br>
<br />
<h3>
Write and share</h3>
<br>
The best thing to keep myself motivated was to write about it, and share my plans with friends. I found myself a forum where people share their budgets. It's a Korean website, so most of you won't be able to share, but for those who <i>can</i> read and write Korean, it is <a href="http://cafe.naver.com/unistudentstory?20130117024359">대학생 재테크 카페</a>. That, and I convinced several of my friends to join in on Frugal February!<br><br>
There are still two full weeks left before February 2013, so it's not too late to start planning. Take this badge and link it to keep up with Frugal February updates!
<br><br>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL7Lu-QAV4vMIcBMnudxqrzzIkLLqXQSDDhgLetJdOk7npylMLi4jVCug2EMwO6e4TqSoCdAgD4oS7ggJ13Z2jAPZZE5bJYw6ktjj52EN7a-tmPzPF0Zrx3N8t_rcYZ_i0ppXijM5_1Aru/s1600/frugalfebbadge.png" />
<textarea style="height: 35px; width: 300px;"><a href="http://sugar-and-spce.blogspot.com/search?q=Frugal+February"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL7Lu-QAV4vMIcBMnudxqrzzIkLLqXQSDDhgLetJdOk7npylMLi4jVCug2EMwO6e4TqSoCdAgD4oS7ggJ13Z2jAPZZE5bJYw6ktjj52EN7a-tmPzPF0Zrx3N8t_rcYZ_i0ppXijM5_1Aru/s1600/frugalfebbadge.png" /></a></textarea></div>
<br />
<br />
<br />Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-8755595705317534325.post-19136054791049435352013-01-15T12:17:00.003-08:002013-01-15T12:17:43.337-08:00D3GL Tutorials 03: Intro to data primitives with PointsData primitives for D3GL are the visual equivalents to the raw data. So far, we have covered (1) creating a globe, (2) binding the globe to some data to set globe-specific properties, and then (3) binding primitives to data. But all this has been setting grounds for showcasing the data through the primitive it has been bound to by letting the data dictate specific properties of the primitives.<br /><br />
In D3GL globe, there are five data primitives: <pre class="inline">Points, Shapes, Bars, Arcs,</pre>and<pre class="inline">Painter</pre>. We will take <pre class="inline">Points</pre> as an intro to primitives.<br /><br />
<h3>Customizing primitives for data</h3>
<br />
Just as each globe was an instance of a globe template which was tied to each data element, each point, shape, arc, etc. is an instance of a template. Just like with the globe template, you will either pass in fixed values that are shared across all instances or functions that will return customized values depending on the data element it takes as argument.
<br /><br />
Let's take <pre class="inline">Points</pre> as an example. First you would create a template that binds to data, as the following:
<pre class="prettyprint lang-js">
var points = globe.points()
.data(function(k) {
return datasets[k];
});
</pre>
As we discussed in the previous tutorial, the argument <pre class="inline">k</pre> is bound on the globe level (i.e. per globe) and in this case is being used as the key to fetch a dataset, which is then bound to the primitive <pre class="inline">Points</pre>.
<br /><br />
We want to customize each point instance so that it represents each data element:
<pre class="prettyprint lang-js">
var points = globe.points()
.data(function(k) {
return datasets[k];
})
.radius(function(d) {
return scaleRadius(d['precipitation']);
})
.color(function(d) {
return scaleColor(d['precipitation']);
})
.latitude(function(d) {
return d['latitude'];
})
.longitude(function(d) {
return d['longitude'];
});
</pre>
The parameter <pre class="inline">d</pre> used in the setter functions represents a data element in the dataset bound to <pre class="inline">Points</pre>. In the above code snippet, the radius and color of each point is determined by the value of <pre class="inline">d['precipitation']</pre>. The scaling functions <pre class="inline">scaleRadius</pre> and <pre class="inline">scaleColor</pre> take the precipitation value and spit out an appropriately scaled radius in units of degrees, and color in "#<hex>" format. D3.js provides a convenient <pre class="inline"><a href="http://alignedleft.com/tutorials/d3/scales/">d3.scale</a></pre> that is pretty useful for all types of scaling, including color gradients.
<br /><br />
<h3>Demo</h3><br />
This demo marks the landings on Mars with <pre class="inline">Points</pre>, using the color and size of each point to represent how recent the landing was:
<a href="http://bl.ocks.org/4541384">Landings on Mars</a>
<br><br>
<h3>Implementation</h3><br>
As discussed in the previous tutorial, a data primitive for D3GL Globe is another closure within the <pre class="inline">d3.gl.globe</pre> closure. <pre class="inline">Points</pre> has a rendering function, but unlike with the globe, this function is not invoked by the client. Instead, when <pre class="inline">Points</pre> are added to the globe, the rendering function for <pre class="inline">Points</pre> is pushed to the array of rendering functions that are called per frame by <pre class="inline">d3.gl.globe.</pre>
<br><br>
In the rendering loop invoked with <pre class="inline">.call(globe),</pre> a hidden canvas element that is programmatically created is passed in to the rendering functions for primitives, along with the datum the globe instance is bound to, and the WebGL environment:
<pre class="prettyprint lang-js">
// In rendering loop - called once per frame
for(var i = 0; i < primitiveRenderingFunctions.length; i++){
primitiveRenderingFunctions[i](
webGLEnvironment, contextForHiddenCanvas, datumForGlobeInstance
);
}
</pre>
Of course, it's JavaScript, not Objective-C, so the variable names are not actually this long.
<br><br>
In the rendering loop for <pre class="inline">Points,</pre> the datum pass in is used to fetch the dataset. Then for each element in the dataset, a circle is drawn using <pre class="inline">drawCircle()</pre> on the context that is passed in:
<pre class="prettyprint lang-js">
function points(gl, context, datum) {
var dataset = fnData(datum);
for (var i = 0; i < dataset.length; i++) {
var elem = dataset[i];
// client-defined functions are used to fetch properties of each point
var lat = fnLat(elem);
var lon = fnLon(elem);
// ... and so on
drawCircle(context, plat, plon, pradius, color, strokeColor, lineWidth);
}
}
</pre>
After all rendering functions in queue are called and the overlay texture on the hidden canvas is complete, the entire scene is rendered via <pre class="inline">gl.renderer.render(gl.scene, gl.camera);</pre>
<br><br>
The other primitives roughly use the same format, but there are differences. So stay tuned!
<br><br>
<a href="http://sugar-and-spce.blogspot.com/2012/12/d3gl-tutorials-02-binding-data-to-each.html">← Prev</a>
<br /><br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8755595705317534325.post-62792219622857198152012-12-30T04:24:00.000-08:002012-12-30T06:04:47.925-08:00The other Avatar is racist tooMy sister and I used to avidly follow the Nickelodeon series<i> <a href="http://www.imdb.com/title/tt0417299/" target="_blank">Avatar: The Last Airbender</a></i>. She was 9 and I was 19 but it worked out. When the movie for the series was announced, it was supposed to be titled <i>Avatar</i> and I was so excited I literally counted down the days - so excited that I watched the trailer for <i>Avatar</i> and saw suspicious looking blue people and a lot of helicopters but assumed that they decided to take the ethnic kungfu thing really seriously and very far out. I still thought that I was watching <i>Avatar: The Last Airbender</i> in the theater 15 minutes into the suspicious 3d movie full of tall blue people.
<br />
<br />
Er.. turns out that <i>Avatar: The Last Airbender</i> decided to change names to <i>The Last Airbender</i> because <i>Avatar</i> was such a big hit. No matter. I counted down the days again and this time no one wanted to go see the movie with me because no one my age was a fan of the Nickelodeon series. So I went to the theater alone, 20 minutes early, bought a popcorn and coke for myself and watched the movie, and walked out sad, disappointed, and alone in a sea of chattering children a couple hours later.<br />
<br />
So my sister and I were rummaging around Netflix around 1am and found <i>The Last Airbender</i> and I decided to give it another shot - the last time I watched it was two and a half years ago, maybe I'll like it more this time around.<br />
<br />
<a href="http://www.rottentomatoes.com/m/last_airbender/" target="_blank">Nope.</a><br />
<br />
The only good part about the movie was the ramen we inhaled while watching it. After we finished the movie, we watched the <a href="http://movies.netflix.com/WiMovie/Avatar_The_Last_Airbender/70142405?trkid=7115812" target="_blank">first episode of the original Nickelodeon series</a>, and it was so good.<br />
<br />
The core problem with the movie was that they swapped out all the non-white actors into white actors who made Kristen Stewart look like she deserves an Oscar.<br />
<br />
Aang is <a href="http://racebending.livejournal.com/71429.html" target="_blank">clearly an Asian monk hero</a>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfzIqsGEYUfj11lHiwNGfmqEPa9OeUMh3lGr3QfO7HKc6_QpB9EzvDhbKHRT-xFtVQx_ju19l6coQxxRpIaTXJ7GU4nTmIY3hnIVOTgUlmJXbu00m_Jl548PzRcUaaDr1kOKhtzVuwkQsG/s320/aang.jpg" width="232" /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The real Aang should have looked something like the left drawing below, complete with the playful, childlike expression. In the movie, he is as shown in the next picture, complete with an all-too-serious face for a 12-year-old and very distinctly Caucasian features.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxxYq12iPtNf4L86v_SCXRm4iZUB5iNJDuC1nRt3YQ7p2jdUmA7GZAjjXuShaAjzHt9pkIPjRMtVYSR6Zys3DfutcrMp8Yoxri_0yBl9LHIM3Jba8Sp7p2x4cJoMMdymDLjc5SJRc1yuer/s320/asianaang.jpg" width="320" /><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4cyN2fjWQpNiijbBW_Rmkq22hF6wwB0cu_2-xZrM8TS3seopbxXW44kEcD3j2UZYcce3UkZyLssACNLYnkLfWIapsdijZB3R54vkK3nSR1DRQv3ziAidj6b0YO4AeeAn6USHtHi_lCXyV/s320/whiteaang.jpg" width="216" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Now these kind of jokes don't even make sense:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL3Cp_gu4wQD9Oi_QcoEye1JxWrqWoW-vPbJgO6HuDybzSZX0i5T6bR8Or2MiamyDVYE2fqmxM5n9TWpLfS6V1RNyblEyW7lAEk8C1dioChX4QjI2ue-QtietMUMhq3WghqpOREhQs4rBu/s320/aangmeme.jpg" width="320" /></div>
<br />
<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
In addition to changing the race of the hero of the story, they swapped out all the Inuit tribespeople too! Aang's closest friend Katara is unmistakably brown in the original series, while in the movie, she is decidedly white.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtd6Zj1ahuOpmhpeI5kmWXeUtyZtbF4xhM-XDA8y7fmt8wBggnvPIDTg7Tql106U-On7X3xENBSrDZ1aU11CHOD_esZouRTs_YGdlr-aAzIW68IHuzTmQwT_VNKzvjli8lgqn-iaC79C5k/s320/whitekatara.jpg" width="216" /><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpwVmzCsJ0Xl75VsTid8eMAdXtvzGq6fCMvT_nGwiCcveHisUSoxPuv_cU2GCSFmFAuuWeRjeMYPL7iModUWcwrbbfbbGE07VGGaMUYWiq-r0G2alYlOXygl60-1RCS5wMb5v-ddcYrE0y/s320/katara.png" width="320" /> </div>
<br />
<div class="separator" style="clear: both; text-align: left;">
Even when they did cast Asian people, they casted the wrong type of Asians! Prince Zuko is clearly of Chinese descent in the original series. The people in the Fire Kingdom even have Chinese names, such as General Zhao. But they decided that Fire Kingdom citizens should be Indian. Except for Prince Zuko's uncle, who is Caucasian for some incomprehensible reason.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8oLP7qgCtMQ2bXXxbr2QssnLyiYH6t_EkGTnHvGfQH3dUCaGVqpcgL-p4cH8ghxu9u0vM5UwHPzVO5XxavWbwjQCv0XvNZ9WDFr90C2Jc4wiFbWBv762NZHCPc38_DLzgSSJ8B3dkxEHi/s320/zuko.png" width="320" /><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qKCuwkf77r2ovX7JsHEGbBfLhdXsUSJcCAS62wQm4ONBmMslllB_QJXBoUenddp6qEKY8LyeZCkelI7fAx7JDvxzouR-AzXBibcxG1PIHf9VZCjt9P80QJy0OajkXvDIOqZn0JtAP-iX/s320/Iroh-and-Zuko.jpg" width="320" /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFDr9D4H9i-TusDGrWODSs_m14nE44u37i4Y6fruryN3Po0pmJFP_pJmAxJL56U0EQ_1Z2VVrG0wYQHldHcATuK-HzyWb5F5-KuTheg433C2NIetiV3eWP9Tdd_oSXeIibfLDghCKWUpfm/s640/zukoanduncle.jpg" width="640" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I've been a fan of <a href="http://www.youtube.com/watch?v=cQRYAagXZFQ" target="_blank">Dev Patel long before he hit it big</a> with <i>Slumdog Millionaire</i>, but it does not change the fact that he's not the right type of Asian for <i>Avatar</i>.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Apparently draining heros of color has been happening in Hollywood for a long time. I just found out that the movie <i>21</i> was actually based on a book that has an Asian American protagonist that defies stereotypes, but the director decided to cast a white person instead, killing all the second-generation Asian immigrant aspect of the storyline.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I felt like the following talk captured the essence of the problem:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/SFzAoQ01rKU?feature=player_embedded' frameborder='0'></iframe></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
It's so weird. At Stanford, I never feel stereotyped or marginalized as an Asian. And then I see some ridiculous things happening like <i>The Last Airbender</i> and <i>21 </i>that people are oblivious to, and I suddenly feel unwelcome here. But I guess Stanford just spoils you like that. It doesn't hurt that there's this trend for shiny new Asian-named buildings on campus either.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
If Hollywood ever goes through with <a href="http://www.geek.com/articles/geek-cetera/snow-crash-movie-to-be-written-and-directed-by-joe-cornish-20120615/" target="_blank">making <i>Snow Crash</i> into a movie</a> and turns Hero Protagonist - the half-Black, half-Korean hero of the novel who practices Japanese-style sword-fighting - into a white male that is "easy on the eyes," it will be a very, very sad day.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8755595705317534325.post-19483890673027611972012-12-28T21:43:00.001-08:002013-01-08T19:04:39.203-08:00D3GL Tutorials 02: Binding data to each globeSo far we have discussed binding a dataset to a globe-rendering template, then creating multiple globes that utilize the template. But you also want to bind datasets per globe - you want color-coded maps, points, bars with different heights jutting out of the sphere, arcs stretching across oceans.
<br />
<br />
The elements of data - points, bars, etc. - we call data primitives. With <pre class="inline">d3gl.globe</pre>
, we bind data per type of data primitive. That is, each globe can have multiple data primitives, and each data primitive type gets its own dataset to visualize. We will talk more about data primitives, their shared properties, and available user interactions in the next tutorial.
<br />
<br />
In this tutorial, we go over how you bind a different dataset to a data primitive on each globe.
<br />
<br />
<h3>
Bind data to a primitive</h3>
<br />
<pre class="prettyprint lang-js">var rainfall = [10, 0, 5, 20];
globe.points().data(rainfall);
</pre>
<br />
In the above snippet of code, the variable
<pre class="inline">globe</pre>
is a globe template. We are creating the points layer on top of the globe, and telling it that a point should be rendered per data item in
<pre class="inline">[10, 0, 5, 20]</pre>
.
<br />
<br />
But let's not forget that the same globe template can be used to create multiple globes. With the above code, each globe rendered from the globe template will render points using the same dataset. We probably don't want that.
<br />
<br />
<h3>
Bind different data to each globe
</h3>
<br />
To pass in different datasets for globes using the same template, we can do the following:
<br />
<pre class="prettyprint lang-js">var precipitation = {
‘rainfall’: [10, 0, 5, 20],
‘snowfall’: [0, 30, 0, 10]
};
// create a globe rendering template
var globe = d3.gl.globe()
.width(300)
.height(300)
.texture("earth.jpg");
// add points, specify dataset for points
var points = globe.points()
.data( function(d) {
return precipitation[d];
});
// render two globes
d3.select(“body”)
.selectAll(“span”)
.data(Object.keys(precipitation))
.enter()
.append(“span”)
.call(globe);
</pre>
<br />
This binds the array<pre class="inline">['rainfall', 'snowfall']</pre>to the globe rendering template with<pre class="inline">.data(Object.keys(precipitation))</pre>. Then each element in the array is passed in as a parameter to each of the two globes that are created with the template.
<br />
<br />
Because we added the<pre class="inline">points</pre>
primitive to the globe template, each globe instance renders a points layer. The points on the globe that has the data element<pre class="inline">'rainfall'</pre>binds to the array<pre class="inline">[10, 0, 5, 20]</pre>, which it grabbed with its<pre class="inline">data</pre>property, as specified in the template:
<br />
<pre class="prettyprint lang-js">.data( function(d) {
return precipitation[d];
});
</pre>
<br />
Likewise, the globe that is passed in<pre class="inline">'snowfall'</pre>binds its points to <pre class="inline">[0, 30, 0, 10]</pre>.
<br />
<br />
<h3>
Demo
</h3>
<br />
Since we haven't given <pre class="inline">points</pre> enough settings to be able to display the data, there will be no demo for this tutorial. To check out data-binding in action, you should continue on to the next tutorials that cover the different primitives you can bind data with!
<br />
<br />
<h3>
Implementation
</h3>
<br />
Like<pre class="inline">d3.gl.globe</pre>, the data primitives are closures with getters and setters. They have a rendering call, just like<pre class="inline">d3.gl.globe</pre>has a rendering call that is invoked with<pre class="inline">.call(globe)</pre>. But the rendering call for a data primitive type is invoked internally in the rendering loop started when the globes are rendered. Each rendering call for a primitive gets the data element assigned to the globe the primitive belongs to, which is then used to grab the relevant dataset.
<br />
<br />
The implementation for data primitives will be discussed more in depth in the next tutorial.
<br />
<br />
<a href="http://sugar-and-spce.blogspot.com/2012/12/d3gl-tutorials-01-creating-globes.html">← Prev</a><br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8755595705317534325.post-56580181113507533252012-12-28T14:54:00.000-08:002012-12-28T14:54:01.403-08:00Worrymouse<div class="separator" style="clear: both; text-align: center;">
Staying home for the holidays, I spent a lot of time with my mom.</div>
<div class="separator" style="clear: both; text-align: center;">
She inspired me to draw this little piece:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYcLb3e2GRTAaZO3HVFt7n3zvzx7Ma4HSm9EeYqioYsMjB6FJchVrjtmQgh7JN0ezI4pln8bTHEc_vK99aRcM92OwyiQkl38LwbOUOYxfAr_q2FZvcjQYIF14-CtiaWfwpoUd-jb1iZUUA/s1600/01.jpg" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<br />
<br />
<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-Y8eIpQYxai6PDbyJgjzV3Lw8MjK0mxF1M6CPMJ02IvDj0QushNYLbYC2C9KP4iSR2hZ571SNS6qxNRgL9dCAebXV0Ukb3BsLCJgP9H693lyXRGpLE4tTBkwwxiCqDihcTa4-9la8mjy/s1600/02.jpg" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjypt-IL5JSL3snUjFdjTo3poT8mTZZ50Rs_Aa7ThHKUj34wk7-p79nwa7nBbFJh2qP0Jt8X2Jy_NNgmdHGGHLvSHSbpEIl1NkBfOipeqsUSXXRl8TzsqxGMpJ4ruuuZIYgg7gnr5jWoQ7r/s1600/03.jpg" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTZrvyd7_F8houLTSxs_jZ3etqKDDI-RBEgwc6rbyZrhNiea2mDG3MGWK1dkeqSXQplANaswers-T8oyZZFIHigI2B4XloNfTA9CDmyrTTQ-eRheGiFXlsoaWBZPV3xwJyKJGTfH_h4-ek/s1600/04.jpg" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_70q79myKVGgaQzWf_V7szCz-zg0dNzHdHxUvr6SdIus9AchLqAHIX-7Yn3ABCO8DHXunOCDV0Fx4lnsXUJ6Y6JwGLNYpTN2ns_WfHmm0DmlCyZFPzk8z7llcVEILlAA5IWeWCBjMmRBJ/s1600/05.jpg" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4IpfqHvzQw7IhZgRNwLa6Py84VweCll2LoSNFOT1-pDwIIAcIvfnvO_9mvQw3bCXqpoqpyahoNtzLEbC6rBQYy8KscZxF7DdLfBOmo1yK0rlrbc7wNpjpMP2m-8vDX-ZLU03LVc-YzbMa/s1600/06.jpg" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWv2JwdExQTI3w7EC_Vcvr1tH7YpvyiixsjGyMeGSaVDBUnDRV8mpZ9OHp6LhLsDUHNN3xk8Up1rK3AcZQDM8uui6v163xCVNPjID-x8-CSuiEq731cWJju-7EcrAGRQt1ekvP47oYooN/s1600/07.jpg" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-8755595705317534325.post-46617332234835424012012-12-27T16:18:00.003-08:002012-12-27T17:01:19.597-08:00A Romantic Brain<div style="text-align: center;">
<span style="font-family: inherit;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAslLCSy14LjFJBqLpT46EOFCMOCmHbJ9qlgtRkREP6JWU72FOfGaQUyEhTdm9OwJEWwfMh8V2IE-pZXWesy9FoIhG9ymc3DzaeMAxGiywEfuHK09g4hyCNRWtLrbCIVNqRUdRa84vhTR5/s1600/rose.png" /></span></div>
<h3 style="text-align: center;">
Dissecting Love
</h3>
<br />
<blockquote>
<div>
<div class="p1">
<em><span style="font-family: inherit;">How on earth are you ever going to explain in terms of chemistry and physics so important a biological phenomenon as first love?</span></em></div>
<div class="p1" style="text-align: right;">
<em><span style="font-family: inherit;">- Albert Einstein</span></em></div>
</div>
</blockquote>
<span style="font-family: inherit;">I have long been fascinated by the mechanisms of romantic love. Why does <i>my</i> romance feel so unique and intense, only to realize that the same feelings have been documented world-wide for as long as writing has existed?</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">Some may say that dissecting love into what it really is - a chemical process in the brain and in the body - is unromantic, cold-hearted, sacrilegious. But I think it simply adds to the wonder: Earth remains awe-inspiring even after we learn that it is but one of a myriad planets in existence; water does not stop quenching our thirst because we know that it is but an amalgamation of tiny particles strewn together not unlike lego pieces; love is no less beautiful with the discovery that it is but a serious of reaction firing in our cells.</span><br />
<span style="font-family: inherit;"><br /></span>
<br />
<div style="text-align: center;">
<span style="font-family: inherit;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTq1-63cYzjYrxflPhFs_AtJc3q6AMrWKbTW8Dw-63X9mR-NJyfD5s-28sjePMEpUdSzhvAhO7eYSxyqleyDDH5tARzUQ2-fV4nscHqFU_1E2aH0zHR6y2_f0JQmYIbaFOnAJr9PtpFOWG/s320/view_of_earth_from_moon.jpg" width="316" />
</span></div>
<div style="line-height: 1;">
</div>
<div style="text-align: center;">
<div style="font-size: x-small; line-height: 1;">
<span style="font-family: inherit;">Earth is even more awe-inspiring when seen from the moon, despite - or because of - how<br />
the view shows you that Earth is not the center of the universe</span></div>
</div>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br />
Is passionate romantic love really a uniquely human feature? I have learned to be wary of anything being described as "uniquely human." The more I learn, the more it seems as though we are nothing special compared to the rest of the universe. And yes, passionate love exists in other species, if you define passionate love as an uncontrollable, burning desire to be with a particular someone, including sexual desire but more the need to be together as companions.</span><br />
<span style="font-family: inherit;"><br />
</span><br />
<div style="text-align: center;">
<span style="font-family: inherit;"><img border="0" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtKoZqAuGBYfR04rCukBCp0xheRIc6635yOth1AxOhDnkSCro6ZVzP4Z4bT8iWBunP10k7uRZuGkxW6u1iKGhBSNG7WjrsN2Z-NiZ8a1elPOYBkoJKNpZsV_c7jkBUldSRFFzZ-CrXOZ5Y/s320/voles.jpg" width="320" /></span></div>
<div style="font-size: x-small; text-align: center;">
<span style="font-family: inherit;">Prairie voles develop lifelong bonds between mates
</span></div>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">Of course, romantic passion observed in animals vary in how long it lasts, from mere seconds in rats, two weeks in foxes, and a lifetime in wolves. But after all, so does love between people, as Violetta puts it as she sings in Verdi's opera <em>La Traviata:</em> "Let's live for pleasure alone, since love, like flowers, swiftly fades."</span><br />
<span style="font-family: inherit;"><br />
</span><br />
<div style="text-align: center;">
<span style="font-family: inherit;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAslLCSy14LjFJBqLpT46EOFCMOCmHbJ9qlgtRkREP6JWU72FOfGaQUyEhTdm9OwJEWwfMh8V2IE-pZXWesy9FoIhG9ymc3DzaeMAxGiywEfuHK09g4hyCNRWtLrbCIVNqRUdRa84vhTR5/s1600/rose.png" /></span></div>
<h3 style="text-align: center;">
<span style="font-family: inherit;">
A Romantic Brain</span></h3>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">This series of posts will cover how romance looks in the brain, and how it alters the body and mind of those affected. Unlinked titles are yet to be written:</span><br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSZpPP4Dd-HY0OvN7BYe4JpKRUIflCY-i0E4RxHaMiNPgpJY2v763rMfES0sOVB8Q3-qFFOdKbUZaqueyK05ptLr7ba565KqVNWjVaMydeCq1PRCphMkfKsdtKGQtgTNlLoG7RJPFRaoy/s320/heart.jpg" width="200" />
</div>
<span style="font-family: inherit;"><br /></span>
<br />
<h4 style="text-align: center;">
The romantic instinct</h4>
<div style="text-align: center;">
... talks about the different hormones involved with romance</div>
<div style="text-align: center;">
as a basic human instinct, not unlike drives such as hunger, thirst, and lust.</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxzxeyVmrSSBqkni5PLhDHt8Fd4Sg0zfMJqeudRzSbCsr7o0S2nxxSi_BpNwVxHDPER4u17Kbomi6C8vafdIZ501cyeyQqqhIHoRs_Pxo1EfzoatRyuS5Vg_FyPyUQhk6uugmji0yYHKwI/s1600/lovepotion.jpg" /></div>
<br />
<h4 style="text-align: center;">
Manipulating love</h4>
<div style="text-align: center;">
... discusses various ways love is and can be manipulated - how various behaviors,</div>
<div style="text-align: center;">
circumstances, and substances can lead to romance or heartbreak.</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEt-Rpmsoh2XS1f-rMIa2MSXE0_Vngs55ylULOD1Swmkjh7JmhTricZz1s4VP4oCBz5QT8Lylbo_RZ3ksATuSK1Uxqlalat5gkMZAd23OhrdnAPiNks_EEoOklwdR8mXLLizlUBdsixsWL/s1600/emotionallove.jpg" /></div>
<br />
<h4 style="text-align: center;">
Love as a maleable emotion</h4>
<div style="text-align: center;">
... brings up the nurture aspect of love - the emotional aspect of love</div>
<div style="text-align: center;">
that may play a large role in humans but not in animals.</div>
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8755595705317534325.post-38636297885689772222012-12-27T04:42:00.002-08:002012-12-29T01:53:54.412-08:00D3GL Tutorials 01: Creating globes<pre class="inline">d3.gl.globe</pre>
is one of D3GL's data visualization templates that is useful for visualizing global, location-based data. 2D projections of the globe pose problems of distortion and misrepresentation. To take a simple, common example, a Mercator projection of the world's countries has a large <a href="http://www.infovis-wiki.net/index.php?title=Lie_Factor">“lie factor”</a>, because countries like Greenland and Russia appear much larger than they actually are.
<br><br>
3D visualization has a lie factor of one. Through projection, rotation, zooming, etc, 3D visualization leverages the human brain's powerful faculties for understanding spatial data. Flight paths, for instance, make much more sense when depicted on a three-dimensional Earth because the best paths fit the curve of the Earth, which may look strange and arbitrary on a flat projection of the world. Stellar bodies other than the Earth may also benefit from three- dimensional visualizations, particularly because unlike the world map, most viewers are not familiar with flat maps of the sun, moon, Mars, and more.
<br />
<br />
D3GL's globe template can overlay the following data primitives:
<pre class="inline">points, painter, arcs, bars, shapes</pre>
. In this tutorial, we will focus on rendering naked globes without any overlays using custom globe templates.
<br />
<br />
<h3>
Creating a globe template</h3>
<br />
Before you can render a globe or several, you need to create a globe template and set its properties using chaining, as in
<pre class="inline">D3.js</pre>
:
<br />
<pre class="prettyprint lang-javascript">var globe = d3.gl.globe()
.width(300)
.height(300)
.texture("earth.jpg");
</pre>
<br />
The globe template serves as a rendering template for multiple globes. For properties shared among all globes, static values can be passed in, as in the width, height, and texture calls in the above snippet of code.
<br />
<br />
<h3>
Customizing per globe</h3>
<br />
To configure a specific property per globe, a function is passed in as argument, as in the texture call in the modified code below:
<br />
<pre class="prettyprint lang-javascript">var globe = d3.gl.globe()
.width(300)
.height(300)
.texture(function(d) {
return "../" + d + ".jpg";
});
</pre>
<br />
The function passed into the texture call has a parameter
<pre class="inline">d</pre>
, which refers to the data element that is passed in per globe once data is bound to the globe template. In this code example, each data element can be used to create a path for a texture for each globe.
<br />
<br />
<h3>
Binding data to the globe template</h3>
<br />
The globes can be rendered by binding data, appending DOM elements to contain them, and calling globe, which refers to the object previously initialized with a call to
<pre class="inline">d3.gl.globe()</pre>
:
<br />
<pre class="prettyprint lang-javascript">var data = ['earth', 'moon'];
d3.select("body").selectAll("span")
.data(data)
.enter()
.append("span")
.call(globe);
</pre>
<br />
This is analogous to the
<pre class="inline">D3.js</pre>
style for adding elements bound to data. The above code will pass the bound data, which is the array
<pre class="inline">['earth', 'moon']</pre>
, when it invokes
<pre class="inline">.call(globe)</pre>
.
<br />
<br />
Then for each element in the data that is passed in, a new D3
<pre class="inline">globe</pre>
object is created to be rendered on screen. Each element in the data array will be passed in as argument. In this example, the first globe is passed in
<pre class="inline">'earth'</pre>
and the second
<pre class="inline">'moon'</pre>
, which are used to determine the texture of each globe.
<br />
<br />
<h3>
Demo</h3>
<br />
<a href="http://bl.ocks.org/4056536">Hello Earth</a>
<br />
<br />
<h3>
Implementation</h3>
<br />
The conventions for this API were inspired by Michael Bostock's essay <a href="http://bost.ocks.org/mike/chart/">“Toward Reusable Charts,”</a> which encourages the use of closures with getter and setter methods and outlines specific design patterns. Thus
<pre class="inline">d3.gl.globe</pre>
is a closure with properties such as
<pre class="inline">width, height, texture, transparency, zoom, and rotation.</pre>
It supports method chaining, which means each setter returns the closure.
<br />
<br />
When
<pre class="inline">.call(globe)</pre>
is invoked, a function is called for each data element in the bound data that evaluates the appropriate values for the properties of the globe -
<pre class="inline">width, height, texture, transparency, zoom, rotation</pre>
.
<br />
<br />
WebGL is initialized once per globe using Three.js. Unlike D3.js, the render function is is called 60 frames per second using <a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">RequestAnimationFrame</a>. Since each property of the globe is evaluated per frame, any change will be reflected immediately.
<br><br>
<a href="http://sugar-and-spce.blogspot.com/2012/12/d3gl-tutorials-00-getting-started.html">← Prev</a>
<a href="http://sugar-and-spce.blogspot.com/2012/12/d3gl-tutorials-02-binding-data-to-each.html">Next →</a><br><br>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8755595705317534325.post-1888641337569084282012-12-27T04:38:00.000-08:002012-12-28T21:44:48.698-08:00D3GL Tutorials 00: Getting startedIn this tutorial, we will go over how to incorporate D3GL into your webpage.
<br />
<br />
<h3>
Linking D3GL
</h3>
<br>
To get started with D3GL, first download D3GL <a href="http://dcpos.ch/d3gl/js/d3gl.min.js">here</a>, by right-clicking the link and choosing "Save as..." or something similar.
<br />
<br />
Alternatively, you can add the following line between <br />
<pre class="inline"><head></pre>
and <br />
<pre class="inline"></head></pre>
:
<br />
<pre class="prettyprint lang-html"><script type="text/javascript" src="http://dcpos.ch/d3gl/js/d3gl.min.js"></script></pre>
<br />
I will keep the above links updated, but keep in mind that D3GL is under heavy development, so the latest (un-minified) version lives <a href="https://github.com/jiwonkim/d3gl/blob/master/js/d3gl.js">here on Github</a>.
<br />
<br />
<h3>
Running a local server
</h3>
<br>
When you are developing locally, your browser may raise something along the lines of<br />
<pre class="inline">XMLHttpRequest cannot load the url Origin null is not allowed by Access-Control-Allow-Origin</pre>
when you try to read files out of the local file system. To avoid this, you can run a local web server. I find that a simple solution is to run Python's built-in server:
<br />
<pre class="prettyprint">python -m SimpleHTTPServer 8888 &</pre>
<br />
... after which you can access <br />
<pre class="inline">http://localhost:8888/</pre>
.
<br />
<br />
If you are using a Mac, I find that <a href="http://www.mamp.info/">MAMP</a> works beautifully.
<br />
<br />
<h3>Using D3GL</h3>
<br>
Now that you have linked D3GL and run a local server, you can use<br />
<pre class="inline">d3.gl.globe</pre>
in your code:
<br />
<pre class="prettyprint lang=javascript"><script type="text/javascript">
$(function(){
// use d3.gl to create a beautiful visualization
});
</script>
</pre>
<br />
<a href="http://sugar-and-spce.blogspot.com/2012/12/d3gl-tutorials-01-creating-globes.html">Next →</a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8755595705317534325.post-700091834464244112012-12-15T18:36:00.000-08:002013-01-18T23:42:44.584-08:00D3GL Tutorials<span style="font-family: inherit;">My friend <a href="http://dcpos.ch/" target="_blank">Daniel Posch</a> and I created D3GL as a final project for CS 448B at Stanford, a course titled Data Visualization. Our motivation stemmed from when we were working on an interactive visualization assignment that involved using raw WebGL. It was painful. We decided that it shouldn't be so.</span><br />
<span style="font-family: inherit;"><br />
D3GL is a D3 plug-in library that lets users control WebGL elements and bind data in an intuitive way. WebGL is a powerful but unwieldy Javascript library, the only way to do hardware- accelerated 3D rendering in the browser. It is a thin wrapper on a low-level C API called OpenGL ES. D3GL abstracts away the setup and provides the user with a streamlined interface to render and manipulate data visualizations. It currently supports interactions including zoom, rotation, and selection with various data primitives such as points, user-defined overlays, shapes, and bars on globes.</span><br />
<span style="font-family: inherit;"><br />
D3GL is under heavy development at the moment, and you can check out the most recent developments at <a href="http://github.com/jiwonkim/d3gl">http://github.com/jiwonkim/d3gl</a>.</span><br />
<span style="font-family: inherit;"><br />
You can check out the official D3GL site at <a href="http://d3gl.org/">http://d3gl.org</a>.</span><br />
<span style="font-family: inherit;">Check out D3.js, the library that D3GL builds on top of, at <a href="http://d3js.org/">http://d3js.org</a>.</span><br />
<span style="font-family: inherit;"><br />
These tutorials for D3GL are aimed for people familiar with JavaScript, HTML, and CSS, although experience with D3 is unnecessary. The tutorials will cover the following:</span><br />
<span style="font-family: inherit;"><br /></span>
<br />
<div id="normal-links">
<span style="font-family: inherit;"><a href="http://sugar-and-spce.blogspot.com/2012/12/d3gl-tutorials-00-getting-started.html" target="_blank">00. Getting started</a></span><br />
<span style="font-family: inherit;"><a href="http://sugar-and-spce.blogspot.com/2012/12/d3gl-tutorials-01-creating-globes.html" target="_blank">01. Creating globes</a></span><br />
<span style="font-family: inherit;"><a href="http://sugar-and-spce.blogspot.com/2012/12/d3gl-tutorials-02-binding-data-to-each.html" target="_blank">02. Binding data to each globe</a></span><br />
<span style="font-family: inherit;"><a href="http://sugar-and-spce.blogspot.com/2013/01/d3gl-tutorials-03-intro-to-data.html" target="_blank">03. Intro to data primitives with Points</a></span><br />
<span style="font-family: inherit;">04. Intro to mouse events with Points</span><br />
<span style="font-family: inherit;">05. The Painter primitive</span><br />
<span style="font-family: inherit;">06. Interacting with Painter</span><br />
<span style="font-family: inherit;">07. The Bars primitive</span><br />
<span style="font-family: inherit;">08. Interacting with Bars</span><br />
<span style="font-family: inherit;">09. The Shapes primitive</span><br />
<span style="font-family: inherit;">10. Binding data to Shapes using default "countries" shape</span><br />
<span style="font-family: inherit;">11. Creating a custom shape texture for Shapes</span><br />
<span style="font-family: inherit;">12. The Arcs primitive</span><br />
<span style="font-family: inherit;">13. Interacting with arcs</span><br />
<span style="font-family: inherit;">14. Creating models with D3GL Model</span><br />
<span style="font-family: inherit;">15. Interacting with models</span></div>
<span style="font-family: inherit;"><br />
As more data visualization types and primitives are added to D3GL, the list will grow. Existing tutorials will be linked - unlinked tutorials are yet to be written.</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">In addition to explaining basic D3GL concepts and usages, these tutorials will also discuss the internal implementation of each feature for those who are interested in adding to the open-source development of D3GL.</span><br><br>Unknownnoreply@blogger.com0