Skip to content

Instantly share code, notes, and snippets.

@benrudolph
Last active August 29, 2015 14:03
Show Gist options
  • Select an option

  • Save benrudolph/bb92455f688fc49a9ac7 to your computer and use it in GitHub Desktop.

Select an option

Save benrudolph/bb92455f688fc49a9ac7 to your computer and use it in GitHub Desktop.
Chronicle searches
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
padding: 40px;
}
div {
font-family: sans-serif;
color: white;
padding: 4px;
margin-bottom: 2px;
text-shadow: 0 1px 0 #000;
overflow: hidden;
}
.bar {
fill: steelblue;
}
.axis text {
font: 10px sans-serif;
font-weight: 300;
}
.axis path,
.axis line {
fill: none;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.tick line {
stroke: rgb(200,200,200);
}
</style>
<body>
<div id="graph"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
d3.csv('words.csv', function(data) {
console.log(data)
var margin = { top: 10, bottom: 100, left: 30, right: 20 };
var width = 880 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain(data.map(function(d) { return d.Word }))
.rangePoints([0, width], 2);
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return +d.Sum })])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickSize(-width);
var g = d3.select('#graph').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll('text')
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(70)")
.style("text-anchor", "start");
g.append("g")
.attr("class", "y axis")
.call(yAxis);
var rects = g.selectAll('.bar').data(data);
rects.enter().append('rect')
rects.attr('x', function(d) { return x(d.Word) - 2 })
.attr('y', function(d) { return y(+d.Sum) })
.attr('height', function(d) { return y(0) - y(+d.Sum) })
.attr('width', 4)
.attr('class', 'bar')
});
</script>
Word Sum
refugee 33
women 17
asylum 16
idp 15
gay 15
torture 14
rights 14
syria 14
innovation 14
stateless 12
children 12
war 12
gender 11
peace 10
education 10
lgbt 9
security 8
protection 8
unicorn 7
colombia 7
IDP 7
humanitarian 7
Gender 7
illegal 6
climate 6
crisis 6
iraq 6
love 6
displaced 6
rape 6
trauma 6
development 6
migration 5
death 5
solutions 5
hunger 5
sexual 5
people 5
homosexual 5
solidarity 5
conflict 4
terrorism 4
hope 4
resettlement 4
yellow 4
soccer 4
human 4
america 4
poverty 4
muslim 4
map 4
israel 4
problem 4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment