Using images in D3 bubble charts (Part 1)
Using images in D3 bubble charts, Part 1 (SVG defs/patterns)
Transcript
all right in this video we're going to
learn how to put background images of
let's say people's faces onto a bubble
chart that looks like this so it's going
to take two bits the first bit is going
to be about how to do definitions in SVG
for reusable graphical components and
then the second part is how to apply
that to d3 so first off we have an SVG
page right here or a page with an SVG in
it usually when we're doing d3 we're
writing everything by a code but I just
thought it would be good to start off by
looking at the raw SVG and understanding
how everything gets applied so we have a
ton of circles here and then we have a
single lonely rectangle if we look at
our code if we scroll down down down
down down down down we will see those
circles and those rectangles right here
but the odd thing is look at all of this
other code that is inside of our SVG we
have a marker we have this linear
gradient we have a radial gradient we
have another linear gradient we have a
pattern and image but none of those
things are showing up despite the fact
that they are inside of our SVG so in
your SVG you can have something called
deaths definitions and these definitions
become reusable components that you can
use again and again and again so you can
apply a radial gradient or a linear
gradient to a circle or rectangle um you
can add a marker onto a line you can
have a pattern be the background of an
object so you know this marker is
supposed to be for a line but maybe I'll
add a line in later so if we look at
let's say this linear gradient the way
the linear gradient works is it is given
an x1 and an x2 and a y1 and a Y
- so the X 1 is zero and the y 1 is 0 so
that's top left and X 2 is 100% and Y 2
is 100% so it seems like this starts in
the upper left hand corner and then
moves down to the lower right hand
corner linear gradients these gradients
don't even matter because you're rarely
going to use a gradient because they're
always very unattractive gradients get
stops which means this is the color
right here on that is at 0% and this is
the color that is at 100% so your
gradient goes between this color and
this color now if we look at this
gradient we see that it has a name neon
gradient if we look at this next
gradient it has a name circle gradient
these are both IDs they should be unique
on the page now what we want to do is
right now this first circle has a fill
of red we can see it's a red circle
right there I would love it if they were
ugly gradient in the background so what
we can do is we think oh we know how to
refer to things by IDs right ID means
you get the little hashtag thing you get
the pound symbol so let's just take neon
gradients and say fill use the ID neon
gradient you're so excited that this is
going to work do you hit refresh and it
just turns black doesn't work at all the
thing that doesn't make sense about how
to use definitions in SVG is you need to
type URL around your selection neon
gradient get the thing that as an ID of
neon gradient
we're going to call it through this URL
it's not even a function why why why I
don't know but it really works so
anytime you create a definition you can
use it for the failures of the stroke to
use it for whatever it just takes the
code that's inside of here and apply
to your object so I had a circle and I
said hey take the fill of that circle
and fill it up with whatever is in neon
gradient and it said okay I'm going to
take neon gradient and I'm going to fill
them in with that circle let's take this
other gradient here this radial gradient
circle gradient it's the same thing
starts on one color ends up on another
color URL circle gradient refresh oh
look it's still just as ugly it's very
bad it's no good we can also use this on
the rectangle URL circle gradient even
though it doesn't fit so just get a
little bit more green out on the sides
so generally you're not using gradients
generally what you want to use SVG deafs
for are background images of circles
because if we have this bubble chart
here and we have a ton of different
people's faces here we know how to
insert images through SVG or we know we
could look it up but it's not practical
to have to crop all of those images and
then resize them and it's a train wreck
so what we are going to do is this we've
seen the radio gradient we've seen the
linear gradient then there's something
called a pattern and a pattern
establishes what a background can be for
a shape and inside of this pattern is an
image and this image points to the file
called snow jpg which is just see if I
can pull it up yeah so it's just John
snow there are all of these other things
here height width pattern content units
the height and width of this are
supposedly one preserve expect ratio
blah blah blah this all of these extra
bits are pieces that you mean
you don't need to understand them just
know that it makes the image show up
correctly and you say oh great let's see
this image show up correctly and I say
okay we have another ID for this pattern
this pattern is John Snow let's just put
it in here so for the fill I want to use
this pattern and this pattern is simply
an image that is one by one so I save I
refresh and there we go John snow
beautiful I can also use this on a
circle now we saw that this image is
square right and we just put it in a
rectangle and it seemed to work fine
what's going to happen we use it in a
circle what's going to happen when I
forget to save
I'll have filled here twice alright so
I'm setting both of these to have the
fill of John's note both of these
circles and they both look wonderful
let's make this one even a little bit
bigger let's go from 50 to let's say 150
radius so the magic thing that will
happen is as you make your your circles
larger and larger and larger and larger
and larger your image will scale up to
fit that now the only issue is you need
to make sure that your image is high
enough resolution so that it doesn't
look terrible and pixelated as you can
see our image is nice and small but if
you were going to blow up someone's face
to be this large just make sure you have
a big enough image okay so now that this
works we are going to split to a new
video and then we will learn how this
applies to d3
learn how to put background images of
let's say people's faces onto a bubble
chart that looks like this so it's going
to take two bits the first bit is going
to be about how to do definitions in SVG
for reusable graphical components and
then the second part is how to apply
that to d3 so first off we have an SVG
page right here or a page with an SVG in
it usually when we're doing d3 we're
writing everything by a code but I just
thought it would be good to start off by
looking at the raw SVG and understanding
how everything gets applied so we have a
ton of circles here and then we have a
single lonely rectangle if we look at
our code if we scroll down down down
down down down down we will see those
circles and those rectangles right here
but the odd thing is look at all of this
other code that is inside of our SVG we
have a marker we have this linear
gradient we have a radial gradient we
have another linear gradient we have a
pattern and image but none of those
things are showing up despite the fact
that they are inside of our SVG so in
your SVG you can have something called
deaths definitions and these definitions
become reusable components that you can
use again and again and again so you can
apply a radial gradient or a linear
gradient to a circle or rectangle um you
can add a marker onto a line you can
have a pattern be the background of an
object so you know this marker is
supposed to be for a line but maybe I'll
add a line in later so if we look at
let's say this linear gradient the way
the linear gradient works is it is given
an x1 and an x2 and a y1 and a Y
- so the X 1 is zero and the y 1 is 0 so
that's top left and X 2 is 100% and Y 2
is 100% so it seems like this starts in
the upper left hand corner and then
moves down to the lower right hand
corner linear gradients these gradients
don't even matter because you're rarely
going to use a gradient because they're
always very unattractive gradients get
stops which means this is the color
right here on that is at 0% and this is
the color that is at 100% so your
gradient goes between this color and
this color now if we look at this
gradient we see that it has a name neon
gradient if we look at this next
gradient it has a name circle gradient
these are both IDs they should be unique
on the page now what we want to do is
right now this first circle has a fill
of red we can see it's a red circle
right there I would love it if they were
ugly gradient in the background so what
we can do is we think oh we know how to
refer to things by IDs right ID means
you get the little hashtag thing you get
the pound symbol so let's just take neon
gradients and say fill use the ID neon
gradient you're so excited that this is
going to work do you hit refresh and it
just turns black doesn't work at all the
thing that doesn't make sense about how
to use definitions in SVG is you need to
type URL around your selection neon
gradient get the thing that as an ID of
neon gradient
we're going to call it through this URL
it's not even a function why why why I
don't know but it really works so
anytime you create a definition you can
use it for the failures of the stroke to
use it for whatever it just takes the
code that's inside of here and apply
to your object so I had a circle and I
said hey take the fill of that circle
and fill it up with whatever is in neon
gradient and it said okay I'm going to
take neon gradient and I'm going to fill
them in with that circle let's take this
other gradient here this radial gradient
circle gradient it's the same thing
starts on one color ends up on another
color URL circle gradient refresh oh
look it's still just as ugly it's very
bad it's no good we can also use this on
the rectangle URL circle gradient even
though it doesn't fit so just get a
little bit more green out on the sides
so generally you're not using gradients
generally what you want to use SVG deafs
for are background images of circles
because if we have this bubble chart
here and we have a ton of different
people's faces here we know how to
insert images through SVG or we know we
could look it up but it's not practical
to have to crop all of those images and
then resize them and it's a train wreck
so what we are going to do is this we've
seen the radio gradient we've seen the
linear gradient then there's something
called a pattern and a pattern
establishes what a background can be for
a shape and inside of this pattern is an
image and this image points to the file
called snow jpg which is just see if I
can pull it up yeah so it's just John
snow there are all of these other things
here height width pattern content units
the height and width of this are
supposedly one preserve expect ratio
blah blah blah this all of these extra
bits are pieces that you mean
you don't need to understand them just
know that it makes the image show up
correctly and you say oh great let's see
this image show up correctly and I say
okay we have another ID for this pattern
this pattern is John Snow let's just put
it in here so for the fill I want to use
this pattern and this pattern is simply
an image that is one by one so I save I
refresh and there we go John snow
beautiful I can also use this on a
circle now we saw that this image is
square right and we just put it in a
rectangle and it seemed to work fine
what's going to happen we use it in a
circle what's going to happen when I
forget to save
I'll have filled here twice alright so
I'm setting both of these to have the
fill of John's note both of these
circles and they both look wonderful
let's make this one even a little bit
bigger let's go from 50 to let's say 150
radius so the magic thing that will
happen is as you make your your circles
larger and larger and larger and larger
and larger your image will scale up to
fit that now the only issue is you need
to make sure that your image is high
enough resolution so that it doesn't
look terrible and pixelated as you can
see our image is nice and small but if
you were going to blow up someone's face
to be this large just make sure you have
a big enough image okay so now that this
works we are going to split to a new
video and then we will learn how this
applies to d3