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="[Link]">
</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
[Link]("chart").innerHTML = "<p>Data Visualization with D3</p>";
```
- Event Handling:
```javascript
[Link]("chart").addEventListener("click", () => {
alert("Chart clicked!");
});
```
3. SVG Basics in [Link]
- 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. [Link] Basics
- Including [Link]:
```html
<script src="[Link]
```
- Selecting and Appending Elements with D3:
```javascript
const svg = [Link]("#chart").append("svg").attr("width", 500).attr("height", 300);
[Link]("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];
[Link]("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];
[Link]("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];
[Link]("circle")
.data(updateData)
.attr("r", d => d);
```
- Exit (Removing Extra Elements):
```javascript
const smallerData = [10, 20];
[Link]("circle")
.data(smallerData)
.exit()
.remove();
```
7. D3 Transitions and Animations
- Basic Transition:
```javascript
[Link]("circle")
.transition()
.duration(1000)
.attr("r", 30);
```
- Chained Transitions:
```javascript
[Link]("circle")
.transition().duration(1000).attr("fill", "green")
.transition().duration(1000).attr("cx", 300);
```
- Staggered Transitions:
```javascript
[Link]("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 = [Link]().domain([Link]((d, i) => i)).range([0, width]).padding(0.1);
const y = [Link]().domain([0, [Link](data)]).range([height, 0]);
[Link]("g").attr("transform", `translate(0,${height})`).call([Link](x));
[Link]("g").call([Link](y));
```
- Drawing Bars:```javascript
[Link](".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", (d, i) => x(i))
.attr("y", d => y(d))
.attr("width", [Link]())
.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 = [Link](".tooltip");
[Link](".bar")
.on("mouseover", function(event, d) {
[Link]("display", "block")
.html(`Value: ${d}`)
.style("left", ([Link] + 10) + "px")
.style("top", ([Link] - 20) + "px");
[Link](this).attr("stroke-width", 2).attr("stroke", "black");
})
.on("mouseout", function() {
[Link]("display", "none");
[Link](this).attr("stroke-width", 1);
});
```
- Highlighting Bar on Click:
```javascript
[Link](".bar").on("click", function() {
[Link](".bar").classed("highlighted", false);
[Link](this).classed("highlighted", true);
});
```
10. Scatter Plot in D3
- Setting Up Scales:
```javascript
const x = [Link]().domain([0, [Link](data, d => d.x)]).range([0, width]);
const y = [Link]().domain([0, [Link](data, d => d.y)]).range([height, 0]);
```
- Drawing Points:
```javascript
[Link]("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
[Link]("g").attr("transform", `translate(0,${height})`).call([Link](x));
[Link]("g").call([Link](y));
```
