> For the complete documentation index, see [llms.txt](https://huang-jason.gitbook.io/js-syntax/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://huang-jason.gitbook.io/js-syntax/d3-2.md).
# D3 - 2
## SVG
```markup
```
1. Everything outside svg.width & svg.height will be **hided**.
2. `` color is controlled by stroke.
## Select
### Binding data
```javascript
var svg = d3.select("#chart-area").append("svg")
.attr("width", 500)
.attr("height", 500);
d3.json("data/buildings.json").then(data => {
data.forEach( d => {
d.height = +d.height;
});
var rects = svg.selectAll("rect")
.data(data);
rects.enter()
.append("rect")
.attr("x", (d, i) => (i * 50))
.attr("y", 25)
.attr("width", 25)
.attr("height", d => d.height)
.attr("fill", "red");
});
```
### Load data
```javascript
d3.csv("data/input.csv").then(x => { // csv, tsv, json
console.log(x);
).catch(error => {
console.log(error);
})
```
### Scale -> create scale func
1. `scaleLinear`
2. `scaleLog`
3. `scaleTime`
4. `scaleBand`
### min, max, extent
### Translation