Today I combined two of my previous charts and made a dashboard with interactions. When you click on the donut chart, it will highlight the days in the heatmap. This is achieved by binding the d.icon with both the donut chart and the heatmap. Here are the steps: The complete codes can be found here.Continue reading “Day 30: Dashboard with Click Interaction”
Tag Archives: d3
Day 29: Table
I modified the Table example from Fullstack D3 today. What I changed: It’s very interesting to add SVG elements to the table. Below you can find different types of columns we can add to the table, text, SVG, image, and symbol. Below are the code to create the table header and update the table body.Continue reading “Day 29: Table”
Day 28: Sankey Chart
I modified the animated Sankey chart example from the Fullstack D3 course to create a static Sankey Chart. I would say the part that cost me more time is to prepare the dataset. Here is what the sankeyData looks like. Then creating a Sankey chart is easy to use d3.sankey( ). Similar to the forceContinue reading “Day 28: Sankey Chart”
Day 27: Donut Chart
Continue working with the Amsterdam weather data, I created a donut chart today to see how many days are in each weather condition. There are 201 rainy days in 2022! Arc & Pie To create a donut chart, we need the dimension of weather conditions and their frequency. In the weather dataset, the icon isContinue reading “Day 27: Donut Chart”
Day 26: Heatmap
I was wondering how rainy 2022 was in Amsterdam. It was quite dry last year. I find a dataset here. The idea to create a heat map is to position the rectangles. I want to arrange the days by month and day. Therefore, we will need to get the x and y according to theContinue reading “Day 26: Heatmap”
Day 25: 365 Days of Memories
Here is the radar chart I created from the 5,061 photos I took in 2019. It’s interesting that I also found a font family called Dancing Script. 😛 It’s strange that I have so many photos taken from midnight to 6 AM. I figured out that I set the time of my camera wrong whileContinue reading “Day 25: 365 Days of Memories”
Day 23: 3D Force Layout
I found this 3D Force Layout really cool to play with. It’s very easy to set up as well. Add the following to the <head> in the HTML file. After reading the file, use the following code to generate a D3 force layout. Codes.
Day 22: Adding Image with Pattern
On day 6, I was trying to add an image while hovering over the circle in my force-layout chart. However, I couldn’t make it work. From time to time, I try to fix it. Today, I finally made it work. Append Image to Circle In the beginning, I simply selected the circles and tried toContinue reading “Day 22: Adding Image with Pattern”
Day 21: Choropleth map in D3
I wanted to create a choropleth map today. In the geoJSON file, we can find the land area and water area in the county. It can make sense to color the county by the water area. I found an example in Basic choropleth map in d3.js. The code is very simple, we only need toContinue reading “Day 21: Choropleth map in D3”
Day 20: Create a map in D3
Create a map using D3.js
Qichun Dai 