scampbell2434/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    forked from bunkat's block: Simple Scatter Chart Example
forked from scresawn's block: contig length versus GC content
forked from Craftbd's block: contig length versus GC content

  
## index.html
    <!DOCTYPE html>
    <html>
      <head>
        <title>The d3 test</title>
<style>
.chart {

}

.main text {
    font: 10px sans-serif;
}

.axis line, .axis path {
    shape-rendering: crispEdges;
    stroke: black;
    fill: none;
}

circle {
    fill: steelblue;
}

</style>
  <script src="https://d3js.org/d3.v4.min.js"></script>
      </head>
      <body>
        <div class='content'>
          <!-- /the chart goes here -->
        </div>
        <script type="text/javascript" src="scatterchart.js"></script>
      </body>
    </html>

## scatterchart.js
		var usv = d3.dsvFormat("_");
    var headers = [];

    // this is the parse

    var output = usv.parse(">NODE_length_135_cov_6.362500")
    //console.log(output)

    d3.request("test.fasta")
  		.mimeType("text/plain")
 			.response(function(xhr) { return usv.parse(xhr.responseText) })
    // function that access information from a URL
  		.get(function(data) {
      	//console.log("data: ", data)
      	data.forEach(function (d){
          if (d.node == ">NODE"){
            headers.push(+d.size)
          }
        })
      	console.log ("headers: ", headers);

var formatCount = d3.format(",.0f");

var svg = d3.select("svg"),
    margin = {top: 10, right: 30, bottom: 30, left: 30},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  });

var data = [[5,3], [10,17], [15,4], [2,8]];

    var margin = {top: 20, right: 15, bottom: 60, left: 60}
      , width = 960 - margin.left - margin.right
      , height = 500 - margin.top - margin.bottom;

    var x = d3.scaleLinear()
              .domain([0, d3.max(data, function(d) { return d[0]; })])
              .range([ 0, width ]);

    var y = d3.scaleLinear()
    	      .domain([0, d3.max(data, function(d) { return d[1]; })])
    	      .range([ height, 0 ]);

    var chart = d3.select('body')
	.append('svg:svg')
	.attr('width', width + margin.right + margin.left)
	.attr('height', height + margin.top + margin.bottom)
	.attr('class', 'chart')

    var main = chart.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
	.attr('width', width)
	.attr('height', height)
	.attr('class', 'main')

    // draw the x axis
    var xAxis = d3.axisBottom()
	.scale(x);

    main.append('g')
	.attr('transform', 'translate(0,' + height + ')')
	.attr('class', 'main axis date')
	.call(xAxis);

    // draw the y axis
    var yAxis = d3.axisLeft()
	.scale(y);

    main.append('g')
	.attr('transform', 'translate(0,0)')
	.attr('class', 'main axis date')
	.call(yAxis);

    var g = main.append("svg:g");

    g.selectAll("scatter-dots")
      .data(data)
      .enter().append("svg:circle")
          .attr("cx", function (d,i) { return x(d[0]); } )
          .attr("cy", function (d) { return y(d[1]); } )
          .attr("r", 8);

## test.fasta
node_id_length_size_cov_coverage
>NODE_1339_length_145_cov_15.266667
CGGTTGTCGTCACGGCGGAACCCACCGCCGGAGCCACCACCCCGGTTGTCGTCGCGACGG
AATCCACCACCGGAGGGCCGGTTGTCGTCACGGCGGAAACCGCCACCGGAAGGCCGATCG
TCGTCACGACGCGGACCACGGGGCC
>NODE_1340_length_142_cov_5.252874
ACTACGGTTTCTGGTACCGTCATTCTAGGTTCGAGTCCTGGTAGCCCAGCGCAAGACCAA
GCAGTACGAGCACGATCAGCAGGACAAGCCCCCGTTGTGTAGCGGCCTAGCACGCTGCCC
TCTCACGGCAGTAGCGCCGGTT
>NODE_1341_length_135_cov_6.362500
GCGACGACAACCGGGGTGGTGGCTCCGGCGGTGGGTTCCGCCGTGACGACAACCGCGGTG
GCGACCGCGATCGCGGACCTCGTCGTGATGACGACCGTGGTGGGTACCGGGGTGGTCAGC
AGCGTGATGACCGTG
>NODE_1342_length_134_cov_23.303797
GACCCGACCACCGTGGACGCACCGGACTCCTCCACACCCACAGCCAGAACCGGGTGAGCA
CTGCACTCCACGAAGGCGGACAGCCCATCGGCTATCAACGCCCGCGTCGTCGCCTCGAAC
TCGACGGTCTGCCG
>NODE_1343_length_133_cov_18.487179
GACGTCACGAACCGCTGAGCCCCACCGTCCTCACGGCGCAGGGACCCGACCACCGTGGAC
GCGCCGGACTCCTCCACACCCACGGCGAGGACGGGGTGGGCGCTGCACTCGACGAAGGCG
GACAGCCCGTCGG
>NODE_1344_length_128_cov_12.027397
CAGTGACCTCTTCCGTGTCAGGGAAGCGCTCTCCCGCTGAGCTAATCGCGCGGGGCGGAC
CTGCGTGTACTGCGTGCGCGATACTGGGATTGAACCAGTGACCTCTTCCGTGTCAGGGAA
GCGCTCTC
>NODE_1345_length_127_cov_3.291667
GTCCGCTGAACGGTAGGTGCCTGCGGGGCGGAAGGGGTCCGCTGAACGGTACGGGCCTGT
CCGGCCCGTGGAGTCCGCTGAACGGTAGGTGCCTGCGGGGCGGAAGGGGTCCGCTGAACG
GTACGGG
>NODE_1346_length_126_cov_14.126761
GAGGGCCGCCCGCGCAGGGCTGGGGTGTCCTCGTTCGGGGTCAGCGGAACGAACGCGCAC
GTGATCCTGGAGGAGGCGCCCGCGGTCGCACCTCTCCCCGAGCCCCCGGCCGACCACTCC
GGCCCG
>NODE_1347_length_124_cov_13.028986
AACCGGCGCTACTGCCGTGAGAGGGCAGCGTGCTAGGCCGCTACACAACGGGGGCGCGTT
TACTGCTGACTTGCGCTGGGCTACCAGGACTCGAACCTAGAATGACGGTACCAGAAACCG
TAGT
>NODE_1348_length_121_cov_11.712121
GAACCTAGAATGACGGTACCAGAAACCGTAGTGTTGCCAATTACACCATAGCCCATGGTG
TGACAAGTACCCCCGACCGGATTCGAACCGGCGCTACTGCCGTGAGAGGGCAGCGTGCTA
G
>NODE_1349_length_120_cov_13.092308
TCGGTGTTTCCCCGGCTGCGGTGGTGGGTCATTCGCAGGGTGAGATAGCCGCGGCTGTGG
TGGCGGGTGCGCTCTCCCTGGAGGACGGCGCTCGGATCGTTGCTGAGCGCAGTCGGGTGA
>NODE_1350_length_120_cov_4.707692
GACCCGCCACCACAGCAGCCGCGATCTCCCCCTGCGAGTGACCGACCACGGCATCGGGTT
CCACACCCGCCGCCCGCCAGACCTCCGCCAGGGACACCATCACCGCCCACAACACCGGCT
>NODE_1351_length_114_cov_22.830508
TGACCGGTGGTCTGCTGGACACCGAGCAGCTCGATGCCGCGTACTGGGTGCGGAACCTCC
GGCAGACCGTCGAGTTCGAGGCGACGACGCGGGCGTTGATAGCCGATGGGCTGT
>NODE_1352_length_112_cov_14.280702
GGTCGCCGGTGAAGAACTCGTCCTGGATGCCGAGTGCGGTGAGCGCGGCGTCCAGTGCCT
CCCGGAACACCGGGTAGGTCTCGTAGAGCTCGCGGCCCATGCCGGTGCGCTG
>NODE_1353_length_112_cov_6.052632
AGTGGCTGGGCCGGGTGGATGTGGTCCAGCCGGTGTTGTGGGCGGTGATGGTGTCCCTGG
CGGAGGTGTGGCGGGCGGCGGGTGTGGAGCCGGATGCCGTGGTCGGTCACTC
>NODE_1354_length_110_cov_26.345455
ATGACATGGCTACTGGAACCGTGAAGTGGTTCAACTCGGAAAAGGGCTTCGGCTTCATCG
AGCAGGACGGCGGCGGCGCCGACGTCTTCGCCCACTACTCCAACATCGCC
>NODE_1355_length_110_cov_19.509091
CGTACGCCGACTACGAGAAGGCCTACACCGCCGACCAGTCCGTCGACGGCGTCGCCGACA
CCTGGGACCAGCCGCTGCGCGGCAACTTCAACCAGCTGCGCAAGCTGAAG
>NODE_1356_length_107_cov_24.307692
GTGCTTCTGCCGGGGACGGCGTTCGTGGAGCTCGCGGTGCGGGCCGGGGACGAGGTCGGG
TGCGGCCGGGTCGAGGAGCTGACGCTCCAGGCCCCCCTGATCCTCCC
>NODE_1357_length_106_cov_7.098039
CGGAGAGCCGCCTGGCGTTCATCGGCGAGCGGCTGCGGGCGCACCTGCGCCCCGGATCTG
CGCGAGCTCCTCGACGAGCGGCTGTGCGAGGGCGTCACCCTGGCCG
>NODE_1358_length_105_cov_4.540000
ATCGAAGGCGTACGGGCGATGCACGCCCCCGACCTGGGCTGACGCCCCCGCTGGGCACTT
CCGCTGTGGGACGCCTCCGGGACTCCGTCTCGGCATGGTGTTTCA
>NODE_1359_length_104_cov_13.571429
GACAGACACCTTGTCCGGGTGGCGGAATGGCAGACGCGCTAGCTTGAGGTGCTAGTGCCC
TTTATCGGGCGTGGGGGTTCAAGTCCCCCCTCGGACACCAGCGG
>NODE_1360_length_103_cov_5.395833
GAAATCGGCGCGCGCACATCACGGTTGTGTTGCCGCGGCCCGACGCGCCGCCGGGTCAGC
GCTTGGCGACGAAGACGTGCGACGCGACCTCGGAGTCCAGCTC
>NODE_1361_length_102_cov_4.212766
GCCCTGGCGGCCCGTCACCGGGAGCTGGGCGGCTGACCCCCCGCACACGCCCGGCCGGTC
CCGTTACGTGCGGGTGTGTCACCCTGGTCGGGGTGCGGTGAG
>NODE_1362_length_101_cov_22.869565
GGCAACCCCTCACGAGTTCGAATCTCGTATCCTCCGCCATTGCTCTCACCGGGCAATACG
TTGAAGGGCCCCACCGTTCGCGGTGGGGCCCTTCGACGTTG
	<!DOCTYPE html>
	<html>
	<head>
	<title>The d3 test</title>
	<style>
	.chart {

	}

	.main text {
	font: 10px sans-serif;
	}

	.axis line, .axis path {
	shape-rendering: crispEdges;
	stroke: black;
	fill: none;
	}

	circle {
	fill: steelblue;
	}

	</style>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>
	<body>
	<div class='content'>
	<!-- /the chart goes here -->
	</div>
	<script type="text/javascript" src="scatterchart.js"></script>
	</body>
	</html>
	var usv = d3.dsvFormat("_");
	var headers = [];

	// this is the parse

	var output = usv.parse(">NODE_length_135_cov_6.362500")
	//console.log(output)

	d3.request("test.fasta")
	.mimeType("text/plain")
	.response(function(xhr) { return usv.parse(xhr.responseText) })
	// function that access information from a URL
	.get(function(data) {
	//console.log("data: ", data)
	data.forEach(function (d){
	if (d.node == ">NODE"){
	headers.push(+d.size)
	}
	})
	console.log ("headers: ", headers);

	var formatCount = d3.format(",.0f");

	var svg = d3.select("svg"),
	margin = {top: 10, right: 30, bottom: 30, left: 30},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom,
	g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	});

	var data = [[5,3], [10,17], [15,4], [2,8]];

	var margin = {top: 20, right: 15, bottom: 60, left: 60}
	, width = 960 - margin.left - margin.right
	, height = 500 - margin.top - margin.bottom;

	var x = d3.scaleLinear()
	.domain([0, d3.max(data, function(d) { return d[0]; })])
	.range([ 0, width ]);

	var y = d3.scaleLinear()
	.domain([0, d3.max(data, function(d) { return d[1]; })])
	.range([ height, 0 ]);

	var chart = d3.select('body')
	.append('svg:svg')
	.attr('width', width + margin.right + margin.left)
	.attr('height', height + margin.top + margin.bottom)
	.attr('class', 'chart')

	var main = chart.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
	.attr('width', width)
	.attr('height', height)
	.attr('class', 'main')

	// draw the x axis
	var xAxis = d3.axisBottom()
	.scale(x);

	main.append('g')
	.attr('transform', 'translate(0,' + height + ')')
	.attr('class', 'main axis date')
	.call(xAxis);

	// draw the y axis
	var yAxis = d3.axisLeft()
	.scale(y);

	main.append('g')
	.attr('transform', 'translate(0,0)')
	.attr('class', 'main axis date')
	.call(yAxis);

	var g = main.append("svg:g");

	g.selectAll("scatter-dots")
	.data(data)
	.enter().append("svg:circle")
	.attr("cx", function (d,i) { return x(d[0]); } )
	.attr("cy", function (d) { return y(d[1]); } )
	.attr("r", 8);
	node_id_length_size_cov_coverage
	>NODE_1339_length_145_cov_15.266667
	CGGTTGTCGTCACGGCGGAACCCACCGCCGGAGCCACCACCCCGGTTGTCGTCGCGACGG
	AATCCACCACCGGAGGGCCGGTTGTCGTCACGGCGGAAACCGCCACCGGAAGGCCGATCG
	TCGTCACGACGCGGACCACGGGGCC
	>NODE_1340_length_142_cov_5.252874
	ACTACGGTTTCTGGTACCGTCATTCTAGGTTCGAGTCCTGGTAGCCCAGCGCAAGACCAA
	GCAGTACGAGCACGATCAGCAGGACAAGCCCCCGTTGTGTAGCGGCCTAGCACGCTGCCC
	TCTCACGGCAGTAGCGCCGGTT
	>NODE_1341_length_135_cov_6.362500
	GCGACGACAACCGGGGTGGTGGCTCCGGCGGTGGGTTCCGCCGTGACGACAACCGCGGTG
	GCGACCGCGATCGCGGACCTCGTCGTGATGACGACCGTGGTGGGTACCGGGGTGGTCAGC
	AGCGTGATGACCGTG
	>NODE_1342_length_134_cov_23.303797
	GACCCGACCACCGTGGACGCACCGGACTCCTCCACACCCACAGCCAGAACCGGGTGAGCA
	CTGCACTCCACGAAGGCGGACAGCCCATCGGCTATCAACGCCCGCGTCGTCGCCTCGAAC
	TCGACGGTCTGCCG
	>NODE_1343_length_133_cov_18.487179
	GACGTCACGAACCGCTGAGCCCCACCGTCCTCACGGCGCAGGGACCCGACCACCGTGGAC
	GCGCCGGACTCCTCCACACCCACGGCGAGGACGGGGTGGGCGCTGCACTCGACGAAGGCG
	GACAGCCCGTCGG
	>NODE_1344_length_128_cov_12.027397
	CAGTGACCTCTTCCGTGTCAGGGAAGCGCTCTCCCGCTGAGCTAATCGCGCGGGGCGGAC
	CTGCGTGTACTGCGTGCGCGATACTGGGATTGAACCAGTGACCTCTTCCGTGTCAGGGAA
	GCGCTCTC
	>NODE_1345_length_127_cov_3.291667
	GTCCGCTGAACGGTAGGTGCCTGCGGGGCGGAAGGGGTCCGCTGAACGGTACGGGCCTGT
	CCGGCCCGTGGAGTCCGCTGAACGGTAGGTGCCTGCGGGGCGGAAGGGGTCCGCTGAACG
	GTACGGG
	>NODE_1346_length_126_cov_14.126761
	GAGGGCCGCCCGCGCAGGGCTGGGGTGTCCTCGTTCGGGGTCAGCGGAACGAACGCGCAC
	GTGATCCTGGAGGAGGCGCCCGCGGTCGCACCTCTCCCCGAGCCCCCGGCCGACCACTCC
	GGCCCG
	>NODE_1347_length_124_cov_13.028986
	AACCGGCGCTACTGCCGTGAGAGGGCAGCGTGCTAGGCCGCTACACAACGGGGGCGCGTT
	TACTGCTGACTTGCGCTGGGCTACCAGGACTCGAACCTAGAATGACGGTACCAGAAACCG
	TAGT
	>NODE_1348_length_121_cov_11.712121
	GAACCTAGAATGACGGTACCAGAAACCGTAGTGTTGCCAATTACACCATAGCCCATGGTG
	TGACAAGTACCCCCGACCGGATTCGAACCGGCGCTACTGCCGTGAGAGGGCAGCGTGCTA
	G
	>NODE_1349_length_120_cov_13.092308
	TCGGTGTTTCCCCGGCTGCGGTGGTGGGTCATTCGCAGGGTGAGATAGCCGCGGCTGTGG
	TGGCGGGTGCGCTCTCCCTGGAGGACGGCGCTCGGATCGTTGCTGAGCGCAGTCGGGTGA
	>NODE_1350_length_120_cov_4.707692
	GACCCGCCACCACAGCAGCCGCGATCTCCCCCTGCGAGTGACCGACCACGGCATCGGGTT
	CCACACCCGCCGCCCGCCAGACCTCCGCCAGGGACACCATCACCGCCCACAACACCGGCT
	>NODE_1351_length_114_cov_22.830508
	TGACCGGTGGTCTGCTGGACACCGAGCAGCTCGATGCCGCGTACTGGGTGCGGAACCTCC
	GGCAGACCGTCGAGTTCGAGGCGACGACGCGGGCGTTGATAGCCGATGGGCTGT
	>NODE_1352_length_112_cov_14.280702
	GGTCGCCGGTGAAGAACTCGTCCTGGATGCCGAGTGCGGTGAGCGCGGCGTCCAGTGCCT
	CCCGGAACACCGGGTAGGTCTCGTAGAGCTCGCGGCCCATGCCGGTGCGCTG
	>NODE_1353_length_112_cov_6.052632
	AGTGGCTGGGCCGGGTGGATGTGGTCCAGCCGGTGTTGTGGGCGGTGATGGTGTCCCTGG
	CGGAGGTGTGGCGGGCGGCGGGTGTGGAGCCGGATGCCGTGGTCGGTCACTC
	>NODE_1354_length_110_cov_26.345455
	ATGACATGGCTACTGGAACCGTGAAGTGGTTCAACTCGGAAAAGGGCTTCGGCTTCATCG
	AGCAGGACGGCGGCGGCGCCGACGTCTTCGCCCACTACTCCAACATCGCC
	>NODE_1355_length_110_cov_19.509091
	CGTACGCCGACTACGAGAAGGCCTACACCGCCGACCAGTCCGTCGACGGCGTCGCCGACA
	CCTGGGACCAGCCGCTGCGCGGCAACTTCAACCAGCTGCGCAAGCTGAAG
	>NODE_1356_length_107_cov_24.307692
	GTGCTTCTGCCGGGGACGGCGTTCGTGGAGCTCGCGGTGCGGGCCGGGGACGAGGTCGGG
	TGCGGCCGGGTCGAGGAGCTGACGCTCCAGGCCCCCCTGATCCTCCC
	>NODE_1357_length_106_cov_7.098039
	CGGAGAGCCGCCTGGCGTTCATCGGCGAGCGGCTGCGGGCGCACCTGCGCCCCGGATCTG
	CGCGAGCTCCTCGACGAGCGGCTGTGCGAGGGCGTCACCCTGGCCG
	>NODE_1358_length_105_cov_4.540000
	ATCGAAGGCGTACGGGCGATGCACGCCCCCGACCTGGGCTGACGCCCCCGCTGGGCACTT
	CCGCTGTGGGACGCCTCCGGGACTCCGTCTCGGCATGGTGTTTCA
	>NODE_1359_length_104_cov_13.571429
	GACAGACACCTTGTCCGGGTGGCGGAATGGCAGACGCGCTAGCTTGAGGTGCTAGTGCCC
	TTTATCGGGCGTGGGGGTTCAAGTCCCCCCTCGGACACCAGCGG
	>NODE_1360_length_103_cov_5.395833
	GAAATCGGCGCGCGCACATCACGGTTGTGTTGCCGCGGCCCGACGCGCCGCCGGGTCAGC
	GCTTGGCGACGAAGACGTGCGACGCGACCTCGGAGTCCAGCTC
	>NODE_1361_length_102_cov_4.212766
	GCCCTGGCGGCCCGTCACCGGGAGCTGGGCGGCTGACCCCCCGCACACGCCCGGCCGGTC
	CCGTTACGTGCGGGTGTGTCACCCTGGTCGGGGTGCGGTGAG
	>NODE_1362_length_101_cov_22.869565
	GGCAACCCCTCACGAGTTCGAATCTCGTATCCTCCGCCATTGCTCTCACCGGGCAATACG
	TTGAAGGGCCCCACCGTTCGCGGTGGGGCCCTTCGACGTTG