D3 - 2

SVG

<svg width="400" height="60">
    <rect x="0" y="0" width="50" height="50" fill="green"></rect>

    <circle cx="90" cy="25" r="25" fill="red"></circle>

    <ellipse cx="145" cy="25" rx="15" ry="25" fill="grey"></ellipse>

    <line x1="185" y1="5" x2="230" y2="40" stroke="blue" stroke-width="5"></line>

    <text x="260" y="25" font-size="20px" fill="orange">Hello World</text>
</svg>


<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

1. Everything outside svg.width & svg.height will be hided.

2. <line> color is controlled by stroke.

Select

Binding data

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

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