shimizu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    width:100%;
    height:100%;
}

#chart {
    width: 100%;
    height: 100%;
    border: 8px dashed gray;
    border-left: none;
    border-top:none;
    cursor:all-scroll;
}
#chart svg{
    width: 100%;
    height: 100%;
    cursor: default;
}

  .grid {
    display:none;
  }

.grid .tick line {
    stroke:#ccc;
    stroke-dasharray:1;
}

.line {
    fill:none;
}


</style>
<script src="//unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script src="//unpkg.com/d3@4.12.2/build/d3.min.js"></script>
</head>
<body>
<div id="chart">
    <svg></svg>
</div>


<script type="text/babel">
const data = [
  {x:0, y:100},
  {x:40, y:0},
  {x:80, y:100},
  {x:120, y:0}
]


const svg = d3.select("#chart").select("svg");
const grid = svg.append("g").classed("grid", true);
const plot = svg.append("g").classed("plot", true);
const axis = svg.append("g").classed("axis", true);
const yScale = d3.scaleLinear().domain([100, 0]);
const xScale = d3.scaleLinear().domain([0, 120]);

const lineGen = d3.line()
    .x(d => xScale(d.x))
    .y(d => yScale(d.y))


render();

function render(){
    const m = {top:50, left:150, right:150, bottom:50};
    const w = svg.node().clientWidth || svg.node().parentNode.clientWidth;
    const h = svg.node().clientHeight || svg.node().parentNode.clientHeight;
    const pw = w - (m.left + m.right);
    const ph = h - (m.top + m.bottom);


    yScale.range([0, ph]);
    xScale.range([0, pw]);

    //axis layer
    axis.attr("transform", `translate(${m.left}, ${m.top})`);

    //y axis
    const yAxisUpdate = axis.selectAll(".yAxis").data([null]);
    const yAxisEnter = yAxisUpdate.enter().append("g").classed("yAxis", true);

    const yAxisRender = d3.axisLeft().scale(yScale).tickFormat(() => null);; //左側のaxisにaxisRightを使うことでラベルを内向きにする

    const yAxis = yAxisUpdate.merge(yAxisEnter).call(yAxisRender);

    yAxis.select(".domain").remove();
    yAxis.selectAll(".tick line").remove();

    //tickラベルの表示位置を調整する
    yAxis.selectAll(".tick text")
        .attr("text-anchor", "end") //ラベルを右寄せにする（お好みで）


    //x axis
    const xAxisUpdate = axis.selectAll(".xAxis").data([null]);
    const xAxisEnter = xAxisUpdate.enter().append("g").classed("xAxis", true);

    const renderAxis =  d3.axisBottom().scale(xScale).tickFormat(() => null);

    const xAxis = xAxisUpdate.merge(xAxisEnter).call(renderAxis)
        .attr("transform", `translate(0, ${ph})`);

    xAxis.select(".domain").remove();
    xAxis.selectAll(".tick line").remove();

    //grid layer
    grid.attr("transform", `translate(${m.left}, ${m.top})`)

    //x grid
    const xGridUpdate = grid.selectAll(".xGrid").data([null]);
    const xGridEnter = xGridUpdate.enter().append("g").classed("xGrid", true);
    const xGrid = xGridUpdate.merge(xGridEnter).call( d3.axisTop().scale(xScale).tickSizeInner(-ph).tickFormat(() => null) );

      xGrid.select(".domain").remove();


    //y grid
    const yGridUpdate = grid.selectAll(".yGrid").data([null]);
    const yGridEnter = yGridUpdate.enter().append("g").classed("yGrid", true);

    const yGrid = yGridUpdate.merge(yGridEnter).call( d3.axisLeft().scale(yScale).tickSizeInner(-pw).tickFormat(() => null) );

    yGrid.select(".domain").remove();

    //plot layer
    plot.attr("transform", `translate(${m.left}, ${m.top})`)


    //center
    plot.append("line")
    	.attr("x1",xScale(0))
    	.attr("x2",xScale(120))
    	.attr("y1", yScale(50))
    	.attr("y2", yScale(50))
     .attr("stroke", "black")
     .attr("stroke-width", 6)
    .attr("stroke-dasharray", 10)


    //line
    const lineUpdate = plot.selectAll("path").data([data]);
    const lineEnter = lineUpdate.enter().append("path").classed("line", true);

    const line = lineUpdate.merge(lineEnter)
        .attr("d", lineGen)
       .attr("stroke", "black")
        .attr("stroke-width", 6)

    //circle
    const circle = plot.selectAll("circle")
     .data(data)
     .enter()
    	.append("circle")
     .attr("cx", d => xScale(d.x))
     .attr("cy", d => yScale(d.y))
     .attr("r", 8)

}


</script>


</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="jp">
	<head>
	<style>
	html, body {
	margin: 0px;
	padding: 0px;
	width:100%;
	height:100%;
	}

	#chart {
	width: 100%;
	height: 100%;
	border: 8px dashed gray;
	border-left: none;
	border-top:none;
	cursor:all-scroll;
	}
	#chart svg{
	width: 100%;
	height: 100%;
	cursor: default;
	}

	.grid {
	display:none;
	}

	.grid .tick line {
	stroke:#ccc;
	stroke-dasharray:1;
	}

	.line {
	fill:none;
	}


	</style>
	<script src="//unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
	<script src="//unpkg.com/d3@4.12.2/build/d3.min.js"></script>
	</head>
	<body>
	<div id="chart">
	<svg></svg>
	</div>



	<script type="text/babel">
	const data = [
	{x:0, y:100},
	{x:40, y:0},
	{x:80, y:100},
	{x:120, y:0}
	]


	const svg = d3.select("#chart").select("svg");
	const grid = svg.append("g").classed("grid", true);
	const plot = svg.append("g").classed("plot", true);
	const axis = svg.append("g").classed("axis", true);
	const yScale = d3.scaleLinear().domain([100, 0]);
	const xScale = d3.scaleLinear().domain([0, 120]);

	const lineGen = d3.line()
	.x(d => xScale(d.x))
	.y(d => yScale(d.y))


	render();

	function render(){
	const m = {top:50, left:150, right:150, bottom:50};
	const w = svg.node().clientWidth \|\| svg.node().parentNode.clientWidth;
	const h = svg.node().clientHeight \|\| svg.node().parentNode.clientHeight;
	const pw = w - (m.left + m.right);
	const ph = h - (m.top + m.bottom);


	yScale.range([0, ph]);
	xScale.range([0, pw]);

	//axis layer
	axis.attr("transform", `translate(${m.left}, ${m.top})`);

	//y axis
	const yAxisUpdate = axis.selectAll(".yAxis").data([null]);
	const yAxisEnter = yAxisUpdate.enter().append("g").classed("yAxis", true);

	const yAxisRender = d3.axisLeft().scale(yScale).tickFormat(() => null);; //左側のaxisにaxisRightを使うことでラベルを内向きにする

	const yAxis = yAxisUpdate.merge(yAxisEnter).call(yAxisRender);

	yAxis.select(".domain").remove();
	yAxis.selectAll(".tick line").remove();

	//tickラベルの表示位置を調整する
	yAxis.selectAll(".tick text")
	.attr("text-anchor", "end") //ラベルを右寄せにする（お好みで）


	//x axis
	const xAxisUpdate = axis.selectAll(".xAxis").data([null]);
	const xAxisEnter = xAxisUpdate.enter().append("g").classed("xAxis", true);

	const renderAxis = d3.axisBottom().scale(xScale).tickFormat(() => null);

	const xAxis = xAxisUpdate.merge(xAxisEnter).call(renderAxis)
	.attr("transform", `translate(0, ${ph})`);

	xAxis.select(".domain").remove();
	xAxis.selectAll(".tick line").remove();

	//grid layer
	grid.attr("transform", `translate(${m.left}, ${m.top})`)

	//x grid
	const xGridUpdate = grid.selectAll(".xGrid").data([null]);
	const xGridEnter = xGridUpdate.enter().append("g").classed("xGrid", true);
	const xGrid = xGridUpdate.merge(xGridEnter).call( d3.axisTop().scale(xScale).tickSizeInner(-ph).tickFormat(() => null) );

	xGrid.select(".domain").remove();


	//y grid
	const yGridUpdate = grid.selectAll(".yGrid").data([null]);
	const yGridEnter = yGridUpdate.enter().append("g").classed("yGrid", true);

	const yGrid = yGridUpdate.merge(yGridEnter).call( d3.axisLeft().scale(yScale).tickSizeInner(-pw).tickFormat(() => null) );

	yGrid.select(".domain").remove();

	//plot layer
	plot.attr("transform", `translate(${m.left}, ${m.top})`)


	//center
	plot.append("line")
	.attr("x1",xScale(0))
	.attr("x2",xScale(120))
	.attr("y1", yScale(50))
	.attr("y2", yScale(50))
	.attr("stroke", "black")
	.attr("stroke-width", 6)
	.attr("stroke-dasharray", 10)


	//line
	const lineUpdate = plot.selectAll("path").data([data]);
	const lineEnter = lineUpdate.enter().append("path").classed("line", true);

	const line = lineUpdate.merge(lineEnter)
	.attr("d", lineGen)
	.attr("stroke", "black")
	.attr("stroke-width", 6)

	//circle
	const circle = plot.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", d => xScale(d.x))
	.attr("cy", d => yScale(d.y))
	.attr("r", 8)

	}





	</script>


	</body>
	</html>