Skip to content

Instantly share code, notes, and snippets.

@diggetybo

diggetybo/crosshatch2.svg

Created February 6, 2017 20:59
Download ZIP
Range and Parse
Raw
crosshatch2.svg

Unable to render rich display

Invalid image source.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
path:hover {
fill-opacity: .7;
}
.legend {
font-family: Play;
position:absolute;
left:800px;
top:350px;
}
#sliderContainer {
text-align: center;
font-family: Play;
position: absolute;
bottom: 200px;
left: 400px;
}
</style>
</head>
<body>
<div id='sliderContainer'>
<input id='timeslide' type='range' min='0' max='2' value='0' step='1'/><br>
<span id='range'>August</span>
</div>
<script type="text/javascript">
var width = 960;
var height = 500;
var margins = { left: 0, top: 100, right: 0, bottom: 0 };
var parsed = false;
var projection = d3.geo.albersUsa()
.translate([width/2, height/2])
.scale([1000]);
var path = d3.geo.path()
.projection(projection);
var color = d3.scale.linear()
.range(["#aaaaaa","#adc8f0","#999999","#15198e"]);
var legendText = ["Outcome 3", "Outcome 2", "Outcome 1", "None"];
var colorMap = {
"Outcome 3": "#15198e",
"Outcome 2": "url(#hatch-pattern-1)",
"Outcome 1": "#adc8f0",
"None": "#999999"
};
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height+margins.top);
svg.append("defs")
.append("pattern")
.attr("id","hatch-pattern-1")
.attr("patternUnits","userSpaceOnUse")
.attr("width",20)
.attr("height",20)
.append("image")
.attr("xlink:href","crosshatch2.svg")
.attr("x",0)
.attr("y",0)
.attr("width",20)
.attr("height",20);
svg.append('text')
.text('Slide to Magically Parse Some Data')
.attr('font-size','48px')
.attr('transform', 'translate(' + 30 + ',' +90 + ')')
.attr('font-family','Play');
var url = 'fixed-1.tsv';
var file_array = ['my_data-1.tsv','my_data-2.tsv','my_data-3.tsv'];
var period = ['August','September','October'];
d3.select('#timeslide').on('input', function() {
update(+this.value);
});
function update(value) {
document.getElementById('range').innerHTML=period[value];
inputValue = period[value];
dynamic_parse(value);
}
function dynamic_parse(file_index) {
url = file_array[file_index];
d3.tsv(url, function(error, data) {
color.domain([0,1,2,3]);
console.log(url)
d3.json("us-states.json", function(error, json) {
for (var i = 0; i < data.length; i++) {
var dataState = data[i].state;
var dataValue = data[i].fixed;
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.name;
if (dataState == jsonState) {
json.features[j].properties.fixed = dataValue;
console.log('that was quite a loop')
break;
}
}
}
if (parsed==false) {
parsed=true;
console.log('if and only if')
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
.style("stroke", "#fff")
.style("stroke-linejoin","round")
.style("stroke-width", "1.5")
}
svg.selectAll('path')
.style("fill", function(d) {
var data_entry = d.properties.fixed;
if (data_entry) {
return colorMap[data_entry];
} else {
return "rgb(213,222,217)";
}
});
});
if (parsed==false) {
var legend = d3.select("body").append("svg")
.attr("class", "legend")
.attr("width", 140)
.attr("height", 200+margins.top)
.selectAll("g")
.data(color.domain().slice().reverse())
.enter()
.append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("width", 18)
.attr("height", 18)
.attr('transform', 'translate(' + margins.left + ',' + 220 + ')')
.style("fill", function(d,i) {
var val = d
if (val ==2) {
return "url(#hatch-pattern-1)"
}
else { return color(val)}
});
legend.append("text")
.data(legendText)
.attr("x", 24)
.attr("y", 9)
.attr('transform', 'translate(' + margins.left + ',' + 220 + ')')
.attr("dy", ".35em")
.text(function(d) { return d; });
}
});
}
</script>
</body>
</html>
Raw
my_data-1.tsv
state fixed
Alabama Outcome 1
Alaska Outcome 1
Arizona Outcome 3
Arkansas Outcome 1
California Outcome 3
Colorado Outcome 1
Connecticut Outcome 3
Delaware None
Florida Outcome 1
Georgia Outcome 1
Hawaii Outcome 1
Iowa Outcome 1
Idaho Outcome 3
Illinois Outcome 1
Indiana Outcome 1
Kansas Outcome 1
Kentucky Outcome 1
Louisiana Outcome 3
Massachusetts Outcome 3
Maine Outcome 1
Maryland Outcome 1
Michigan Outcome 3
Minnesota Outcome 2
Mississippi None
Missouri Outcome 3
Montana Outcome 1
Nebraska Outcome 1
North Carolina Outcome 1
North Dakota None
New Hampshire Outcome 3
New Jersey Outcome 3
New Mexico None
Nevada Outcome 3
New York Outcome 3
Ohio Outcome 3
Oklahoma Outcome 1
Oregon Outcome 1
Pennsylvania Outcome 2
Rhode Island Outcome 3
South Carolina Outcome 1
South Dakota Outcome 3
Tennessee Outcome 1
Texas Outcome 3
Utah None
Virginia Outcome 3
Vermont Outcome 1
Washington Outcome 3
West Virginia Outcome 1
Wisconsin Outcome 3
Wyoming Outcome 3
Raw
my_data-2.tsv
state fixed
Alabama Outcome 3
Alaska Outcome 1
Arizona Outcome 2
Arkansas Outcome 1
California Outcome 1
Colorado Outcome 1
Connecticut Outcome 3
Delaware None
Florida Outcome 1
Georgia Outcome 1
Hawaii Outcome 1
Iowa Outcome 1
Idaho Outcome 3
Illinois Outcome 1
Indiana Outcome 3
Kansas Outcome 1
Kentucky Outcome 1
Louisiana Outcome 3
Massachusetts None
Maine Outcome 1
Maryland Outcome 3
Michigan Outcome 3
Minnesota Outcome 2
Mississippi None
Missouri None
Montana Outcome 1
Nebraska None
North Carolina Outcome 1
North Dakota None
New Hampshire Outcome 3
New Jersey Outcome 3
New Mexico None
Nevada Outcome 3
New York Outcome 3
Ohio Outcome 3
Oklahoma Outcome 1
Oregon Outcome 3
Pennsylvania Outcome 2
Rhode Island Outcome 3
South Carolina Outcome 1
South Dakota Outcome 3
Tennessee Outcome 1
Texas Outcome 3
Utah None
Virginia Outcome 3
Vermont Outcome 1
Washington Outcome 3
West Virginia Outcome 1
Wisconsin Outcome 3
Wyoming Outcome 3
Raw
my_data-3.tsv
state fixed
Alabama Outcome 3
Alaska Outcome 1
Arizona Outcome 2
Arkansas Outcome 1
California Outcome 3
Colorado Outcome 1
Connecticut Outcome 3
Delaware None
Florida Outcome 1
Georgia Outcome 1
Hawaii None
Iowa Outcome 3
Idaho Outcome 3
Illinois Outcome 1
Indiana Outcome 3
Kansas Outcome 1
Kentucky None
Louisiana Outcome 3
Massachusetts None
Maine Outcome 1
Maryland Outcome 3
Michigan Outcome 3
Minnesota Outcome 1
Mississippi None
Missouri None
Montana Outcome 1
Nebraska Outcome 2
North Carolina Outcome 1
North Dakota Outcome 3
New Hampshire Outcome 1
New Jersey Outcome 3
New Mexico None
Nevada Outcome 3
New York Outcome 3
Ohio Outcome 1
Oklahoma Outcome 1
Oregon Outcome 2
Pennsylvania Outcome 2
Rhode Island Outcome 3
South Carolina Outcome 1
South Dakota Outcome 3
Tennessee Outcome 1
Texas Outcome 3
Utah None
Virginia Outcome 3
Vermont Outcome 1
Washington Outcome 3
West Virginia Outcome 1
Wisconsin Outcome 3
Wyoming Outcome 3
Raw
us-states.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment