Let’s add the tooltip to our scatter plot today. On Day 5, we talked about the mouse event. To add a tooltip to the scatter plot, we will again use the mouse event. The idea is that we create the tooltip element and append it to our div, but we set the opacity to 0Continue reading “Day 10: Adding Tooltip”
Author Archives: Qichun Dai
Day 9: Animation
One thing cool about D3 is to add animations to the chart. Today, let’s add some animation to the dots. The logic is simple, we set a start status for the dot and an end status. In between these two statuses, we call “.transition().duration()”. Inside duration, we can set the duration in which the animationContinue reading “Day 9: Animation”
Day 8: Some Improvements
Recently I am following a Fullstack D3 course by Amelia Wattenberger, and I learned something useful to make yesterday’s scatter plot better. 🙂 Nice() First, we can add a nice() function to our axis. This “nice” function will round the domain value on the axis. Let’s see before and after adding “nice()”. Refactoring the XContinue reading “Day 8: Some Improvements”
Day 7: Scatter Plot
I modified the scatter plot from the scatter plot example from Observable. To create dots, we create circle elements and append them to our SVG element. The circle will need three attribute values to position it: cx, cy, and r. With the codes above, we will generate the dots. The next step will be addingContinue reading “Day 7: Scatter Plot”
Day 6: Size & Range
In the force layout, we don’t have an axis. However, in normal charts, we will have axes. To map our data to the x-axis and y-axis, we will need to figure out the canvas size and range of the d3 scale functions. First, we need to set the width and height of the SVG element.Continue reading “Day 6: Size & Range”
Day 5: Mouse Event
In the previous codes, we already have some events like dragging the node. Today, let’s add mouseover and mouseout events to the nodes. The codes are listed below and it’s not that difficult. However, I did spend quite a long time getting it to work today. The reason is that the examples I found onContinue reading “Day 5: Mouse Event”
Day 4: A Little Bit of CSS
Yesterday, we got some black nodes in our force layout. What if we want to color the nodes with the color of their houses? Also, it will be good to have a title to tell a little bit about what it is about. Let’s do this with some CSS. There are three types of CSSContinue reading “Day 4: A Little Bit of CSS”
Day 3: Copy-Paste-Cite
It’s easier to start with an example and modify the code. Yesterday, we used this Observable example to visualize the main characters in the four houses in Harry Potter. We can start by copying & pasting them to our main.js file. Of course, always give credit to the examples and cite the original place forContinue reading “Day 3: Copy-Paste-Cite”
Day 2: Get the Data
I wanted to build a force layout to represent an org chart. I found an example on Observable. Before digging into the code, we need to prepare the data first. Let’s visualize the characters of four houses in Harry Potter. I used Excel to prepare the JSON file, from where I copied the nodes andContinue reading “Day 2: Get the Data”
Day 1: Set Up localhost
There is a Chinese saying goes, The start of everything is the hardest. Since the start is already difficult, let’s keep it quite simple on our first day. We only need to install some software and type three lines of commands in the terminal. 🙂 It’s quite different from working with D3 than Power BIContinue reading “Day 1: Set Up localhost”
Qichun Dai 