Something Personal Yet Public
I just finished cooking bubur cha-cha. Again, it is not as nice as the one in Penang. It is one of my favorite dish during Chinese New Year. It is usually served during the last day (15th) of Chinese New Year for Hokkiens. This version was just sweet potato, sago and black-eyed pea. It is too watery. I will put less water and coconut milk next time.
If you are having problem on opening ‘Finder’ app, solution is here. First, ‘command + option + esc’, then click on ‘Finder’, lastly select ‘relaunch’ button.
Another solution is uncheck ‘Reopen windows when logging back in’ on ‘Shut Down…’ dialog.
I just updated my Mac with OS X Lion. After playing a while, I realise I can’t find ‘Macintosh HD’. It no longer at left-side bar in Finder. I need it. So I came out with a solution as below.
Now, I have ‘Macintosh HD’ folder as favorited folder in Finder.
Another solution is open ‘Finder Preferences’, select / check ‘Hard disks’ on ‘Sidebar’ tab under ‘Devices’ section.
First Protovis, now D3. Both are works from Mike Bostock. Both are data visualization JavaScript libraries.
This tutorial we’re going to create a basic dot graph with scalable y-axis. It is adapted from one of the examples in D3, dot.html.
First of all, we create a default html that contains a div for input button and another for the graph. We also link the d3 JavaScript library. The rest of tutorial will be concentrate of JavaScript code that will be written after the comment, “Scale graph code here.”
We need to generate some random data using Math.random(). We create randomData function for returning a list of ten x and y values. For example, [{“x”: 0, “y”: 0.3}, {“x”: 0.1, “y”: 0.4}, ...]
For this tutorial, only y axis values are random. We need to get maximum value of the y axis using d3.max, in order to scale the y axis based on the maximum value of the data.
Sometime, the maximum value doesn’t suitable for domain range in scale axis. For example, 0.33333. Mike suggested a method to increase the size of domain to next highest rounded value.
Now, we determine the size of the graph, which are w and h for width and height. We need a svg container for the graph. We will append it inside #mainGraph div with width and height attributes. This is optional, which offset the graph with modify coordinate using translate in transform in a group. The <g> element is used to group SVG shapes together. For example, <g transform="translate(50,50)"> will translate coordinate ["x": 50, "y": 50] as zero in the that group.
Now, we add both x and y axises line grids and labels. We also notice that d3 supports css style. We make “#ccc” colour stroke style for both x and y line grids.
This is the last step for the dots graph. All the dots are paths. What kind of symbols of the path is determined by d attribute. We also add title attribute in the path, so that when mouse is hovering the dots, tool tip is shown. Color of the dots fill is changed too. After you completed this steps, we will see a basic dot graph.
This step is explaining what will happen after update button is clicked. Before that, we need to add onclick attribute in button type input with the update function name. For example, <input name="updateButton" type="button" value="Update" onclick="updateData()"/>. In the update function, we will get a new data list from randomData function. Then get the maximum ceil value, which is similar in initData function. Since, we are only want to rescale the y axis, we will select g.y. Make sure to select their parent, #mainGraph svg g, first before selecting them, in order to append the extra line grid in the right parent. For updating the line grids and labels, we are going to use update, enter and exit selections. Since we are append new line grid and label, we need to set all the attributes that are needed. On the other hand, we only update attributes that need to be changes in update and exit selections. Lastly, don’t forget about updating the dots data too.
This tutorial is written based on my personal understanding on D3. I am still learning. Any feedback are welcome.
Ricardo mentions transitioning scales example, Date Ticks by mbostock.
Tonight dinner is spicy pumpkin risotto. The recipe was from the italian gardener. our favourite food blog, King Arthur Flour – Baking Banter.
On week 5 track 2, we continue study chapter 12 and 13 on Eloquent Javascript. Both chapters are related to document-object model and browser events.
firstChild and lastChild properties. This can work, but it is verbose and easy to break ― if we add another node at the start of our document, document.body.firstChild no longer refers to the h1 element, and code which assumes it does will go wrong. On top of that, some browsers will add text-nodes for things like spaces and newlines between tags, while others do not, so that the exact layout of the DOM tree can vary. An alternative to this is to give elements that you need to have access to an id attribute. We can get the element by calling getElementById function.center to center them horizontally, or font to change the font style or colour. Most of the time, this meant that if you wanted the paragraphs or the tables in your document to look a certain way, you had to add a bunch of attributes and tags to every single one of them. This quickly adds a lot of noise to such documents, and makes them very painful to write or change by hand.p elements is not what you want, so classes can be used to distinguish between them. And this is also the meaning of the className property which was briefly mentioned for the setNodeAttribute function. The style attribute can be used to add a piece of style directly to an element.style property, which can be used to manipulate the style of that node, and that there are a few kinds of styles that can be used to make nodes do extraordinary things.asHTML which, when given a DOM node, produces a string representing the HTML text for that node and its children. You may ignore attributes, just show nodes as escapeHTML function from chapter 10 is available to properly escape the content of text nodes. Hint: Recursion!removeElement which removes the DOM node it is given as an argument from its parent node.registerEventHandler to wrap the incompatibilities of these two models. It takes three arguments: first a DOM node that the handler should be attached to, then the name of the event type, such as “click” or “keypress“, and finally the handler function. To determine which method should be called, look for the methods themselves ― if the DOM node has a method called attachEvent, you may assume that this is the correct method. Note that this is much preferable to directly checking whether the browser is Internet Explorer. If a new browser arrives which uses Internet Explorer’s model, or Internet Explorer suddenly switches to the standard model, the code will still work. Both are rather unlikely, of course, but doing something in a smart way never hurts.On this week, we continue watching ‘An Incovenient API – The Theory of the DOM’ part 2 as below by Douglas Crockford
Douglas Crockford: "Theory of the DOM" (2 of 3) @ Yahoo! Video
Since track 1 is the same as track 2 in week 5, the answer for the homework will be in track 2 post.
Since track 2 is the subset for track 1 in week 4, so we combine them both to this post. On this week, beside watching ‘An Incovenient API – The Theory of the DOM’ as below by Douglas Crockford, we also need to reading these articles below on understanding on DOM.
Douglas Crockford: "Theory of the DOM " (1 of 3) @ Yahoo! Video
nodeName property is “#text”.On track 2 week 3, we are continuing reading Eloquent Javascript ebook on chapter 6: Functional Programming and JavaScript code style.
Week 3 homework for track 2 are the same as track 1. Here will be the answers that is recommended by JSLint for exercises 6.1 to 6.5. Track 1 will be showing the original answer for exercises 6.1 to 6.5.
countZeroes, which takes an array of numbers as its argument and returns the amount of zeroes that occur in it. Use reduce. Then, write the higher-order function count, which takes an array and a test function as arguments, and returns the amount of elements in the array for which the test function returned true. Re-implement countZeroes using this function.processParagraph that, when given a paragraph string as its argument, checks whether this paragraph is a header. If it is, it strips of the ‘%’ characters and counts their number. Then, it returns an object with two properties, content, which contains the text inside the paragraph, and type, which contains the tag that this paragraph must be wrapped in, “p” for regular paragraphs, “h1″ for headers with one ‘%’, and “hX” for headers with X ‘%’ characters. Remember that strings have a charAt method that can be used to look at a specific character inside them.splitParagraph which, given a paragraph string, returns an array of paragraph fragments. Think of a good way to represent the fragments. The method indexOf, which searches for a character or sub-string in a string and returns its position, or -1 if not found, will probably be useful in some way here. This is a tricky algorithm, and there are many not-quite-correct or way-too-long ways to describe it. If you run into problems, just think about it for a minute. Try to write inner functions that perform the smaller actions that make up the algorithm.image function which, when given the location of an image file, will create an img HTML element.renderFragment, and use that to implement another function renderParagraph, which takes a paragraph object (with the footnotes already filtered out), and produces the correct HTML element (which might be a paragraph or a header, depending on the type property of the paragraph object). This function might come in useful for rendering the footnote references:sup tag will show its content as ‘superscript’, which means it will be smaller and a little higher than other text. The target of the link will be something like "#footnote1". Links that contain a ‘#’ character refer to ‘anchors’ within a page, and in this case we will use them to make it so that clicking on the footnote link will take the reader to the bottom of the page, where the footnotes live. The tag to render emphasized fragments with is em, and normal text can be rendered without any extra tags.On track 1 week 3, we are continuing understanding JavaScript through Douglas Crockford’ video 3 and video 4 as below.
Douglas Crockford: "The JavaScript Programming Language"/3 of 4 @ Yahoo! Video
Douglas Crockford: "The JavaScript Programming Language"/4 of 4 @ Yahoo! Video
arguments property to verify on each arguments. When a function is invoked, in addition to its parameters, it also gets a special parameter called arguments. It contains all of the arguments from the invocation. It is an array-like object. We can use arguments.length to verify the total of arguments are passed.this is an extra parameter. Its value depends on the calling form. It also gives methods access to their objects and it is bound at invocation time. If the invocation form is function, functionObject(arguments), then this is the global object. If the invocation form is method, thisObject.methodName(arguments), then this is the object. Finally, if the invocation form is constructor, new functionObject(arguments), this is the new object.cast operator converts one type into another. In C, its general form is (type) variable. Because it uses other way, for example using parseInt() function to convert string type to integer type.Week 3 homework for track 1 are the same as track 2. Here will be exercises 6.1 to 6.5. Track 2 will be showing the answers that is recommended by JSLint.
countZeroes, which takes an array of numbers as its argument and returns the amount of zeroes that occur in it. Use reduce. Then, write the higher-order function count, which takes an array and a test function as arguments, and returns the amount of elements in the array for which the test function returned true. Re-implement countZeroes using this function.processParagraph that, when given a paragraph string as its argument, checks whether this paragraph is a header. If it is, it strips of the ‘%’ characters and counts their number. Then, it returns an object with two properties, content, which contains the text inside the paragraph, and type, which contains the tag that this paragraph must be wrapped in, “p” for regular paragraphs, “h1″ for headers with one ‘%’, and “hX” for headers with X ‘%’ characters. Remember that strings have a charAt method that can be used to look at a specific character inside them.splitParagraph which, given a paragraph string, returns an array of paragraph fragments. Think of a good way to represent the fragments. The method indexOf, which searches for a character or sub-string in a string and returns its position, or -1 if not found, will probably be useful in some way here. This is a tricky algorithm, and there are many not-quite-correct or way-too-long ways to describe it. If you run into problems, just think about it for a minute. Try to write inner functions that perform the smaller actions that make up the algorithm.image function which, when given the location of an image file, will create an img HTML element.renderFragment, and use that to implement another function renderParagraph, which takes a paragraph object (with the footnotes already filtered out), and produces the correct HTML element (which might be a paragraph or a header, depending on the type property of the paragraph object). This function might come in useful for rendering the footnote references:sup tag will show its content as ‘superscript’, which means it will be smaller and a little higher than other text. The target of the link will be something like "#footnote1". Links that contain a ‘#’ character refer to ‘anchors’ within a page, and in this case we will use them to make it so that clicking on the footnote link will take the reader to the bottom of the page, where the footnotes live. The tag to render emphasized fragments with is em, and normal text can be rendered without any extra tags.