Data-Driven Documents or D3 is a JavaScript library for drawing SVGs with data. It's the magic behind many of the graphs, charts, and other data visualizations you see on the web today. https://fireship.io/lessons/realtime-charts-d3-firebase/

#javascript #datavis #100SecondsOfCode

🔗 Resources

D3 https://d3js.org/
Realtime Animated Charts https://fireship.io/lessons/realtime-charts-d3-firebase/

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- D3.js Basics
- Data Vis with JavaScript
- Draw SVG Graphics with Data
2024-02-04T05:45:02.752Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
8aa7555e-6e49-4db9-a08e-c1d6dac0dedd
9164470d9678118ea1bc58d74a09b567bfa1371f75dd8b5f96309a698c1c002d
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Data driven documents or d 3 is a JavaScript library for creating interactive data visualizations with scalable vector graphics.
If you've ever been to a website that has a graph, map, scatter plot, histogram, dependency diagram, b, swarm, tree map, or pie chart, it's probably powered by d 3 under the hood.
It was created in 2011 with the goal of generating SVG graphics from data.
Drawing a data visualization by hand is extremely difficult.
With d 3, you start with some input data, then write some JavaScript to programmatically draw the graphic for you, which can then be made interactive with things like labels and controls.
And when the underlying data changes, it can interpolate and animate between values, resulting in a beautiful visual for the end user that's built entirely on web standards that you already know like HTML, CSS, and JavaScript.
Its API allows you to select and manipulate items in the DOM, not much different than something like jQuery.
What makes d three different is that you can set properties as functions that automatically draw different graphics based on your data.
To get started, you'll first want to grab an element from the DOM with the select method, like an empty SVG.
You could then draw a single shape inside of it with the append method and customize its appearance by chaining the attribute method to it.
That draws a single shape, but the real power of d three comes into play when you attach data to a selection.
Instead of using a for loop to draw a bunch of shapes, the select all method allows you to describe how to draw a shape, making your code more declarative.
You can then attach data to it in the form of an array or an external file, and it will draw a shape for every point in your dataset.
Each point has 3 possible states, enter, update, and exit.
Enter is when you would initially draw your shape, but d three also keeps track of changes to the dataset, allowing you to react when data is data or removed.
It also provides a bunch of features to make your data look beautiful, like helpers that automatically draw scales along the x and access based on the domain and range of the data.
Or you might use transition to create an animation as each data point is added to the chart.
And Finally, you might listen to events to add tool tips or other interactive elements to your chart.
This has been d three JS in 100 seconds.
If you wanna see more short videos like this, hit the like button and subscribe.
And if you wanna go beyond 100 seconds, there's a new FireShip Pro lesson about building a real time chart with d 3 and Firestore.
Thanks for watching, and I will See you in the next one.

Speaker 0: Data driven documents or d 3 is a JavaScript library for creating interactive data visualizations with scalable vector graphics. If you've ever been to a website that has a graph, map, scatter plot, histogram, dependency diagram, b, swarm, tree map, or pie chart, it's probably powered by d 3 under the hood. It was created in 2011 with the goal of generating SVG graphics from data. Drawing a data visualization by hand is extremely difficult. With d 3, you start with some input data, then write some JavaScript to programmatically draw the graphic for you, which can then be made interactive with things like labels and controls.

And when the underlying data changes, it can interpolate and animate between values, resulting in a beautiful visual for the end user that's built entirely on web standards that you already know like HTML, CSS, and JavaScript. Its API allows you to select and manipulate items in the DOM, not much different than something like jQuery. What makes d three different is that you can set properties as functions that automatically draw different graphics based on your data. To get started, you'll first want to grab an element from the DOM with the select method, like an empty SVG. You could then draw a single shape inside of it with the append method and customize its appearance by chaining the attribute method to it.

That draws a single shape, but the real power of d three comes into play when you attach data to a selection. Instead of using a for loop to draw a bunch of shapes, the select all method allows you to describe how to draw a shape, making your code more declarative. You can then attach data to it in the form of an array or an external file, and it will draw a shape for every point in your dataset. Each point has 3 possible states, enter, update, and exit. Enter is when you would initially draw your shape, but d three also keeps track of changes to the dataset, allowing you to react when data is data or removed.

It also provides a bunch of features to make your data look beautiful, like helpers that automatically draw scales along the x and access based on the domain and range of the data. Or you might use transition to create an animation as each data point is added to the chart. And Finally, you might listen to events to add tool tips or other interactive elements to your chart. This has been d three JS in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe.

And if you wanna go beyond 100 seconds, there's a new FireShip Pro lesson about building a real time chart with d 3 and Firestore. Thanks for watching, and I will See you in the next one.
Data driven documents or d 3 is a JavaScript library for creating interactive data visualizations with scalable vector graphics. If you've ever been to a website that has a graph, map, scatter plot, histogram, dependency diagram, b, swarm, tree map, or pie chart, it's probably powered by d 3 under the hood. It was created in 2011 with the goal of generating SVG graphics from data. Drawing a data visualization by hand is extremely difficult. With d 3, you start with some input data, then write some JavaScript to programmatically draw the graphic for you, which can then be made interactive with things like labels and controls. And when the underlying data changes, it can interpolate and animate between values, resulting in a beautiful visual for the end user that's built entirely on web standards that you already know like HTML, CSS, and JavaScript. Its API allows you to select and manipulate items in the DOM, not much different than something like jQuery.
visualization
graphic design
data
data management
animation
databases
What makes d three different is that you can set properties as functions that automatically draw different graphics based on your data. To get started, you'll first want to grab an element from the DOM with the select method, like an empty SVG. You could then draw a single shape inside of it with the append method and customize its appearance by chaining the attribute method to it. That draws a single shape, but the real power of d three comes into play when you attach data to a selection. Instead of using a for loop to draw a bunch of shapes, the select all method allows you to describe how to draw a shape, making your code more declarative.
You can then attach data to it in the form of an array or an external file, and it will draw a shape for every point in your dataset. Each point has 3 possible states, enter, update, and exit. Enter is when you would initially draw your shape, but d three also keeps track of changes to the dataset, allowing you to react when data is data or removed. It also provides a bunch of features to make your data look beautiful, like helpers that automatically draw scales along the x and access based on the domain and range of the data. Or you might use transition to create an animation as each data point is added to the chart. And Finally, you might listen to events to add tool tips or other interactive elements to your chart. This has been d three JS in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. And if you wanna go beyond 100 seconds, there's a new FireShip Pro lesson about building a real time chart with d 3 and Firestore. Thanks for watching, and I will See you in the next one.
data
data analysis
visualization
animation
data management
graphic design
video gaming
Data driven documents or d 3 is a JavaScript library for creating interactive data visualizations with scalable vector graphics. If you've ever been to a website that has a graph, map, scatter plot, histogram, dependency diagram, b, swarm, tree map, or pie chart, it's probably powered by d 3 under the hood. It was created in 2011 with the goal of generating SVG graphics from data. Drawing a data visualization by hand is extremely difficult. With d 3, you start with some input data, then write some JavaScript to programmatically draw the graphic for you, which can then be made interactive with things like labels and controls. And when the underlying data changes, it can interpolate and animate between values, resulting in a beautiful visual for the end user that's built entirely on web standards that you already know like HTML, CSS, and JavaScript. Its API allows you to select and manipulate items in the DOM, not much different than something like jQuery. What makes d three different is that you can set properties as functions that automatically draw different graphics based on your data. To get started, you'll first want to grab an element from the DOM with the select method, like an empty SVG. You could then draw a single shape inside of it with the append method and customize its appearance by chaining the attribute method to it. That draws a single shape, but the real power of d three comes into play when you attach data to a selection. Instead of using a for loop to draw a bunch of shapes, the select all method allows you to describe how to draw a shape, making your code more declarative. You can then attach data to it in the form of an array or an external file, and it will draw a shape for every point in your dataset. Each point has 3 possible states, enter, update, and exit. Enter is when you would initially draw your shape, but d three also keeps track of changes to the dataset, allowing you to react when data is data or removed. It also provides a bunch of features to make your data look beautiful, like helpers that automatically draw scales along the x and access based on the domain and range of the data. Or you might use transition to create an animation as each data point is added to the chart. And Finally, you might listen to events to add tool tips or other interactive elements to your chart. This has been d three JS in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. And if you wanna go beyond 100 seconds, there's a new FireShip Pro lesson about building a real time chart with d 3 and Firestore. Thanks for watching, and I will See you in the next one.
Data
data
driven
driven
documents
documents
or
or
d
d
3
3
is
is
a
a
JavaScript
javascript
library
library
for
for
creating
creating
interactive
interactive
data
data
visualizations
visualizations
with
with
scalable
scalable
vector
vector
graphics.
graphics
If
if
you've
you've
ever
ever
been
been
to
to
a
a
website
website
that
that
has
has
a
a
graph,
graph
map,
map
scatter
scatter
plot,
plot
histogram,
histogram
dependency
dependency
diagram,
diagram
b,
b
swarm,
swarm
tree
tree
map,
map
or
or
pie
pie
chart,
chart
it's
it's
probably
probably
powered
powered
by
by
d
d
3
3
under
under
the
the
hood.
hood
It
it
was
was
created
created
in
in
2011
2011
with
with
the
the
goal
goal
of
of
generating
generating
SVG
svg
graphics
graphics
from
from
data.
data
Drawing
drawing
a
a
data
data
visualization
visualization
by
by
hand
hand
is
is
extremely
extremely
difficult.
difficult
With
with
d
d
3,
3
you
you
start
start
with
with
some
some
input
input
data,
data
then
then
write
write
some
some
JavaScript
javascript
to
to
programmatically
programmatically
draw
draw
the
the
graphic
graphic
for
for
you,
you
which
which
can
can
then
then
be
be
made
made
interactive
interactive
with
with
things
things
like
like
labels
labels
and
and
controls.
controls
And
and
when
when
the
the
underlying
underlying
data
data
changes,
changes
it
it
can
can
interpolate
interpolate
and
and
animate
animate
between
between
values,
values
resulting
resulting
in
in
a
a
beautiful
beautiful
visual
visual
for
for
the
the
end
end
user
user
that's
that's
built
built
entirely
entirely
on
on
web
web
standards
standards
that
that
you
you
already
already
know
know
like
like
HTML,
html
CSS,
css
and
and
JavaScript.
javascript
Its
its
API
api
allows
allows
you
you
to
to
select
select
and
and
manipulate
manipulate
items
items
in
in
the
the
DOM,
dom
not
not
much
much
different
different
than
than
something
something
like
like
jQuery.
jquery
What
what
makes
makes
d
d
three
three
different
different
is
is
that
that
you
you
can
can
set
set
properties
properties
as
as
functions
functions
that
that
automatically
automatically
draw
draw
different
different
graphics
graphics
based
based
on
on
your
your
data.
data
To
to
get
get
started,
started
you'll
you'll
first
first
want
want
to
to
grab
grab
an
an
element
element
from
from
the
the
DOM
dom
with
with
the
the
select
select
method,
method
like
like
an
an
empty
empty
SVG.
svg
You
you
could
could
then
then
draw
draw
a
a
single
single
shape
shape
inside
inside
of
of
it
it
with
with
the
the
append
append
method
method
and
and
customize
customize
its
its
appearance
appearance
by
by
chaining
chaining
the
the
attribute
attribute
method
method
to
to
it.
it
That
that
draws
draws
a
a
single
single
shape,
shape
but
but
the
the
real
real
power
power
of
of
d
d
three
three
comes
comes
into
into
play
play
when
when
you
you
attach
attach
data
data
to
to
a
a
selection.
selection
Instead
instead
of
of
using
using
a
a
for
for
loop
loop
to
to
draw
draw
a
a
bunch
bunch
of
of
shapes,
shapes
the
the
select
select
all
all
method
method
allows
allows
you
you
to
to
describe
describe
how
how
to
to
draw
draw
a
a
shape,
shape
making
making
your
your
code
code
more
more
declarative.
declarative
You
you
can
can
then
then
attach
attach
data
data
to
to
it
it
in
in
the
the
form
form
of
of
an
an
array
array
or
or
an
an
external
external
file,
file
and
and
it
it
will
will
draw
draw
a
a
shape
shape
for
for
every
every
point
point
in
in
your
your
dataset.
dataset
Each
each
point
point
has
has
3
3
possible
possible
states,
states
enter,
enter
update,
update
and
and
exit.
exit
Enter
enter
is
is
when
when
you
you
would
would
initially
initially
draw
draw
your
your
shape,
shape
but
but
d
d
three
three
also
also
keeps
keeps
track
track
of
of
changes
changes
to
to
the
the
dataset,
dataset
allowing
allowing
you
you
to
to
react
react
when
when
data
data
is
is
data
data
or
or
removed.
removed
It
it
also
also
provides
provides
a
a
bunch
bunch
of
of
features
features
to
to
make
make
your
your
data
data
look
look
beautiful,
beautiful
like
like
helpers
helpers
that
that
automatically
automatically
draw
draw
scales
scales
along
along
the
the
x
x
and
and
access
access
based
based
on
on
the
the
domain
domain
and
and
range
range
of
of
the
the
data.
data
Or
or
you
you
might
might
use
use
transition
transition
to
to
create
create
an
an
animation
animation
as
as
each
each
data
data
point
point
is
is
added
added
to
to
the
the
chart.
chart
And
and
Finally,
finally
you
you
might
might
listen
listen
to
to
events
events
to
to
add
add
tool
tool
tips
tips
or
or
other
other
interactive
interactive
elements
elements
to
to
your
your
chart.
chart
This
this
has
has
been
been
d
d
three
three
JS
js
in
in
100
100
seconds.
seconds
If
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
this,
this
hit
hit
the
the
like
like
button
button
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
go
go
beyond
beyond
100
100
seconds,
seconds
there's
there's
a
a
new
new
FireShip
fireship
Pro
pro
lesson
lesson
about
about
building
building
a
a
real
real
time
time
chart
chart
with
with
d
d
3
3
and
and
Firestore.
firestore
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
See
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains the benefits of using d 3, a JavaScript library for creating interactive data visualizations with scalable vector graphics. They explain how to set properties as functions to draw different graphics based on data and how to attach data to a selection. The speaker also mentions the use of d 3 for building a real time chart and a new lesson on building a real time chart with Firur tera.
D3.js in 100 Seconds
Data driven documents or d 3 is a JavaScript library for creating interactive data visualizations with scalable vector graphics. If you've ever been to a website that has a graph, map, scatter plot, histogram, dependency diagram, b, swarm, tree map, or pie chart, it's probably powered by d 3 under the hood. It was created in 2011 with the goal of generating SVG graphics from data. Drawing a data visualization by hand is extremely difficult. With d 3, you start with some input data, then write some JavaScript to programmatically draw the graphic for you, which can then be made interactive with things like labels and controls. And when the underlying data changes, it can interpolate and animate between values, resulting in a beautiful visual for the end user that's built entirely on web standards that you already know like HTML, CSS, and JavaScript. Its API allows you to select and manipulate items in the DOM, not much different than something like jQuery. What makes d three different is that you can set properties as functions that automatically draw different graphics based on your data. To get started, you'll first want to grab an element from the DOM with the select method, like an empty SVG. You could then draw a single shape inside of it with the append method and customize its appearance by chaining the attribute method to it. That draws a single shape, but the real power of d three comes into play when you attach data to a selection. Instead of using a for loop to draw a bunch of shapes, the select all method allows you to describe how to draw a shape, making your code more declarative. You can then attach data to it in the form of an array or an external file, and it will draw a shape for every point in your dataset. Each point has 3 possible states, enter, update, and exit. Enter is when you would initially draw your shape, but d three also keeps track of changes to the dataset, allowing you to react when data is data or removed. It also provides a bunch of features to make your data look beautiful, like helpers that automatically draw scales along the x and access based on the domain and range of the data. Or you might use transition to create an animation as each data point is added to the chart. And Finally, you might listen to events to add tool tips or other interactive elements to your chart. This has been d three JS in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. And if you wanna go beyond 100 seconds, there's a new FireShip Pro lesson about building a real time chart with d 3 and Firestore. Thanks for watching, and I will See you in the next one.
The speaker explains the benefits of using d 3, a JavaScript library for creating interactive data visualizations with scalable vector graphics. They explain how to set properties as functions to draw different graphics based on data and how to attach data to a selection. The speaker also mentions the use of d 3 for building a real time chart and a new lesson on building a real time chart with Firur tera.