「PythonとJavaScriptではじめるデータビジュアライゼーション」を読む

4.7.3円

<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    svg#chart{
        background: lightgray;
    }
</style>
<svg id="chart" width="300" height="225">
    <circle r="15" cx="100" cy="50"></circle>
</svg>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="script.js"></script>
</body>

結果

f:id:bitop:20170910152230p:plain

4.7.4 CSSスタイルの運用

<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    svg#chart{
        background: lightgray;
    }
    #chart circle{fill:lightblue}
</style>
<svg id="chart" width="300" height="225">
    <circle r="15" cx="100" cy="50"></circle>
</svg>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="script.js"></script>
</body>

結果

f:id:bitop:20170910152625p:plain

4.7.5線、矩形、多角形

<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    svg#chart{
        background: lightcoral;
    }
    #chart circle{fill:lightblue}
    #chart line{stroke: #555555;stroke-width: 2}
    #chart rect{stroke: red;fill: white}
    #chart polygon{fill:green}
</style>
<svg id="chart" width="300" height="225">
    <circle r="15" cx="100" cy="50"></circle>
    <line x1="20" y1="20" x2="20" y2="130"></line>
    <line x1="20" y1="130" x2="280" y2="130"></line>
    <rect x="240" y="5" width="55" height="30"></rect>
    <polygon points="210,100,230,100,220,80"></polygon>
</svg>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="script.js"></script>
</body>

結果

f:id:bitop:20170910155743p:plain

4.7.6テキスト

<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    svg#chart{
        background: lightcoral;
    }
    #chart circle{fill:lightblue}
    #chart line{stroke: #555555;stroke-width: 2}
    #chart rect{stroke: red;fill: white}
    #chart polygon{fill:green}
</style>
<svg id="chart" width="300" height="225">
    <circle r="15" cx="100" cy="50"></circle>
    <line x1="20" y1="20" x2="20" y2="130"></line>
    <line x1="20" y1="130" x2="280" y2="130"></line>
    <rect x="240" y="5" width="55" height="30"></rect>
    <polygon points="210,100,230,100,220,80"></polygon>
    <text id="title" text-anchor="middle" x="150" y="20">
        A Dummy Chart
    </text>
    <text x="20" y="20" transform="rotate(-90,20,20)" text-anchor="end" dy="0.71em">
        y axis label
    </text>
</svg>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="script.js"></script>
</body>

結果

f:id:bitop:20170910164501p:plain

4.7.7パス

<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    svg#chart{
        background: lightcoral;
    }
    #chart circle{fill:lightblue}
    #chart line{stroke: #555555;stroke-width: 2}
    #chart rect{stroke: red;fill: white}
    #chart polygon{fill:green}
    #chart path{stroke:red; fill:none}
</style>
<svg id="chart" width="300" height="225">
    <circle r="15" cx="100" cy="50"></circle>
    <line x1="20" y1="20" x2="20" y2="130"></line>
    <line x1="20" y1="130" x2="280" y2="130"></line>
    <rect x="240" y="5" width="55" height="30"></rect>
    <polygon points="210,100,230,100,220,80"></polygon>
    <text id="title" text-anchor="middle" x="150" y="20">
        A Dummy Chart
    </text>
    <text x="20" y="20" transform="rotate(-90,20,20)" text-anchor="end" dy="0.71em">
        y axis label
    </text>
    <path d="M20 130L60 70L110 100L160 45"></path>
</svg>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="script.js"></script>
</body>

結果

f:id:bitop:20170910170140p:plain

<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    svg#chart{
        background: lightgray;
    }
    #chart path{stroke:red; fill:none}
</style>
<svg id="chart" width="300" height="150">
    <path d="M40 40
            A30 40
            0 0 1
            80 80
            A50 50 0 0 1 160 80
            A30 30 0 0 1 190 80
    ">
</svg>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="script.js"></script>
</body>

結果

f:id:bitop:20170910170712p:plain

<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    svg#chart{
        background: lightgray;
    }
    #chart path{stroke:red; fill:none}
</style>
<svg id="chart" width="300" height="150">
    <path d="M40 80
            A30 40 0 0 1 80 80
            A30 40 0 0 0 120 80
            A30 40 0 1 0 160 80
            A30 40 0 1 1 200 80
    ">
</svg>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="script.js"></script>
</body>

結果

f:id:bitop:20170910171130p:plain

4.7.8拡大縮小と回転

<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    svg#chart{
        background: lightgray;
    }
    #chart path{stroke:red; fill:none}
</style>
<svg id="chart" width="300" height="150">
    <rect width="20" height="40" transform="translate(60,55)" fill="blue"/>
    <rect width="20" height="40" transform="translate(120,55),rotate(45)" fill="blue"/>
    <rect width="20" height="40" transform="translate(180,55),scale(0.5)" fill="blue"/>
    <rect width="20" height="40" transform="translate(240,55),rotate(45),scale(0.5)" fill="blue"/>
</svg>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="script.js"></script>
</body>

結果

f:id:bitop:20170910172008p:plain

4.7.9グループ

<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    svg#chart{
        background: lightgray;
    }
</style>
<svg id="chart" width="300" height="150">
    <g id="shapes" transform="translate(150,75)">
        <circle cx="50" cy="0" r="25" fill="red"/>
        <rect x="30" y="10" width="40" height="20" fill="blue"/>
        <path d="M-20 -10 L50 -10L10 60Z" fill="green"/>
        <circle r="10" fill="yellow"/>
    </g>
</svg>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="script.js"></script>
</body>

結果

f:id:bitop:20170910174012p:plain

<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    svg#chart{
        background: lightgray;
    }
    #chart circle{opacity:0.33}
</style>
<svg id="chart" width="300" height="150">
    <g transform="translate(150,75)">
        <circle cx="0" cy="-20" r="30" fill="red"/>
        <circle cx="17.3" cy="10" r="30" fill="green"/>
        <circle cx="-17.3" cy="10" r="30" fill="blue"/>
    </g>
</svg>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="script.js"></script>
</body>

結果

f:id:bitop:20170911075434p:plain

4.7.11 JavaScriptによるSVG

index.html
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    svg#chart{
        background: lightgray;
    }
    #chart circle{fill:red}
</style>
<body>
    <svg id="chart" >
    </svg>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="script.js"></script>
</body>

script.js
var chartCircles = function(data){
var chart = d3.select('#chart');
chart.attr('height',data.height).attr('width',data.width);
chart.selectAll('circle').data(data.circle)
    .enter()
    .append('circle')
    .attr('cx',function(d){return d.x})
    .attr('cy',function(d){return d.y})
    .attr('r',function(d){return d.r});
};
var data ={
    width:300,height:150,
    circle:[
        {'x':50,'y':30,'r':20},
        {'x':70,'y':80,'r':10},
        {'x':160,'y':60,'r':10},
        {'x':200,'y':100,'r':5}            
    ]
};
chartCircles(data);

結果

f:id:bitop:20170911082642p:plain