shimizu/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    D3.js ver.4 を使って作成した散布図

  
## data.csv

          
            name
            stature
            weight

            
              hoge
              165
              56

            
              hellow
               172
              63

            
              world
               183
              72

            
              fuga
               174
              68

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>D3 v4 - scatterChart</title>
<style>
#graph {
    width: 900px;
    height: 500px;
}
.tick line {
    stroke-dasharray: 2 2 ;
    stroke: #ccc;
}

</style>
</head>

<body>
<div id="graph"></div>


<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
<script>
!(function(){
    "use strict"

    var width,height
    var chartWidth, chartHeight
    var margin
    var svg = d3.select("#graph").append("svg")
    var axisLayer = svg.append("g").classed("axisLayer", true)
    var chartLayer = svg.append("g").classed("chartLayer", true)

    var xScale = d3.scaleLinear()
    var yScale = d3.scaleLinear()

    var xAxis,yAxis

    d3.csv("data.csv", cast,  main)

    function cast(d) {
        d.stature = +d.stature
        d.weight = +d.weight
        return d
    }

    function main(data) {
        setSize(data)
        drawAxis()
        drawChart(data)
        animation()
    }

    function setSize(data) {
        width = document.querySelector("#graph").clientWidth
        height = document.querySelector("#graph").clientHeight

        margin = {top:0, left:80, bottom:40, right:0 }


        chartWidth = width - (margin.left+margin.right)
        chartHeight = height - (margin.top+margin.bottom)

        svg.attr("width", width).attr("height", height)

        axisLayer.attr("width", width).attr("height", height)

        chartLayer
            .attr("width", chartWidth)
            .attr("height", chartHeight)
            .attr("transform", "translate("+[margin.left, margin.top]+")")


        xScale.domain([0, 190]).range([0, chartWidth])
        yScale.domain([0, 90]).range([chartHeight, 0])

    }

    function drawChart(data) {
        var point = chartLayer.selectAll(".point").data(data)

        point.exit().remove()

        point.enter().append("circle").classed("point", true)
            .merge(point)
            .attr("r", 4)
            .attr("transform", function(d){ return "translate("+[xScale(d.stature), yScale(d.weight)]+")"})

    }

    function drawAxis(){

        yAxis = axisLayer.append("g")
            .attr("transform", "translate("+[margin.left, margin.top]+")")
            .attr("class", "axis y")
            .call(d3.axisLeft(yScale).tickSizeInner(-chartWidth))

        xAxis = axisLayer.append("g")
            .attr("class", "axis x")
            .attr("transform", "translate("+[margin.left, chartHeight]+")")
            .call(d3.axisBottom(xScale).tickSizeInner(-chartHeight))

    }

    function animation() {
        if (xScale.domain()[0] == 0 && yScale.domain()[0] == 0){
            xScale.domain([160, 190])
            yScale.domain([50, 90])
        }else{
            xScale.domain([0, 190])
            yScale.domain([0, 90])
        }

        var t = d3.transition()
            .delay(1000)
            .duration(1600)
            .ease(d3.easeLinear)
            .on("end", animation)

        yAxis.transition(t).call(d3.axisLeft(yScale).tickSizeInner(-chartWidth))
        xAxis.transition(t).call(d3.axisBottom(xScale).tickSizeInner(-chartHeight))

        chartLayer.selectAll(".point")
            .transition(t)
            .attr("transform", function(d){ return "translate("+[xScale(d.stature), yScale(d.weight)]+")"})
    }
}());
</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<title>D3 v4 - scatterChart</title>
	<style>
	#graph {
	width: 900px;
	height: 500px;
	}
	.tick line {
	stroke-dasharray: 2 2 ;
	stroke: #ccc;
	}

	</style>
	</head>

	<body>
	<div id="graph"></div>


	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
	<script>
	!(function(){
	"use strict"

	var width,height
	var chartWidth, chartHeight
	var margin
	var svg = d3.select("#graph").append("svg")
	var axisLayer = svg.append("g").classed("axisLayer", true)
	var chartLayer = svg.append("g").classed("chartLayer", true)

	var xScale = d3.scaleLinear()
	var yScale = d3.scaleLinear()

	var xAxis,yAxis

	d3.csv("data.csv", cast, main)

	function cast(d) {
	d.stature = +d.stature
	d.weight = +d.weight
	return d
	}

	function main(data) {
	setSize(data)
	drawAxis()
	drawChart(data)
	animation()
	}

	function setSize(data) {
	width = document.querySelector("#graph").clientWidth
	height = document.querySelector("#graph").clientHeight

	margin = {top:0, left:80, bottom:40, right:0 }


	chartWidth = width - (margin.left+margin.right)
	chartHeight = height - (margin.top+margin.bottom)

	svg.attr("width", width).attr("height", height)

	axisLayer.attr("width", width).attr("height", height)

	chartLayer
	.attr("width", chartWidth)
	.attr("height", chartHeight)
	.attr("transform", "translate("+[margin.left, margin.top]+")")


	xScale.domain([0, 190]).range([0, chartWidth])
	yScale.domain([0, 90]).range([chartHeight, 0])

	}

	function drawChart(data) {
	var point = chartLayer.selectAll(".point").data(data)

	point.exit().remove()

	point.enter().append("circle").classed("point", true)
	.merge(point)
	.attr("r", 4)
	.attr("transform", function(d){ return "translate("+[xScale(d.stature), yScale(d.weight)]+")"})

	}

	function drawAxis(){

	yAxis = axisLayer.append("g")
	.attr("transform", "translate("+[margin.left, margin.top]+")")
	.attr("class", "axis y")
	.call(d3.axisLeft(yScale).tickSizeInner(-chartWidth))

	xAxis = axisLayer.append("g")
	.attr("class", "axis x")
	.attr("transform", "translate("+[margin.left, chartHeight]+")")
	.call(d3.axisBottom(xScale).tickSizeInner(-chartHeight))

	}

	function animation() {
	if (xScale.domain()[0] == 0 && yScale.domain()[0] == 0){
	xScale.domain([160, 190])
	yScale.domain([50, 90])
	}else{
	xScale.domain([0, 190])
	yScale.domain([0, 90])
	}

	var t = d3.transition()
	.delay(1000)
	.duration(1600)
	.ease(d3.easeLinear)
	.on("end", animation)

	yAxis.transition(t).call(d3.axisLeft(yScale).tickSizeInner(-chartWidth))
	xAxis.transition(t).call(d3.axisBottom(xScale).tickSizeInner(-chartHeight))

	chartLayer.selectAll(".point")
	.transition(t)
	.attr("transform", function(d){ return "translate("+[xScale(d.stature), yScale(d.weight)]+")"})
	}
	}());
	</script>
	</body>
	</html>