ThomasThoren/README.md

## README.md

      
        
                
      Raw
    
  

        
        
          
            
          
          
            
              README.md
            
          
        
      
      
    Practice with map locations and labels.

  

  

## index.html
<!DOCTYPE html>
<head>
<title>Louisiana drop shadow</title>
<meta charset="utf-8">
<style>

  body {
    padding: 0;
    margin: 0;
  }

  svg {
    background-color: #E8C691;
  }

  .bold {
    font-weight: bold;
  }

  .parishes {
    fill: #FAFAFA;
    stroke: #777;
    stroke-opacity: 0.5;
    stroke-width: 0.5px;
    opacity: 0.8;
  }

  .parish-border {
    fill: none;
    stroke: #DFDFDF;
  }

  .state-border {
    fill: none;
    stroke: #585858;
  }

  .city-label {
    font-weight: 500;
    text-transform: uppercase;
    text-anchor: middle;
    opacity: 0.4;
    color: #000;
    font-family: arial, helvetica, sans-serif;
    font-size: 13px;
  }

  .map-note-text {
    font-size: 15px;
    font-weight: 500;
    color: #000;
    font-family: arial, helvetica, sans-serif;
    line-height: 18px;
    margin: 0;
  }

  .state-label {
    font-weight: 500;
    text-transform: uppercase;
    text-anchor: middle;
    opacity: 0.3;
    color: #000;
    font-family: arial, helvetica, sans-serif;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0.333em;
  }

</style>
</head>
<body>

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

  var width = 960,
      height = 650;

  var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

  // Inset map
  var map_projection = d3.geo.albers()
    .translate([width / 2, height / 2])
    .rotate([91.6, 0])  // Rotate CCW (looking down onto North Pole)
    .center([0, 31.2])
    .parallels([29, 33])
    .scale(8000);

  var map_path = d3.geo.path()
    .projection(map_projection);

  d3.json("parishes.json", function(error, data) {
    if (error) throw error;

    // Draw land
    svg.append("g")
      .attr("class", "parishes")
    .selectAll("path")
      .data(topojson.feature(data, data.objects.parishes).features)
    .enter().append("path")
      .attr("fill", function(d) {
        var parish_code_as_int = parseInt(d.properties.parishcode, 10);
        if (parish_code_as_int < 30) {
          return "#C00";
        } else if (parish_code_as_int >= 30 && parish_code_as_int < 60) {
          return "#FDBF4F";
        } else {
          return "#FFF";
        }
      })
      .attr("d", map_path);

    // Draw parish borders
    svg.append("path")
      .datum(topojson.mesh(data, data.objects.parishes, function(a, b) { return a !== b; }))
      .attr("class", "parish-border")
      .attr("d", map_path);

    // Draw state border
    svg.append("path")
      .datum(topojson.mesh(data, data.objects.parishes, function(a, b) { return a === b; }))
      .attr("class", "state-border")
      .attr("d", map_path);

    // Draw circle marker
    svg.selectAll('.circle-icon')
        .data(topojson.feature(data, data.objects.parishes).features)
      .enter().append('circle')
        .each(function(d) {
          if (d.properties.parishname !== 'Caddo' && d.properties.parishname !== 'Lafayette') {
            return;
          }
          d3.select(this)
            .attr("r", 4)
            .attr("transform", function(d) { return "translate(" + map_path.centroid(d) + ")"; })
            .attr("fill", "none")
            .attr("stroke", "black")
            .attr("stroke-width", 2);
        })
        .filter(function(d) {
        return d.properties.parishname !== 'Caddo' && d.properties.parishname !== 'Lafayette';
        }).remove();  // Delete empty circle elements

    // Draw parish name
    svg.selectAll('.parish-label')
        .data(topojson.feature(data, data.objects.parishes).features)
      .enter().append('text')
        .each(function(d) {
          if (d.properties.parishname !== 'Orleans') {
            return;
          }
          d3.select(this)
            .attr("transform", function(d) { return "translate(" + map_path.centroid(d) + ")"; })
            // .attr("dx", "-3em")
            // .attr("dy", "-0.5em")
            .attr("fill", "black")
            .style("text-anchor", "end")
            .text(function(d) { return d.properties.parishname });
        })
        .filter(function(d) {
          return d.properties.parishname !== 'Orleans';
        }).remove();

    // Draw parish text note
    svg.selectAll('.parish-note')
        .data(topojson.feature(data, data.objects.parishes).features)
      .enter().append('text')
        .each(function(d) {
          if (d.properties.parishname === 'Lafayette') {
            d3.select(this)
              .attr("transform", function(d) { return "translate(" + map_path.centroid(d) + ")"; })
              .attr("dx", "-150")
              .attr("dy", "150")
              .attr("fill", "black")
              .style("text-anchor", "end")
              .text("Welcome to Lafayette.");
          } else if (d.properties.parishname === 'Caddo') {
            d3.select(this)
              .attr("transform", function(d) { return "translate(" + map_path.centroid(d) + ")"; })
              .attr("dx", "10")
              .attr("dy", "-90")
              .attr("fill", "black")
              .attr("id", "caddo-text")
              .style("text-anchor", "start")
              .text("This is the ");
            d3.select(this)
              .append("tspan")
              .attr("class", "bold")
              .text("centroid ");
            d3.select(this)
              .append("tspan")
              .attr("x", "10")
              .attr("y", "-75")
              .style("text-anchor", "start")
              .text("of Caddo Parish.");
          } else {
            return;
          }
        })
        .filter(function(d) {
          return d.properties.parishname !== 'Caddo' && d.properties.parishname !== 'Lafayette';
        }).remove();

    // Draw line between parish marker and text
    // Line path generator
    var line = d3.svg.line()
      .x(function(d) { return d.x; })
      .y(function(d) { return d.y; })
      .interpolate("basis");

    svg.selectAll(".parish-line")
        .data(topojson.feature(data, data.objects.parishes).features)
      .enter().append('path')
        .attr("class", "parish-line")
        .attr("d", function(d) {
          var centroid = map_path.centroid(d);

          if (d.properties.parishname === 'Lafayette') {
            var lineData = [
              {"x": centroid[0] - 4, "y": centroid[1] + 4},
              {"x": centroid[0] - 145, "y": centroid[1] + 145}
            ];
          } else if (d.properties.parishname === 'Caddo') {
            var lineData = [
              {"x": centroid[0], "y": centroid[1] - 4},
              {"x": centroid[0] + 10, "y": centroid[1] - 72}
            ];
          } else {
            return;
          }
          return line(lineData);
        })
        .attr("stroke", "black")
        .attr("stroke-width", 1)
        .attr("opacity", 0.8)
        .attr("fill", "#000")
        .filter(function(d) {
          return d.properties.parishname !== 'Caddo' && d.properties.parishname !== 'Lafayette';
        }).remove();

    // State label
    svg.append("text")
      .attr("class", "state-label")
      .attr("x", width * 0.35)
      .attr("y", height * 0.4)
      .text('Louisiana');

  });

  // Allows iframe on bl.ocks.org.
  d3.select(self.frameElement).style("height", height + "px");

</script>
</body>
</html>

## parishes.json

      
        
            
    
      
  Display the source blob

    
      
  Display the rendered blob

                
      Raw
    
  

        
        
          
            
          
          
            
              parishes.json
            
          
        
      
    
    

          
    
      
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
  
 
    

  

## thumbnail.png

      
        
                
      Raw
    
  

        
        
          
            
          
          
            
              thumbnail.png
	<!DOCTYPE html>
	<head>
	<title>Louisiana drop shadow</title>
	<meta charset="utf-8">
	<style>

	body {
	padding: 0;
	margin: 0;
	}

	svg {
	background-color: #E8C691;
	}

	.bold {
	font-weight: bold;
	}

	.parishes {
	fill: #FAFAFA;
	stroke: #777;
	stroke-opacity: 0.5;
	stroke-width: 0.5px;
	opacity: 0.8;
	}

	.parish-border {
	fill: none;
	stroke: #DFDFDF;
	}

	.state-border {
	fill: none;
	stroke: #585858;
	}

	.city-label {
	font-weight: 500;
	text-transform: uppercase;
	text-anchor: middle;
	opacity: 0.4;
	color: #000;
	font-family: arial, helvetica, sans-serif;
	font-size: 13px;
	}

	.map-note-text {
	font-size: 15px;
	font-weight: 500;
	color: #000;
	font-family: arial, helvetica, sans-serif;
	line-height: 18px;
	margin: 0;
	}

	.state-label {
	font-weight: 500;
	text-transform: uppercase;
	text-anchor: middle;
	opacity: 0.3;
	color: #000;
	font-family: arial, helvetica, sans-serif;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: 0.333em;
	}

	</style>
	</head>
	<body>

	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script>

	var width = 960,
	height = 650;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	// Inset map
	var map_projection = d3.geo.albers()
	.translate([width / 2, height / 2])
	.rotate([91.6, 0]) // Rotate CCW (looking down onto North Pole)
	.center([0, 31.2])
	.parallels([29, 33])
	.scale(8000);

	var map_path = d3.geo.path()
	.projection(map_projection);

	d3.json("parishes.json", function(error, data) {
	if (error) throw error;

	// Draw land
	svg.append("g")
	.attr("class", "parishes")
	.selectAll("path")
	.data(topojson.feature(data, data.objects.parishes).features)
	.enter().append("path")
	.attr("fill", function(d) {
	var parish_code_as_int = parseInt(d.properties.parishcode, 10);
	if (parish_code_as_int < 30) {
	return "#C00";
	} else if (parish_code_as_int >= 30 && parish_code_as_int < 60) {
	return "#FDBF4F";
	} else {
	return "#FFF";
	}
	})
	.attr("d", map_path);

	// Draw parish borders
	svg.append("path")
	.datum(topojson.mesh(data, data.objects.parishes, function(a, b) { return a !== b; }))
	.attr("class", "parish-border")
	.attr("d", map_path);

	// Draw state border
	svg.append("path")
	.datum(topojson.mesh(data, data.objects.parishes, function(a, b) { return a === b; }))
	.attr("class", "state-border")
	.attr("d", map_path);

	// Draw circle marker
	svg.selectAll('.circle-icon')
	.data(topojson.feature(data, data.objects.parishes).features)
	.enter().append('circle')
	.each(function(d) {
	if (d.properties.parishname !== 'Caddo' && d.properties.parishname !== 'Lafayette') {
	return;
	}
	d3.select(this)
	.attr("r", 4)
	.attr("transform", function(d) { return "translate(" + map_path.centroid(d) + ")"; })
	.attr("fill", "none")
	.attr("stroke", "black")
	.attr("stroke-width", 2);
	})
	.filter(function(d) {
	return d.properties.parishname !== 'Caddo' && d.properties.parishname !== 'Lafayette';
	}).remove(); // Delete empty circle elements

	// Draw parish name
	svg.selectAll('.parish-label')
	.data(topojson.feature(data, data.objects.parishes).features)
	.enter().append('text')
	.each(function(d) {
	if (d.properties.parishname !== 'Orleans') {
	return;
	}
	d3.select(this)
	.attr("transform", function(d) { return "translate(" + map_path.centroid(d) + ")"; })
	// .attr("dx", "-3em")
	// .attr("dy", "-0.5em")
	.attr("fill", "black")
	.style("text-anchor", "end")
	.text(function(d) { return d.properties.parishname });
	})
	.filter(function(d) {
	return d.properties.parishname !== 'Orleans';
	}).remove();

	// Draw parish text note
	svg.selectAll('.parish-note')
	.data(topojson.feature(data, data.objects.parishes).features)
	.enter().append('text')
	.each(function(d) {
	if (d.properties.parishname === 'Lafayette') {
	d3.select(this)
	.attr("transform", function(d) { return "translate(" + map_path.centroid(d) + ")"; })
	.attr("dx", "-150")
	.attr("dy", "150")
	.attr("fill", "black")
	.style("text-anchor", "end")
	.text("Welcome to Lafayette.");
	} else if (d.properties.parishname === 'Caddo') {
	d3.select(this)
	.attr("transform", function(d) { return "translate(" + map_path.centroid(d) + ")"; })
	.attr("dx", "10")
	.attr("dy", "-90")
	.attr("fill", "black")
	.attr("id", "caddo-text")
	.style("text-anchor", "start")
	.text("This is the ");
	d3.select(this)
	.append("tspan")
	.attr("class", "bold")
	.text("centroid ");
	d3.select(this)
	.append("tspan")
	.attr("x", "10")
	.attr("y", "-75")
	.style("text-anchor", "start")
	.text("of Caddo Parish.");
	} else {
	return;
	}
	})
	.filter(function(d) {
	return d.properties.parishname !== 'Caddo' && d.properties.parishname !== 'Lafayette';
	}).remove();

	// Draw line between parish marker and text
	// Line path generator
	var line = d3.svg.line()
	.x(function(d) { return d.x; })
	.y(function(d) { return d.y; })
	.interpolate("basis");

	svg.selectAll(".parish-line")
	.data(topojson.feature(data, data.objects.parishes).features)
	.enter().append('path')
	.attr("class", "parish-line")
	.attr("d", function(d) {
	var centroid = map_path.centroid(d);

	if (d.properties.parishname === 'Lafayette') {
	var lineData = [
	{"x": centroid[0] - 4, "y": centroid[1] + 4},
	{"x": centroid[0] - 145, "y": centroid[1] + 145}
	];
	} else if (d.properties.parishname === 'Caddo') {
	var lineData = [
	{"x": centroid[0], "y": centroid[1] - 4},
	{"x": centroid[0] + 10, "y": centroid[1] - 72}
	];
	} else {
	return;
	}
	return line(lineData);
	})
	.attr("stroke", "black")
	.attr("stroke-width", 1)
	.attr("opacity", 0.8)
	.attr("fill", "#000")
	.filter(function(d) {
	return d.properties.parishname !== 'Caddo' && d.properties.parishname !== 'Lafayette';
	}).remove();

	// State label
	svg.append("text")
	.attr("class", "state-label")
	.attr("x", width * 0.35)
	.attr("y", height * 0.4)
	.text('Louisiana');

	});

	// Allows iframe on bl.ocks.org.
	d3.select(self.frameElement).style("height", height + "px");

	</script>
	</body>
	</html>