1
00:00:02.00 --> 00:00:03.03
- [Instructor] Hi, this is Chris Converse,

2
00:00:03.03 --> 00:00:04.09
and in this episode
we'll create a pie chart

3
00:00:04.09 --> 00:00:06.08
using only HTML and CSS,

4
00:00:06.08 --> 00:00:09.03
by combining the clip and
border radius properties,

5
00:00:09.03 --> 00:00:11.04
in order to create the wedge shapes.

6
00:00:11.04 --> 00:00:13.00
So, if you'd like to follow along with me,

7
00:00:13.00 --> 00:00:14.04
download the exercise files,

8
00:00:14.04 --> 00:00:17.02
and I'll begin by opening
the HTML and CSS files

9
00:00:17.02 --> 00:00:18.09
in a text editor.

10
00:00:18.09 --> 00:00:21.03
Now for this project, we're
going to set most of the CSS

11
00:00:21.03 --> 00:00:23.03
in a separate CSS file.

12
00:00:23.03 --> 00:00:25.05
In the HTML file, we're going
to set a couple of properties

13
00:00:25.05 --> 00:00:27.09
that are going to relate
specifically to the data.

14
00:00:27.09 --> 00:00:29.04
This way, if you want to change the data,

15
00:00:29.04 --> 00:00:31.08
you can change that
information in the HTML

16
00:00:31.08 --> 00:00:33.00
and if you want to change the style,

17
00:00:33.00 --> 00:00:35.03
we can change it in the CSS.

18
00:00:35.03 --> 00:00:37.05
Now, in my text editor, I have this set up

19
00:00:37.05 --> 00:00:39.04
to take up the left-hand
side of the screen,

20
00:00:39.04 --> 00:00:41.09
with the top area showing the HTML

21
00:00:41.09 --> 00:00:45.03
and the bottom area showing the CSS.

22
00:00:45.03 --> 00:00:46.08
And on the right-hand
side, I have the design,

23
00:00:46.08 --> 00:00:48.05
showing in a browser.

24
00:00:48.05 --> 00:00:49.08
And so, we're going to
start by taking a look

25
00:00:49.08 --> 00:00:52.01
at some of the HTML that
I've already set up.

26
00:00:52.01 --> 00:00:54.06
So we have a figure
element within our body.

27
00:00:54.06 --> 00:00:56.04
Inside of the figure
element, I have a div,

28
00:00:56.04 --> 00:00:58.00
with a class of pie chart,

29
00:00:58.00 --> 00:00:59.09
and inside of that div, I have another div

30
00:00:59.09 --> 00:01:01.09
with a class of base.

31
00:01:01.09 --> 00:01:04.02
So right now, I have instyled
the appearance of that,

32
00:01:04.02 --> 00:01:07.04
so right now, we just see
a blank box in the preview.

33
00:01:07.04 --> 00:01:10.04
So over in the CSS, let's scroll down.

34
00:01:10.04 --> 00:01:12.00
At the very bottom, I have a selector

35
00:01:12.00 --> 00:01:14.07
that's targeting the div
with the class of pie chart,

36
00:01:14.07 --> 00:01:17.01
up here.

37
00:01:17.01 --> 00:01:18.05
And the first thing I want to do is

38
00:01:18.05 --> 00:01:20.07
make all of the divs inside
of the pie chart class

39
00:01:20.07 --> 00:01:23.06
into circles.

40
00:01:23.06 --> 00:01:27.03
So we'll start by typing ".piechart,"

41
00:01:27.03 --> 00:01:33.01
then a space, then "div,"
put in our brackets.

42
00:01:33.01 --> 00:01:35.08
Inside, we're going to
set a width property.

43
00:01:35.08 --> 00:01:38.06
We're going to set the width to inherit.

44
00:01:38.06 --> 00:01:40.05
This way, the width of the divs

45
00:01:40.05 --> 00:01:42.08
will always conform to
the size we set here

46
00:01:42.08 --> 00:01:43.09
in the piechart.

47
00:01:43.09 --> 00:01:45.03
So if we ever want to change the size,

48
00:01:45.03 --> 00:01:49.09
we only change it in one spot.

49
00:01:49.09 --> 00:01:51.05
Next, let's set a height property.

50
00:01:51.05 --> 00:01:54.04
We're going to set this
to inherit as well.

51
00:01:54.04 --> 00:01:57.00
Down the next line, we're going
to set a position property.

52
00:01:57.00 --> 00:02:00.09
We're going to set this to absolute.

53
00:02:00.09 --> 00:02:03.01
Next, we'll set a top property.

54
00:02:03.01 --> 00:02:05.05
Set that to 0 pixels.

55
00:02:05.05 --> 00:02:07.05
We'll also set a left property.

56
00:02:07.05 --> 00:02:09.08
We'll set that to 0 pixels.

57
00:02:09.08 --> 00:02:13.07
And then finally, we'll
set a border radius,

58
00:02:13.07 --> 00:02:18.03
and we're going to set that to 50%.

59
00:02:18.03 --> 00:02:20.02
So with those properties set up,

60
00:02:20.02 --> 00:02:21.07
we're going to scroll down a little bit.

61
00:02:21.07 --> 00:02:27.00
Now I'm going to target the
div with the class of base.

62
00:02:27.00 --> 00:02:31.01
So we'll start with .piechart .base,

63
00:02:31.01 --> 00:02:33.02
put in our brackets

64
00:02:33.02 --> 00:02:36.00
and then we'll set a background color.

65
00:02:36.00 --> 00:02:39.05
We use the RGBA color space.

66
00:02:39.05 --> 00:02:42.00
Let's come in here and set 255 for red,

67
00:02:42.00 --> 00:02:45.06
comma, 255 for green, comma, 255 for blue,

68
00:02:45.06 --> 00:02:47.01
and then to make this semi-transparent,

69
00:02:47.01 --> 00:02:50.00
we'll set this to 0.3.

70
00:02:50.00 --> 00:02:52.00
With those in place, save your CSS

71
00:02:52.00 --> 00:02:53.01
and we'll now see in the browser,

72
00:02:53.01 --> 00:02:56.03
we have a semi-transparent white circle.

73
00:02:56.03 --> 00:02:57.09
And now, to create our first wedge,

74
00:02:57.09 --> 00:03:01.04
we're going to need some
additional divs in the HTML file.

75
00:03:01.04 --> 00:03:02.08
So up here in the HTML,

76
00:03:02.08 --> 00:03:05.00
after the div with the class of base,

77
00:03:05.00 --> 00:03:06.05
let's hit a Return.

78
00:03:06.05 --> 00:03:09.08
Let's add another div, then a space.

79
00:03:09.08 --> 00:03:13.04
We'll set a class of slice,

80
00:03:13.04 --> 00:03:17.06
then we'll end the div, and the element.

81
00:03:17.06 --> 00:03:19.07
Let's split this div open,

82
00:03:19.07 --> 00:03:21.02
and then inside of this div,

83
00:03:21.02 --> 00:03:25.00
we're going to add another div.

84
00:03:25.00 --> 00:03:28.06
So beginning tag and then ending tag.

85
00:03:28.06 --> 00:03:29.07
And now as I mentioned before,

86
00:03:29.07 --> 00:03:31.09
we're going to want to set
some of our CSS properties

87
00:03:31.09 --> 00:03:33.03
within the HTML file,

88
00:03:33.03 --> 00:03:35.03
so that we can change our content later,

89
00:03:35.03 --> 00:03:36.06
and one of those properties is going to be

90
00:03:36.06 --> 00:03:38.08
the color of the slices.

91
00:03:38.08 --> 00:03:40.03
So let's go back into the opening tag

92
00:03:40.03 --> 00:03:41.09
for the div we just created.

93
00:03:41.09 --> 00:03:45.06
Let's hit a space, let's
add a style attribute.

94
00:03:45.06 --> 00:03:49.05
So, style equals, two quotes.

95
00:03:49.05 --> 00:03:51.06
Let's come in here and
set a background color.

96
00:03:51.06 --> 00:03:57.03
So background-color:#fff, for white,

97
00:03:57.03 --> 00:03:59.02
and then a semi-colon.

98
00:03:59.02 --> 00:04:01.04
Save your HTML and we'll
now see in the browser

99
00:04:01.04 --> 00:04:04.09
that div element is a full white circle.

100
00:04:04.09 --> 00:04:07.00
So now let's conform this to a half circle

101
00:04:07.00 --> 00:04:08.04
so that we can create wedge shapes

102
00:04:08.04 --> 00:04:12.05
by adding some additional CSS
properties in the CSS file.

103
00:04:12.05 --> 00:04:16.02
So back in our CSS file,

104
00:04:16.02 --> 00:04:20.02
let's type .piechart, then a space,

105
00:04:20.02 --> 00:04:22.06
then we'll target the slice class,

106
00:04:22.06 --> 00:04:24.09
so we'll type .slice,

107
00:04:24.09 --> 00:04:26.09
then a comma, we're going
to add a second selector

108
00:04:26.09 --> 00:04:28.07
to this CSS rule.

109
00:04:28.07 --> 00:04:31.03
Then on the next line,
we'll type .piechart again,

110
00:04:31.03 --> 00:04:35.00
then a space, .slice,

111
00:04:35.00 --> 00:04:39.07
then a space, then div,

112
00:04:39.07 --> 00:04:40.08
put in our curly brackets,

113
00:04:40.08 --> 00:04:42.05
let's split this open.

114
00:04:42.05 --> 00:04:47.08
We're going to set a top property
here of 0 pixels as well.

115
00:04:47.08 --> 00:04:51.06
Left property, 0 pixels.

116
00:04:51.06 --> 00:04:53.09
Then we're going to come down
here and set a clip property.

117
00:04:53.09 --> 00:04:57.09
So we'll type clip, colon, space,

118
00:04:57.09 --> 00:05:00.00
then we'll type rectangle,

119
00:05:00.00 --> 00:05:02.09
and that's abbreviated as rect,

120
00:05:02.09 --> 00:05:05.03
put in our parentheses, then a semi-colon.

121
00:05:05.03 --> 00:05:07.03
Inside of the parentheses,
we use short-hand style

122
00:05:07.03 --> 00:05:09.02
to clip our circle,

123
00:05:09.02 --> 00:05:13.03
so we'll start with 0
pixels, which is the top,

124
00:05:13.03 --> 00:05:16.03
then 90 pixels for the
right, comma, space,

125
00:05:16.03 --> 00:05:19.06
180 pixels for the bottom, comma, space,

126
00:05:19.06 --> 00:05:23.01
and then 0 pixels for the left.

127
00:05:23.01 --> 00:05:24.05
So when you have those
properties in place,

128
00:05:24.05 --> 00:05:26.08
save your CSS, go back to the browser

129
00:05:26.08 --> 00:05:28.09
and our full white circle
is now being clipped

130
00:05:28.09 --> 00:05:30.09
into a half circle.

131
00:05:30.09 --> 00:05:32.05
So now, with our half circle in place,

132
00:05:32.05 --> 00:05:35.00
we're going to need to set
up some rotation properties,

133
00:05:35.00 --> 00:05:37.06
using degrees to represent our data,

134
00:05:37.06 --> 00:05:38.07
and the first thing we'll need to do

135
00:05:38.07 --> 00:05:40.09
is figure out how many degrees of a circle

136
00:05:40.09 --> 00:05:42.07
represent our data,

137
00:05:42.07 --> 00:05:45.07
and we want this pie
chart to represent 75%,

138
00:05:45.07 --> 00:05:48.08
so what we'll do is
represent 75% as a decimal,

139
00:05:48.08 --> 00:05:50.07
which will be 0.75,

140
00:05:50.07 --> 00:05:53.02
then we'll multiply that by 360 degrees,

141
00:05:53.02 --> 00:05:56.00
giving us 270 degrees.

142
00:05:56.00 --> 00:05:58.06
Now with this CSS technique
of clipping a circle,

143
00:05:58.06 --> 00:06:01.09
the maximum size we can
represent with each wedge

144
00:06:01.09 --> 00:06:03.02
is only 180 degrees,

145
00:06:03.02 --> 00:06:05.06
so what we'll need to
do is use two wedges,

146
00:06:05.06 --> 00:06:07.06
one wedge at 180 degrees,

147
00:06:07.06 --> 00:06:12.03
and the other wedge at 90 degrees.

148
00:06:12.03 --> 00:06:13.04
So back in our text editor,

149
00:06:13.04 --> 00:06:15.04
let's first represent the 90 degree wedge

150
00:06:15.04 --> 00:06:18.00
so you can see how this effect is working.

151
00:06:18.00 --> 00:06:20.03
So back in our HTML, let's find the div

152
00:06:20.03 --> 00:06:23.08
that's inside of our div
with a class of slice.

153
00:06:23.08 --> 00:06:26.08
After our background property
inside of the style attribute,

154
00:06:26.08 --> 00:06:28.03
let's hit a space,

155
00:06:28.03 --> 00:06:35.03
and we're going to type
transform, colon, space,

156
00:06:35.03 --> 00:06:39.02
then we'll type "rotate,"
set a parenthesis

157
00:06:39.02 --> 00:06:40.07
and a semi-colon.

158
00:06:40.07 --> 00:06:42.04
Inside of the parenthesis for rotate,

159
00:06:42.04 --> 00:06:47.08
we're going to type 90
degrees, so "90deg".

160
00:06:47.08 --> 00:06:49.02
Hit Save in our HTML.

161
00:06:49.02 --> 00:06:52.02
We'll now see that the
inner div is rotating

162
00:06:52.02 --> 00:06:53.03
90 degrees,

163
00:06:53.03 --> 00:06:55.00
but the outer div is still clipping this

164
00:06:55.00 --> 00:06:57.09
within a half circle,

165
00:06:57.09 --> 00:07:00.05
and so now, we'll want to
rotate this entire slice

166
00:07:00.05 --> 00:07:01.04
all the way around,

167
00:07:01.04 --> 00:07:06.01
so that this edge here starts
at the 180 degree mark,

168
00:07:06.01 --> 00:07:08.01
so back to our HTML,

169
00:07:08.01 --> 00:07:10.02
let's find the div with
the class of slice,

170
00:07:10.02 --> 00:07:13.04
let's hit a space, we'll
add a style attribute,

171
00:07:13.04 --> 00:07:17.09
equals two quotes,

172
00:07:17.09 --> 00:07:20.09
type "transform," colon, space,

173
00:07:20.09 --> 00:07:24.08
"rotate," put in our
parentheses and a semi-colon,

174
00:07:24.08 --> 00:07:26.04
and the rotation property
here is going to be

175
00:07:26.04 --> 00:07:28.00
270 degrees.

176
00:07:28.00 --> 00:07:32.07
So "270deg," then hit Save.

177
00:07:32.07 --> 00:07:34.02
So now with our 90 degree wedge

178
00:07:34.02 --> 00:07:37.09
representing from 180 to 270 degrees,

179
00:07:37.09 --> 00:07:39.09
let's come back to our HTML,

180
00:07:39.09 --> 00:07:43.09
let's copy this entire slice,

181
00:07:43.09 --> 00:07:48.03
going to add this above
the one we just created,

182
00:07:48.03 --> 00:07:50.04
and now on this first div
with a class of slice,

183
00:07:50.04 --> 00:07:52.02
let's come in here and
change the transform

184
00:07:52.02 --> 00:07:56.05
from 270 to 180 degrees

185
00:07:56.05 --> 00:07:58.02
and let's come in here to the div inside

186
00:07:58.02 --> 00:07:59.09
of the first class of slice

187
00:07:59.09 --> 00:08:03.03
and change the rotation to 0.

188
00:08:03.03 --> 00:08:06.01
Save your HTML and now
back in the browser,

189
00:08:06.01 --> 00:08:08.09
the first div is taking
up the full half circle

190
00:08:08.09 --> 00:08:10.09
to represent 180 degrees,

191
00:08:10.09 --> 00:08:13.02
and then the second slice,
representing 90 degrees,

192
00:08:13.02 --> 00:08:15.07
starts where the 180 degree slice ends,

193
00:08:15.07 --> 00:08:20.01
bringing us all the way
around to 270 degrees.

194
00:08:20.01 --> 00:08:21.06
And now, by repeating this technique,

195
00:08:21.06 --> 00:08:23.01
you can represent any number of wedges

196
00:08:23.01 --> 00:08:25.02
in your pie chart,

197
00:08:25.02 --> 00:08:26.06
and now, if you'd like
to dive a little deeper

198
00:08:26.06 --> 00:08:27.08
into this technique

199
00:08:27.08 --> 00:08:29.04
or see a more graphical explanation

200
00:08:29.04 --> 00:08:31.06
of how the CSS rotation
and clipping properties

201
00:08:31.06 --> 00:08:32.04
are working,

202
00:08:32.04 --> 00:08:34.01
check out Pie Charts with CSS,

203
00:08:34.01 --> 00:08:36.06
which is also available
here in the library,

204
00:08:36.06 --> 00:08:38.05
and so with that, I'll
conclude this episode

205
00:08:38.05 --> 00:08:41.04
and as always, thanks for watching.