Tag Archives: d3

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”

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”

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”

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”

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”

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”