1.
HTML and CSS Basics
- HTML Structure:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG and D3 Visualization</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="chart"></div>
</body>
</html>
```
- CSS for Styling:
```css
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
svg {
background-color: #f0f0f0;
border: 1px solid #ccc;
margin: 20px;
}
.bar {
fill: steelblue;
stroke: #333;
}
.highlighted {
fill: orange;
stroke: red;
stroke-width: 2;
}
```
2. JavaScript and DOM Manipulation
- Selecting and Manipulating Elements:
```javascript
document.getElementById("chart").innerHTML = "<p>Data Visualization with D3</p>";
```
- Event Handling:
```javascript
document.getElementById("chart").addEventListener("click", () => {
alert("Chart clicked!");
});
```
3. SVG Basics in D3.js
- Creating SVG Shapes:
```html
<svg width="500" height="300">
<circle cx="100" cy="150" r="30" fill="blue"></circle>
<rect x="150" y="100" width="100" height="50" fill="purple"></rect>
</svg>
```
4. D3.js Basics
- Including D3.js:
```html
<script src="https://d3js.org/d3.v7.min.js"></script>
```
- Selecting and Appending Elements with D3:
```javascript
const svg = d3.select("#chart").append("svg").attr("width", 500).attr("height", 300);
svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 50)
.style("fill", "blue");
```
5. Data Binding in D3
- Binding Data to Elements:
```javascript
const data = [25, 50, 75];
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (d, i) => (i + 1) * 100)
.attr("cy", 150)
.attr("r", d => d)
.attr("fill", "green");
```
6. Enter, Update, and Exit Patterns in D3
- Enter (Adding New Elements):
```javascript
const newData = [10, 20, 30];
svg.selectAll("circle")
.data(newData)
.enter()
.append("circle")
.attr("cx", (d, i) => i * 50 + 25)
.attr("cy", 50)
.attr("r", d => d)
.style("fill", "orange");
```
- Update (Modifying Existing Elements):
```javascript
const updateData = [15, 25, 35];
svg.selectAll("circle")
.data(updateData)
.attr("r", d => d);
```
- Exit (Removing Extra Elements):
```javascript
const smallerData = [10, 20];
svg.selectAll("circle")
.data(smallerData)
.exit()
.remove();
```
7. D3 Transitions and Animations
- Basic Transition:
```javascript
svg.select("circle")
.transition()
.duration(1000)
.attr("r", 30);
```
- Chained Transitions:
```javascript
svg.select("circle")
.transition().duration(1000).attr("fill", "green")
.transition().duration(1000).attr("cx", 300);
```
- Staggered Transitions:
```javascript
svg.selectAll("circle")
.transition()
.delay((d, i) => i * 500)
.duration(1000)
.attr("cx", 400);
```
8. Bar Chart in D3
- Setting Up Scales and Axes:
```javascript
const x = d3.scaleBand().domain(data.map((d, i) => i)).range([0, width]).padding(0.1);
const y = d3.scaleLinear().domain([0, d3.max(data)]).range([height, 0]);
svg.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(x));
svg.append("g").call(d3.axisLeft(y));
```
- Drawing Bars:```javascript
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", (d, i) => x(i))
.attr("y", d => y(d))
.attr("width", x.bandwidth())
.attr("height", d => height - y(d))
.attr("fill", "steelblue");
```
9. Interactive Bar Chart with Tooltips and Highlighting
- Tooltip Setup:
```html
<div class="tooltip" style="position: absolute; display: none; background: #333; color: #fff;
padding: 5px; border-radius: 3px;"></div>
```
- Tooltip Code:
```javascript
const tooltip = d3.select(".tooltip");
svg.selectAll(".bar")
.on("mouseover", function(event, d) {
tooltip.style("display", "block")
.html(`Value: ${d}`)
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 20) + "px");
d3.select(this).attr("stroke-width", 2).attr("stroke", "black");
})
.on("mouseout", function() {
tooltip.style("display", "none");
d3.select(this).attr("stroke-width", 1);
});
```
- Highlighting Bar on Click:
```javascript
svg.selectAll(".bar").on("click", function() {
d3.selectAll(".bar").classed("highlighted", false);
d3.select(this).classed("highlighted", true);
});
```
10. Scatter Plot in D3
- Setting Up Scales:
```javascript
const x = d3.scaleLinear().domain([0, d3.max(data, d => d.x)]).range([0, width]);
const y = d3.scaleLinear().domain([0, d3.max(data, d => d.y)]).range([height, 0]);
```
- Drawing Points:
```javascript
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", 5)
.attr("fill", "steelblue");
```
- Adding Axes:
```javascript
svg.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(x));
svg.append("g").call(d3.axisLeft(y));
```
