D3 AND BIG DATA
D3 Overview
D3 (Data-Driven Documents):
A powerful JavaScript library for creating innovative and interactive
visualizations on the web.
Not just a tool but a class of applications that enable data-driven
visuals.
Used widely in prototypes, research projects, and big data dashboards
in top tech companies.
Can build visuals like:
Dynamic maps, Social network diagrams, Time & place visual
explorations
Data Visualization Basics
Presenting data in pictorial or graphical form (charts, plots,
infographics).
Goal: To communicate information clearly and efficiently.
Helps in:
Comparing data, Identifying patterns and trends,
Generating analytical reports, Decision-making
Advantages of Data Visualization
Quick Communication: Converts complex data into easy visuals.
Efficiency: Speeds up understanding and insight generation.
Interactive: Users can explore, filter, and analyze specific data.
Integration: Can be embedded in websites and mobile apps.
Tools & Technology
Built using JavaScript frameworks (like [Link], [Link], Plotly).
Supports real-time and interactive dashboards.
✅ In short:
D3 is a leading visualization framework that turns raw data into
powerful, interactive visuals, making it easier for businesses,
researchers, and users to understand, analyze, and act on information.
Getting started with D3
[Link] = Data-Driven Documents
→ A powerful JavaScript library for creating interactive and dynamic
data visualizations on the web.
Backbone of many modern and innovative visualizations online.
Makes data interactive, engaging, and meaningful for users.
Purpose of [Link]:
Created to address the need for sophisticated, web-accessible data
visualization.
Helps when traditional Business Intelligence (BI) tools fail to reveal
deeper patterns in data.
Use Case:
Ideal for building custom dashboards tailored to a company’s
domain.
Shows specific customer behavior and data patterns not possible
with generic BI tools.
Key Benefits:
Fast: Handles large datasets efficiently.
Interactive: Allows users to explore and analyze data dynamically.
Shareable: Visualizations can be easily shared across the
organization.
[Link] is ideal for building custom dashboards because it gives full
control over how data is displayed and how users interact with it.
Creator & Purpose:
• Mike Bostock created [Link] to make use of new web technologies.
• It does not depend on special or paid formats and gives developers a
lot of freedom.
Web Standards Used:
Fully utilizes CSS3, HTML5, and SVG for building visualizations.
[Link] Version 4:
Introduced modularization for easier use in modern application
development.
More scalable and adaptable to different project needs.
Capabilities:
• Lets you make interactive and animated visuals using data.
• Can easily work with parts of an existing webpage.
• Allows regular web content to change and update dynamically.
Applications:
• Used to create fast and powerful dashboards that show data clearly.
• Helps in making advanced visualizations to understand and analyze
big data.
Your First D3 App –
D3 applications are built step by step by writing code that directly
manipulates web page elements.
The focus is on understanding D3 principles rather than just code
details.
Creating a D3 app is simple:
Start with a clean HTML page (no styles, no pre-defined <div>s).
Use [Link] code to create, select, and modify elements dynamically.
This helps you learn how D3 builds visuals from scratch and how small
lines of code shape the output.
The exercise shows the power of D3: turning a plain HTML page into an
interactive visualization.
A simple webpage:
<!doctype html>
<html>
<head>
<script src="[Link]"></script>
</head>
<body>
</body>
</html>
• <script> tells the browser: “load and execute JavaScript.”
• src="[Link]" points to an external file to load.
• In this case it’s the [Link] library, version 4, minified.
• The minified file: all spaces, comments, and long variable names are
removed to reduce file size and load faster.
Hello World with Divs –
Purpose: Demonstrates the very first step in using [Link] to add content
to a web page.
D3 can act as an abstraction layer for inserting and modifying
traditional HTML content.
Code can be written:
Directly in the HTML file (inside <script>).
In a separate JavaScript (.js) file.
Or tested quickly in the browser console.
Example: A small piece of D3 code can write “Hello World” to the page
using <div> elements.
This is the starting point before moving on to complex layouts,
interfaces, and data-driven graphics.
Using [Link] –
[Link]("body") → selects the <body> element.
.append("div") → adds a new <div> inside the body.
.style("border", "1px black solid") → sets CSS style (black border).
.html("hello world") → inserts text/HTML content inside the <div>.
With .on(), we can add interactivity (e.g., respond to clicks, mouse
events).
Using [Link] to set attributes and event listeners:
[Link]("div") → selects the first <div> on the page.
.style("background-color", "pink") → sets background color.
.style("font-size", "24px") → changes text size.
.attr("id", "newDiv") → gives the <div> an ID.
.attr("class", "d3div") → assigns a CSS class.
.on("click", … ) → adds an event listener; here it logs a message when
the div is clicked.
The .on() Function in D3
Used to add event listeners to selected elements.
Supports many events: click, mouseover, mouseout, etc.
Example: Assigning .on("click", … ) to a <div> logs a message when
clicked.
Helpful for interactivity in data visualizations (e.g., highlight on, show
details on click).
[Link]() is often used to test if the event is firing correctly.
In short: .on() makes D3 elements interactive by responding to user
actions. The .on() Function in D3
Used to add event listeners to selected elements.
D3 is mainly used for graphics like shapes (lines, circles, bars), not just
<div> elements.
To draw shapes, you need an SVG canvas in the DOM.
SVG can be added directly in HTML or dynamically with D3:
[Link]("body").append("svg");
First step in D3 graphics: create an SVG, then append shapes inside it.
SVG (Scalable Vector Graphics) is an HTML element for drawing shapes
(circles, rectangles, lines, paths, etc.).
Think of it as a drawing board where D3 can place visual elements.
Without an SVG, D3 has nowhere to draw!
In short: Circles and other shapes in D3 are drawn inside an SVG canvas,
which is the base for all graphical visualizations.
A simple web page with an SVG canvas:
<html>
<head>
<script src="[Link]"></script>
</head>
<body>
<div id="vizcontainer">
<svg style="width:500px;height:500px;border:1px lightgray solid;" />
</div>
</body>
</html>
<div id="vizcontainer"> → A box (container) to hold the visualization.
Useful for structuring your web page.
<svg> → The SVG canvas where shapes will be drawn.
width:500px;height:500px → Defines the size of the drawing area.
border:1px lightgray solid → Adds a light border so you can see the
canvas clearly.
— you just have a blank drawing board ready for D3.
Appending Shapes in SVG with D3
• First, you need an SVG canvas (your drawing board).
• Then, you can use [Link]() and .append() to add shapes inside it.
• Shapes are SVG elements like circle, rect, line, path, and even text.
• You control their size, color, and position using .attr() and .style().
Once an SVG canvas is created, shapes can be added inside it.
Shapes can be styled (color, size, position) using .attr() and .style().
This is the basis of building visual elements in D3.
In short: With an SVG canvas ready, D3 lets you append shapes
dynamically just like adding divs, but for graphics and data-driven
visuals. Appending Shapes in SVG with D3
Once an SVG canvas is created, shapes can be added inside it.
Creating lines and circles with select and append:
Line: Draws a straight line using x1, y1 (start) and x2, y2 (end).
.append("line").attr("x1",20).attr("y1",20).attr("x2",400).attr("y2",400)
Styled with stroke (color) and stroke-width.
Text: Adds text at specific coordinates (x, y) using .text("HELLO").
Circle:
Defined by radius (r) and center (cx, cy).
Example: Small red circle (20,20) and large light-blue circle
(400,400).
Combined Example: Creates a visual with a line, two circles, and text
("HELLO", "WORLD") inside the SVG canvas.
D3 lets you append lines, circles, and text inside an SVG by setting
positions (x, y, cx, cy), size (r), and styles (color, stroke).
Draw Order in SVG with D3
• Order matters → Shapes and text in SVG are drawn in the same
sequence as the code runs.
• Later elements overlap earlier ones → e.g., circles drawn after a line
will appear on top of the line.
• Text placement → May appear above or below circles depending on
when it is appended.
• DOM order = Visual order → SVG does not auto-adjust layering; it
follows the order of elements in the DOM.
Example result: Two circles, one line, and two text elements → first
text got covered by the circle because of the draw order.
⚡ In short: In D3 with SVG, the last drawn element sits on top. To control
Creating Lines and Circles with select and append
[Link]("svg")
.append("line")
.attr("x1", 20)
.attr("y1", 20)
.attr("x2", 400)
.attr("y2", 400)
.style("stroke", "black")
.style("stroke-width", "2px");
👉 This draws a diagonal black line from point (20,20) to (400,400).
[Link]("svg")
.append("text")
.attr("x", 20)
.attr("y", 20)
.text("HELLO");
👉 Adds the word HELLO at coordinates (20,20).
[Link]("svg")
.append("circle")
.attr("r", 20)
.attr("cx", 20)
.attr("cy", 20)
.style("fill", "red");
👉 Draws a small red circle (radius 20) at (20,20).
Notice it overlaps with the text "HELLO".
[Link]("svg")
.append("circle")
.attr("r", 100)
.attr("cx", 400)
.attr("cy", 400)
.style("fill", "lightblue");
👉 Draws a large light blue circle (radius 100) at (400,400).
[Link]("svg")
.append("text")
.attr("x", 400)
.attr("y", 400)
.text("WORLD");
👉 Adds the word WORLD at coordinates (400,400).
It appears inside (or near) the large light blue circle.
🔎 Summary:
• [Link]("svg") → Finds the <svg> canvas.
• .append("shape") → Adds a shape (line, circle, text) inside the SVG.
• .attr("...") → Sets shape properties: position, size, radius,
coordinates.
• .style("...") → Controls appearance: color, border, thickness.
DOM order = visual order → Since the blue circle was appended before
"WORLD", the text appears on top of the circle.
✅ A simple diagram where a line connects two points (20,20 and
400,400), with a red circle + HELLO at the start, and a big blue circle +
WORLD at the end.
Why Do We Need [Link]?
1 Premier Framework for Data Visualization
• Among JavaScript libraries, [Link] is the most powerful for building
custom, interactive, and dynamic visualizations.
• While other tools like [Link] or Google Charts are good, they are
limited to predefined chart types.
• D3 lets you create anything you imagine.
2 Web-based → Runs in Browsers
• D3 works directly in the web browser, so no special software is
needed.
• This makes it portable (runs anywhere with a browser) and
shareable (just send a link).
3 High Flexibility → Works with HTML, CSS, and SVG
• D3 doesn’t force you into fixed chart layouts.
• Instead, it uses web standards: HTML for structure, CSS for styling,
SVG for graphics. You can fully customize the look and feel.
4 DOM Manipulation (Document Object Model)
• D3 can select, add, remove, and update any part of a webpage
dynamically.
• Example: A bar can grow taller when new data arrives.
• This makes D3 data-driven: visuals change automatically when data
changes.
5 Excellent Visual Quality
• D3 produces high-quality, scalable graphics (SVGs don’t lose clarity
even when zoomed in).
• Perfect for dashboards, reports, and interactive data stories.
6 Community & Ecosystem
• D3 has a large user base, tons of tutorials, plugins, and reusable
charts.
• This makes learning easier and problem-solving faster.
7 Ease of Learning simpler to adopt compared to many alternatives.
[Link] (Data-Driven Documents) is a powerful, open-source JavaScript
library for creating interactive, browser-based data visualizations.
Unlike many libraries, it works directly with HTML, CSS, and SVG — no
plugins needed.
✅ Main Benefits
1. Great Data Visualization
• Produces high-quality, dynamic, and interactive graphics.
• Supports animations, transitions, and interactive elements
Handles both simple charts (bar, line, pie) and complex visualizations
(maps, networks, dashboards).
2. Modular Design
• D3 is built in modules → you can import only what you need.
• Example: use just the scales or shapes module without loading the
entire library.
• Makes projects lighter and faster.
3. Easy Chart Creation
• Allows building custom chart components instead of relying on fixed
templates.
• Developers can design domain-specific visualizations that perfectly
fit the problem.
• Example: A company-specific sales funnel chart.
4. DOM Manipulation
• D3 directly manipulates HTML elements, SVG graphics, and CSS
styles.
• Updates the visualization automatically when data changes.
• Example: A bar chart that resizes bars live as new data streams in.
ANOTHER TWIST ON BAR CHART VISUALIZATION
Adding Labels in [Link]
• Visualizations show overall trends, but without labels, exact values
are missing.
• To make visuals more informative, labels are added to display the
value of each bar.
• Labels provide clarity and help viewers interpret the chart more
easily.
• This can be done by adding a code snippet at the end of the [Link]
file to append text elements to bars.
✅ In short: Labels make [Link] charts more readable and data-rich by
showing exact values along with visuals.
Adding Text Labels in [Link] ([Link])
Code binds dataset values to text elements.
Steps performed in the code:
[Link]("text").data(dataset) → Selects all text elements and
binds data.
.enter().append("text") → Creates a new text element for each data
value.
.text(function(d){ return d; }) → Displays the value of each bar as text.
.attr("y", function(d,i){ return chartHeight - d - 2; }) → Positions text
vertically above each bar.
.attr("x", function(d,i){ return barWidth * i + 10; }) → Positions text
horizontally inside each bar.
.attr("fill", "#A64C38") → Sets the text color.
Result: Bars now display numeric values on them, making the
visualization more informative and readable.
// Bind dataset values to text elements
[Link]("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) { return d; }) // show value as text
.attr("y", function(d) { return chartHeight - d - 2; }) // above bar
.attr("x", function(d, i) { return barWidth * i + 10; }) // inside bar
.attr("fill", "#A64C38"); // text color
Adding Scaling to [Link] Charts
Why Scaling is Needed?
• Data values can vary widely (some very small, some very large).
• Without scaling, bars may appear too small or too large, making the
chart inconsistent.
• This makes the chart look inaccurate or unreadable.
• Scaling ensures a balanced and proportional visualization.
Concept:
Scaling maps raw data values to a specific range of pixels on the
screen.
This allows all data points (small or large) to fit properly within the
chart dimensions.
Example Dataset:
var dataset = [2, 4, 5, 5, 7, 9, 12, 9, 10];
Here values range from 2 → 12.
Using scaling, these values can be proportionally represented in chart
height.
Result of scaling:
• Each bar’s height is adjusted relative to dataset values.
• Chart becomes consistent, readable, and visually accurate.
✅ In short: Scaling is essential in [Link] for handling different data
ranges and ensuring that all data values are displayed proportionally
within the chart.
Solution: Scaling Functions in [Link]
D3 provides built-in scale functions to adjust data values into a defined
range.
Benefit of Scaling:
• Bars fit properly inside the chart area.
• Visualization becomes clear, accurate, and meaningful.
• Works well even with very large or very small datasets.
✅ In short: Scaling ensures that your chart adapts to dataset size by
mapping data values proportionally to chart height/width, making the
visualization accurate and visually appealing.
Example: [Link]() maps input values (data domain) to output
values (pixel range).
var dataset = [2, 4, 5, 5, 7, 9, 12, 9, 10];
This is the data we want to plot (bar heights).
var chartWidth = 500, chartHeight = 300, barPadding = 5;
var barWidth = (chartWidth / [Link]);
Define chart size (500 × 300).
Each bar’s width = chart width ÷ number of bars (minus padding).
svg = [Link]("svg")
.attr("width", chartWidth)
.attr("height", chartHeight);
Select the <svg> element and set its size.(This is our drawing canvas.)
var yScale = [Link]()
.domain([0, [Link](dataset)])
.range([0, chartHeight]);
Create a scale that converts data values into bar heights.
Smallest value → 0 Largest value → chart height (300px)
var barChart = [Link]("rect")
.data(dataset)
.enter()
.append("rect")
“Take each data point, and create a <rect> (bar) for it.”
.attr("y", function(d) { return chartHeight - yScale(d); })
.attr("height", function(d) { return yScale(d); })
.attr("width", barWidth - barPadding)
.attr("fill", "#F2BF23")
For each bar:
Y position = chart height – bar height (so bars grow upward).
Height = scaled value of data.
Width = calculated width.
Color = yellow (#F2BF23).
.attr("transform", function(d, i) {
var translate = [barWidth * i, 0];
return "translate(" + translate + ")";
});
Shift each bar horizontally so they don’t overlap.
(i = bar index → 0, 1, 2, … moves bars left → right).
var text = [Link]("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) { return d; })
.attr("y", function(d) { return chartHeight - yScale(d) - 2; })
.attr("x", function(d, i) { return barWidth * i + 10; })
.attr("fill", "#A64C38");
Add labels (numbers) on top of bars:
.text(d) → write the actual number.
.attr("y") → position above the bar.
.attr("x") → place inside the bar (shifted by +10).
.attr("fill") → text color = brown.
✅ In short:
This script makes a bar chart with labels using [Link].
Rectangles = data values.
Text = exact values (on bars).
Scales + transforms = correct positioning.
Final Output
• A yellow bar chart with 9 bars.
• Each bar’s height = dataset value.
• Each bar has a brown label showing the exact number.
Adding Axes in [Link]
Why add axes?
Bars show data visually, but axes provide scale and meaning.
X-axis → categories (e.g., names, positions).
Y-axis → numerical values.
Explanation of [Link]
var dataset = [2, 4, 5, 5, 7, 9, 12, 9, 10];
Data to visualize (heights of bars).
var chartWidth = 500, chartHeight = 300, barPadding = 6;
var barWidth = (chartWidth / [Link] - 14);
Chart size = 500×300.
Each bar’s width = chart width ÷ number of data points (with spacing).
var svg = [Link]("svg")
.attr("width", chartWidth)
.attr("height", chartHeight);
Select <svg> and set its size → this is the drawing area.
Scales
var xScale = [Link]()
.domain([0, [Link](dataset)])
.range([0, chartWidth]);
xScale: Maps data values → horizontal space.
var yScale = [Link]()
.domain([0, [Link](dataset)])
.range([0, chartHeight - 28]);
yScale: Maps data → bar height.
var yScaleChart = [Link]()
.domain([0, [Link](dataset)])
.range([chartHeight - 28, 0]);
yScaleChart: Flipped version (for axis, since SVG origin is top-left).
Bars
var barChart = [Link]("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y", function(d) { return chartHeight - yScale(d) - 20; })
.attr("height", function(d) { return yScale(d); })
.attr("width", barWidth - barPadding)
.attr("fill", "#F2BF23")
.attr("transform", function (d, i) {
var translate = [barWidth * i + 55, 0];
return "translate(" + translate + ")";
});
Draws yellow bars (rect) for each dataset value.
y = position from top.
height = bar height (scaled).
transform = shift each bar sideways.
Labels
var text = [Link]("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) { return d; })
.attr("y", function(d) { return chartHeight - yScale(d) - 20; })
.attr("x", function(d, i) { return barWidth * i + 70; })
.attr("fill", "#A64C38");
Adds brown text labels inside/above each bar.
.text(d) → shows the value.
x and y → positions label correctly.
Axes
var x_axis = [Link]().scale(xScale);
var y_axis = [Link]().scale(yScaleChart);
[Link]("g")
.attr("transform", "translate(50, 10)")
.call(y_axis);
var xAxisTranslate = chartHeight - 20;
[Link]("g")
.attr("transform", "translate(50, " + xAxisTranslate + ")")
.call(x_axis);
Creates X and Y axes using scales.
Y-axis on the left (axisLeft).
X-axis at the bottom (axisBottom).
.call() actually draws ticks & labels.
[Link]
.bar-chart {
background-color: beige;
}
Sets background color of the chart container to beige.
✅ Final Output
Beige background. Yellow bars with brown labels.
Proper X and Y axes.
Labels show actual dataset values on top of each bar.
Positioned slightly above bar height (-2).
Styled with brownish fill (#A64C38).
Key Points
Scaling ([Link]) makes the chart consistent for any dataset.
Bars are drawn with correct height and position relative to the SVG
canvas.
Labels provide readable information for each bar.
This script demonstrates data binding, scaling, DOM manipulation, and
labeling in [Link].
✅ In short: This script creates a properly scaled bar chart with dataset
values displayed above each bar, making the visualization both accurate
and informative.
Why [Link] is Special
🔹 Freedom to Create Any Graph
Unlike ready-made charting libraries (like [Link], Google Charts, etc.),
[Link] doesn’t force you into fixed templates.
👉 You can build any kind of chart — bar, line, pie, scatter, heatmap,
tree, even custom visualizations.
🔹 Power of Web Standards
D3 uses HTML, SVG, and CSS directly.
👉 That means full flexibility to style, animate, and interact with
elements — no hidden restrictions.
🔹 Performance & Efficiency
Works directly with the DOM (Document Object Model).
Handles large datasets efficiently.
Built-in support for animation and interaction.
🔹 More Than Just Visualization
Although many call it a "data visualization library," D3 is more like a
framework.
So D3 is not only about drawing charts — it’s about connecting data →
document in a very flexible way.
🔹 Explore More
There’s a [Link] Graph Gallery online with hundreds of beautiful,
complex, and interactive graphs.
Great place to get inspiration for projects!
✅ In short:
[Link] = a flexible framework that gives you full control to turn raw data
into interactive, animated, and highly customized visuals using
standard web technologies.