Tag Archives: d3

While playing with the brush event yesterday, I noticed that when I click and clear the brush, the line chart of the focus area stays the same. I would expect it to reset to the full dataset. So I added the reset component in the brushed function. Reset after clearing the selection Adding Handle ThisContinue reading “Day 19: Brush Handles”

Today I worked on adding brush to the line chart (the one we created on Day 11). The brush functionality can allow users to zoom in on the data in the main chart while keeping the context of the timeline. Layout What we need to do first is to set up the focus and contextContinue reading “Day 18: D3 Brush”

Today I learned a new trick from fullstack D3 course. It’s called Voronoi diagram, and it will help the hovering event to show the tooltip for the scatter plot. Users do not need to hover exactly on the dot. To show what I mean, see the gif below. As long as the mouse is overContinue reading “Day 17: Voronoi Diagram”

Yesterday, we have already prepared the data for this bar chart race. Then we are ready to create this chart. I found two examples to follow: The idea is that we populate a new bar chart at a certain interval. In this example, we will update the bar chart every month. The structure is thatContinue reading “Day 16: Bar Chart Race”

Today, I signed the contract for an apartment in Utrecht. Yay! Often people ask me: “Why do you move to Utrecht?” There are so many factors. I like the vibe of the city; I have many friends there; It’s close to Amsterdam; It’s the center of the Netherlands and it has the biggest train stationContinue reading “Day 14: Why do I move to Utrecht?”

Adding animation to the line chart is also different from the scatter plot. Below is how we created the animation for the scatter plot. We set the initial position and the end position of the dot and put the transition between the “cx” and “cy” attributes. The animation I wanted to create is to growContinue reading “Day 13: Adding Animation to Line Charts”

I thought adding a tooltip to a line chart will be easy since I already learned to add a tooltip to a scatter plot. However, this process is more complicated than I thought. The reason is that each dot in the scatter plot consists of only one circle, but the line chart draws the lineContinue reading “Day 12: Tooltip in Line Charts”

A line chart is usually used for showing the trends over time. To create a line chart, there are two things that changed compared with the scatter plot we created before. Work with Date The x-axis is usually the date. To create the date axis, we will need to use the “d3.timeParse()” and “d3.scaleTime()” toContinue reading “Day 11: Line Chart”

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”

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”