<commit_before>---
layout: post
title: D3 Choropleth Map 
css:
tags: [[library juice, D3, map, choropleth]]
javascript:
- l/d3.min.js
- l/queue.v1.min.js
- l/topojson.v1.min.js
- p/map.clinic.js
---

<div id="clinic"></div> 

I am taking a [Library Juice Academy](http://libraryjuiceacademy.com/) class on using [D3](http://d3js.org/). I created this choropleth map for my third assignment. 

```
$( document ).ready(function (){ 

	//declare vars
	var width,
	height;  

	var projection = d3.geo.albers()
		.scale(width)
		.translate([]);

	var path = d3.geo.path()
		.projection(projection)
		.pointRadius(1);

	var map = d3.select("#clinic").append("svg")
		.attr("width", width)
		.attr("height", height);	

	//loads map data - using queue.v1.min.js
	queue()
		.defer(d3.json, "/assets/data/us.json")
		.defer(d3.json, "/assets/data/state.topo.clinics.json")
		.defer(d3.csv, "/assets/data/dialysis.clinics.csv")
		.await(ready);

	//function for when data is loaded
	function ready(error, us, state, clinics) {

		//quantize state clinic counts 
		var color_data = [];
		state.objects.state.geometries.forEach();

		//us data
		map.append("path")
			.datum(topojson.feature(us, us.objects.land))
			.attr("class", "land")
			.attr("d", path)
			.attr("style",); 
		
		//state data 
		var color_scale = d3.scale.quantize()
			.domain()
			.range([]);

		map.append("g")
			.attr("class", "state")
			.selectAll("path")
			.data(topojson.feature(state, state.objects.state).features)
			.enter()
			.append("path") 
			.attr("d", path)
			.style("fill", );

		//adds legend
		var legend = map.selectAll("g.legend")
			.data(color_scale.range())
			.enter()
			.append("g")
			.attr("class", "legend");

		legend.append("rect")
			.attr("x", )
			.attr("y", )
			.attr("width", )
			.attr("height", )
			.style("stroke", )
			.style("stroke-width", )
			.style("fill", )

		legend.append("text")
			.attr("x", )
			.attr("y", )
			.attr("dy", )
			.text()

		//clinic data
		map.append("path")
		.datum({type: "MultiPoint", coordinates: clinics})
		.attr("class", "points")
		.attr("d", path); 
		
	}//end ready funciton 
}); // end .ready() 
```<commit_msg>update text of D3-Choropleth-Map<commit_after>---
layout: post
title: D3 Choropleth Map 
css:
tags: [[library juice, D3, map, choropleth]]
javascript:
- l/d3.min.js
- l/queue.v1.min.js
- l/topojson.v1.min.js
- p/map.clinic.js
---

<div id="clinic"></div> 

I am taking a [Library Juice Academy](http://libraryjuiceacademy.com/) class on using [D3](http://d3js.org/). I created this choropleth map for my third assignment. The map is a bit off because I the topoJSON file includes the area for lakes and water, but the basic functionality is there. 

```
$( document ).ready(function (){ 

	//declare vars
	var width,
	height;  

	var projection = d3.geo.albers()
		.scale(width)
		.translate([]);

	var path = d3.geo.path()
		.projection(projection)
		.pointRadius(1);

	var map = d3.select("#clinic").append("svg")
		.attr("width", width)
		.attr("height", height);	

	//loads map data - using queue.v1.min.js
	queue()
		.defer(d3.json, "/assets/data/us.json")
		.defer(d3.json, "/assets/data/state.topo.clinics.json")
		.defer(d3.csv, "/assets/data/dialysis.clinics.csv")
		.await(ready);

	//function for when data is loaded
	function ready(error, us, state, clinics) {

		//quantize state clinic counts 
		var color_data = [];
		state.objects.state.geometries.forEach();

		//us data
		map.append("path")
			.datum(topojson.feature(us, us.objects.land))
			.attr("class", "land")
			.attr("d", path)
			.attr("style",); 
		
		//state data 
		var color_scale = d3.scale.quantize()
			.domain()
			.range([]);

		map.append("g")
			.attr("class", "state")
			.selectAll("path")
			.data(topojson.feature(state, state.objects.state).features)
			.enter()
			.append("path") 
			.attr("d", path)
			.style("fill", );

		//adds legend
		var legend = map.selectAll("g.legend")
			.data(color_scale.range())
			.enter()
			.append("g")
			.attr("class", "legend");

		legend.append("rect")
			.attr("x", )
			.attr("y", )
			.attr("width", )
			.attr("height", )
			.style("stroke", )
			.style("stroke-width", )
			.style("fill", )

		legend.append("text")
			.attr("x", )
			.attr("y", )
			.attr("dy", )
			.text()

		//clinic data
		map.append("path")
		.datum({type: "MultiPoint", coordinates: clinics})
		.attr("class", "points")
		.attr("d", path); 

	}//end ready funciton 
}); // end .ready() 
```
{'fraction_non_alphanumeric': 0.20524311001568452, 'fraction_numerical': 0.007394129509298678, 'mean_word_length': 3.129509713228492, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '351814', 'n_tokens_mistral': 1921, 'n_tokens_neox': 1675, 'n_words': 353}