li01012/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>class-02 demo</title>

<style>
.line {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}
rect {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}
path{
  fill: none;
  stroke: black;
}

</style>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<body>
<script>
var width = 960;
var height = 500;

var data = null; // global variable
// Set the map projection centered on Texas
var projection = d3.geoMercator()
    .scale(2000)
    .center([-98.90, 31.96]);

var path = d3.geoPath()
    .pointRadius(5)
    .projection(projection);
    //projection.fitSize([width, height], object);
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
var layer1 = svg.append("g");
var layer2 = svg.append("g");


var url = "https://raw.githubusercontent.com/TNRIS/tx.geojson/master/counties/tx_counties.geojson";
var TEX = "https://raw.githubusercontent.com/li01012/classes/master/Project/Final_Texas_Data.csv";

// Read and plot the state & county boundaries
d3.json(url, plotState);
var color = d3.scaleThreshold()
	.domain(d3.range(2, 10).map(function(d) {return d * 1000 }))
  //state plot
function plotState(error, tx) {
  if (error) console.log(error);

var all = tx.features;
   d3.csv(TEX, function(err, csv){
  if (err) throw err;
    var data = d3.map();
  csv.forEach(function(d) {data.set(d.FIPS, +d.Average_An)[0]})
   svg.selectAll('path.County')
      .data( all)
    .enter().append("path")
      .attr("d", path)
      .attr("stroke", "#aaa")
      .attr("stroke-width", 0.5)
      .attr("fill", function(d) { return color(d.FIPS)});

  svg.append("path")
      .attr("stroke", "#aaa")
      .attr("stroke-width", 0.5)
  		.attr("d", path(topojson.mesh(tx, tx.features.geometry, function(a, b) { return  a !== b;
  })));

   });

  layer1.selectAll("path")
      .data(all)
  	.enter().append ("path")
      .attr("d", path);


   svg.append("path")
      .attr("d", path(topojson.feature(tx, tx.features.geometry)[0]));

  //plot csv data

  //.csv(TEX, function(err, csv){
 //f (err) throw err;
 //sv.forEach(function(d) { tx.features.set(d.id, +d.object[1])});
//console.log(csv[0])

 //


  //chawalein


 //cosole.log[0]
}
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>class-02 demo</title>

	<style>
	.line {
	fill: none;
	stroke: black;
	stroke-width: 1px;
	}
	rect {
	fill: none;
	stroke: black;
	stroke-width: 1px;
	}
	path{
	fill: none;
	stroke: black;
	}

	</style>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/topojson-client@3"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>
	<body>
	<script>
	var width = 960;
	var height = 500;

	var data = null; // global variable
	// Set the map projection centered on Texas
	var projection = d3.geoMercator()
	.scale(2000)
	.center([-98.90, 31.96]);

	var path = d3.geoPath()
	.pointRadius(5)
	.projection(projection);
	//projection.fitSize([width, height], object);
	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);
	var layer1 = svg.append("g");
	var layer2 = svg.append("g");


	var url = "https://raw.githubusercontent.com/TNRIS/tx.geojson/master/counties/tx_counties.geojson";
	var TEX = "https://raw.githubusercontent.com/li01012/classes/master/Project/Final_Texas_Data.csv";

	// Read and plot the state & county boundaries
	d3.json(url, plotState);
	var color = d3.scaleThreshold()
	.domain(d3.range(2, 10).map(function(d) {return d * 1000 }))
	//state plot
	function plotState(error, tx) {
	if (error) console.log(error);

	var all = tx.features;
	d3.csv(TEX, function(err, csv){
	if (err) throw err;
	var data = d3.map();
	csv.forEach(function(d) {data.set(d.FIPS, +d.Average_An)[0]})
	svg.selectAll('path.County')
	.data( all)
	.enter().append("path")
	.attr("d", path)
	.attr("stroke", "#aaa")
	.attr("stroke-width", 0.5)
	.attr("fill", function(d) { return color(d.FIPS)});

	svg.append("path")
	.attr("stroke", "#aaa")
	.attr("stroke-width", 0.5)
	.attr("d", path(topojson.mesh(tx, tx.features.geometry, function(a, b) { return a !== b;
	})));

	});

	layer1.selectAll("path")
	.data(all)
	.enter().append ("path")
	.attr("d", path);


	svg.append("path")
	.attr("d", path(topojson.feature(tx, tx.features.geometry)[0]));

	//plot csv data

	//.csv(TEX, function(err, csv){
	//f (err) throw err;
	//sv.forEach(function(d) { tx.features.set(d.id, +d.object[1])});
	//console.log(csv[0])

	//



	//chawalein


	//cosole.log[0]
	}
	</script>