Scribd
Upload
3 views6 pages

Cheatsheet

The document provides a comprehensive guide on using HTML, CSS, and JavaScript for data visualization with D3.js. It covers the basics of HTML structure, CSS styling, SVG creation, and D3.js functionalities including data binding, transitions, and creating interactive charts like bar charts and scatter plots. Additionally, it includes code snippets for implementing tooltips and highlighting features in visualizations.

Uploaded by

i221861 Sara Zahid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views6 pages

Cheatsheet

The document provides a comprehensive guide on using HTML, CSS, and JavaScript for data visualization with D3.js. It covers the basics of HTML structure, CSS styling, SVG creation, and D3.js functionalities including data binding, transitions, and creating interactive charts like bar charts and scatter plots. Additionally, it includes code snippets for implementing tooltips and highlighting features in visualizations.

Uploaded by

i221861 Sara Zahid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

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));
```

You might also like