D3 isn't just for charts and graphs. It can be used for all sorts of drawing tasks. Learn how to modify an existing UI – in this case a Bootstrap calendar compnent – using D3 "from the outside".

https://app.egghead.io/api/v1/lessons/d3-using-d3-to-augment-an-existing-ui/subtitles

Using D3 to augment an existing UI

[00:00] I recently had a project where I needed a calendar component that was going to be pretty central to the project. If possible, I wanted to avoid building my own. I ended up finding this really great one based on Bootstrap, that has the ability to have dates and events on dates.

[00:20] I thought it was going to be exactly what I needed, so I went through the exercise of modifying it. I want to show you how to do that in this video. This is the GitHub repo that this calendar lives in. Again, it's great. If you need something and this fits the bill, I would highly recommend it.

[00:36] I have created a simplified version here just to conserve space and make things simpler. What I've done is I've stripped down a lot of the markup in the HTML file, but really all I've added to it is just these two tags.

[00:52] I'm including d3, and then I'm including our demo script that we're going to work with here. You can see that all I have in this script right now is d3.selectAll using this CSS selector of cal-day-inmonth, and then I'm setting the background color to orange.

[01:11] You can see here that that has actually worked. That cal-day-inmonth selection, if we inspect here, we can see this div has that class on it. The inmonth is to denote the days that are actually in the month you're looking at versus days from the previous month, here. These are called cal-day-outmonth, so you could style those as well. Let's close this. 

[01:38] Here, you can see that it is working exactly as we would expect, where it's just setting the background color statically. We could change that value, save it, go refresh. There, everything's light blue. That's all well and good, but what I needed to do was actually tie these things to some data.

[01:59] Before I actually tie it to data, I just want to show you how we can integrate a colorScale here. If we create a colorScale just using d3.scale.linear and give it a domain running from 0to 30. We're cheating here because we know the range. It's actually 31 days, so let's change it to that. That's our domain, and then our range will be from white to green.

[02:23] What we're going to do now is just set the background color using this function. If you remember, the first argument to a function is the datum, and the second one is the index. We're just going to use the index here. The position in the month, we're going to pass that to the colorScale.

[02:40] Depending on its position between 0and 31, it's going to give us a color somewhere between white and green. If we save that and go refresh this now, you can see that we get a nice progression from white to green as we move through the month.

[02:55] For the next step, we'll actually create some data and show that on the chart. I'm just going to create an array of the length that I know we need and run it through a mapping function. All this function does is it's going to create a random number and round it. 

[03:12] If that happens to get rounded up to one, we'll just use another random number. If it gets rounded down to zero, we're going to get a negative number. Basically, our data is going to range from -1 all the way up to positive 1 as our potential data domain there.

[03:30] You can see that I've also adjusted the range to have three elements to match our domain. Anything between -1 and 0is going to fall somewhere between red and white. Anything from zero to one will be between white and green. I've updated the background-color function here to pass the datum to the colorScale, rather than the index. 

[03:54] If we save this and go refresh, we have a nice Christmas-themed, data-driven calendar where each day is colored based on a piece of data behind it. You can then actually create a meaningful calendar that communicates data to your users at a glance.


Using D3 to augment an existing UI

Share this video with your friends