Created
February 22, 2015 09:45
-
-
Save kutovova/8b232f36725a8803f645 to your computer and use it in GitHub Desktop.
Посещаемость музеев (теплокарта)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Теплокарта</title> | |
| <script src='http://d3js.org/d3.v3.js'></script> | |
| </head> | |
| <style type="text/css"> | |
| text{ | |
| font-size:10px; | |
| font-family: 'Segoe UI'; | |
| } | |
| path, line { | |
| fill:none; | |
| } | |
| .headers { | |
| font-size:15px; | |
| font-weight: 600; | |
| } | |
| .valv { | |
| font-size:13px; | |
| font-weight: 600; | |
| } | |
| </style> | |
| <body> | |
| </body> | |
| <script> | |
| var margin = {top:0, right:0, bottom:0, left:60} | |
| var width = 1280 - margin.left - margin.right | |
| var height = 500 - margin.top - margin.bottom | |
| var svg = d3.select('body').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 + ')') | |
| d3.csv('http://d3-js.ru/data/british-museums.csv', function(rows) { | |
| var nested = d3.nest() | |
| .key(function(d){ | |
| return d.Museum | |
| }) | |
| .entries(rows) | |
| var size = 20 | |
| var color = d3.scale.linear() | |
| .domain([0,400000,650000]) | |
| .range(['white','green', '#020']) | |
| var years = d3.time.scale() | |
| .domain([new Date(2004,0,1), new Date(2014,0,1)]) | |
| .range([size * 0.5 , size * 10.5]) | |
| var months = d3.time.scale() | |
| .domain([new Date(2014,0,1), new Date(2014,11,1)]) | |
| .range([size * 2.5, size * 13.5]) | |
| console.log(nested); | |
| var museums = svg | |
| .selectAll('g') | |
| .data(nested) | |
| .enter() | |
| .append('g') | |
| .attr('transform', function (d,i) { | |
| return 'translate('+ 17 * size * i + ',0)' | |
| }) | |
| var popup = svg.append('text') | |
| .attr('dy', size * 20) | |
| .attr('class', 'valv') | |
| museums | |
| .selectAll('g') | |
| .data (function(d) {return d.values}) | |
| .enter() | |
| .append('g') | |
| .attr('transform', function (d,i) { | |
| return 'translate(0,'+ size * (2+i)+')' | |
| }) | |
| .selectAll('rect') | |
| .data(function(d) { | |
| delete d.Month | |
| delete d.Museum | |
| return d3.keys(d).map(function(key){ | |
| return d[key] | |
| }) | |
| }) | |
| .enter() | |
| .append('rect') | |
| .attr('width', size) | |
| .attr('height', size) | |
| .attr('x', function(d, i) {return i * size} ) | |
| .attr('fill', color) | |
| .on('mouseover', function(d) { | |
| popup.text(d + ' посетителей') | |
| }) | |
| .on('mouseout', function(d) { | |
| popup.text('') | |
| }) | |
| museums.append('g') | |
| .attr('transform', 'translate(0,' + (size * 14) + ')') | |
| .call(d3.svg.axis() | |
| .orient('bottom') | |
| .scale(years) | |
| .tickSize(0) | |
| .tickFormat(d3.time.format('%y')) | |
| .ticks(12)) | |
| museums.append('g') | |
| .call(d3.svg.axis() | |
| .orient('left') | |
| .scale(months) | |
| .tickSize(2) | |
| .ticks(12) | |
| .tickFormat(function(d) { | |
| return d3.time.format('%b')(d) | |
| }) | |
| ) | |
| museums | |
| .append('text') | |
| .text(function(d){return d.key}) | |
| .attr('dy',size) | |
| .attr('dx', size *5,5) | |
| .attr('class','headers') | |
| .style('text-anchor','middle') | |
| }) | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment