Skip to content

Instantly share code, notes, and snippets.

@pirj

pirj/report.js Secret

Created April 12, 2016 08:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pirj/f8618c99e9dccb4bf6766201f703b35c to your computer and use it in GitHub Desktop.
Save pirj/f8618c99e9dccb4bf6766201f703b35c to your computer and use it in GitHub Desktop.
d3js+crossfilter http://imgur.com/fJmGtvK
window.addEventListener('load', function() {
d3.tsv("/data/results.tsv", function(error, data) {
data.forEach(function(d, i) { d.date = d3.time.format.iso.parse(d.date) })
var domain_chart = dc.rowChart("#dc-domain-chart"),
search_chart = dc.rowChart("#dc-search-chart"),
time_chart = dc.barChart("#dc-time-chart")
var cross = crossfilter(data),
domain = cross.dimension(function(d) { return d.domain }),
domains = domain.group()
search = cross.dimension(function(d) { return d.search }),
searches = search.group(),
date = cross.dimension(function(d) { return d.date }),
dates = date.group(d3.time.hour),
domain_chart.width(780).height(500)
.dimension(domain)
.data(function(group) { return group.top(20) })
.group(domains)
.elasticX(true)
.colors(d3.scale.category20b())
.ordering(function(d){ return -d.value })
domain_chart
.xAxis().ticks(4)
search_chart.width(390).height(500)
.dimension(search)
.group(searches)
.elasticX(true)
.colors(d3.scale.category20c())
.xAxis().ticks(4)
time_chart.width(1170).height(200)
.dimension(date)
.group(dates)
.elasticY(true)
.x(d3.time.scale().domain([date.bottom(1)[0].date, date.top(1)[0].date]))
.renderHorizontalGridLines(true)
.centerBar(true)
dc.renderAll()
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment