2d:null 2e:["$","title",null,{"children":"Краткий обзор пользователей d3 | Roman Klimenko | Observable"}] 33:Ta19,/* var a = db.users.aggregate( [ { $match: { birthday: { $exists: true } } }, { $match: { birthday: { $ne: '1970-01-01' } } }, { $project: { total_count: 1, birthday: 1, is_active: { $cond: [{ $eq: ['$total_count', 0] }, false, true] } } }, { $group: { _id: { 'birthday': '$birthday', 'is_active': '$is_active' }, count: { $sum: 1 } } }, { $sort: { _id: 1 } } ]).toArray() var result = {} a.forEach(x => { if(!result[x._id.birthday]) { result[x._id.birthday] = {} } if(x._id.is_active) { result[x._id.birthday].active = x.count } if(!x._id.is_active) { result[x._id.birthday].passive = x.count } }) printjsononeline(result) */ { const height = 400; const svg = d3.select(DOM.svg(width, height)); const x = d3 .scaleTime() .domain(d3.extent(by_birthday, d => d.date)) .range([margin.left, width - margin.right]); const max_count = d3.max(by_birthday, d => Math.max(d.active, d.passive)); const y = d3 .scaleLog() .base(2) .domain([1, max_count]) .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr('transform', `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(10)); const yAxis = g => g .attr('transform', `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(10)); svg.append('g').call(xAxis); svg.append('g').call(yAxis); const stroke_width = (width - margin.left - margin.right) / by_birthday.length / 2; svg .append('g') .selectAll('line') .data(by_birthday) .enter() .append('line') // .attr('x1', d => x(d.date)) .attr('y1', d => y(1)) .attr('x2', d => x(d.date)) .attr('y2', d => y(d.active + 1)) .attr('stroke', colors.green.A700) .attr('stroke-width', stroke_width); svg .append('g') .selectAll('line') .data(by_birthday) .enter() .append('line') // .attr('x1', d => x(d.date) + stroke_width) .attr('y1', d => y(1)) .attr('x2', d => x(d.date) + stroke_width) .attr('y2', d => y(d.passive + 1)) .attr('stroke', colors.brown._900) .attr('stroke-width', stroke_width); return svg.node(); }34:Ta0f,/* var a = db.users.aggregate( [ { $match: { birthday: { $exists: true } } }, { $match: { birthday: { $ne: '1970-01-01' } } }, { $project: { total_count: 1, birthday: 1, is_active: { $cond: [{ $eq: ['$total_count', 0] }, false, true] } } }, { $group: { _id: { 'birthday': '$birthday', 'is_active': '$is_active' }, count: { $sum: 1 } } }, { $sort: { _id: 1 } } ]).toArray() var result = {} a.forEach(x => { if(!result[x._id.birthday]) { result[x._id.birthday] = {} } if(x._id.is_active) { result[x._id.birthday].active = x.count } if(!x._id.is_active) { result[x._id.birthday].passive = x.count } }) printjsononeline(result) */ { const height = 400; const svg = d3.select(DOM.svg(width, height)); const x = d3 .scaleTime() .domain(d3.extent(by_birthday, d => d.date)) .range([margin.left, width - margin.right]); const max_count = d3.max(by_birthday, d => Math.max(d.active, d.passive)); const y = d3 .scaleLinear() .domain([0, max_count]) .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr('transform', `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(10)); const yAxis = g => g .attr('transform', `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(10)); svg.append('g').call(xAxis); svg.append('g').call(yAxis); const stroke_width = (width - margin.left - margin.right) / by_birthday.length / 2; svg .append('g') .selectAll('line') .data(by_birthday) .enter() .append('line') // .attr('x1', d => x(d.date)) .attr('y1', d => y(1)) .attr('x2', d => x(d.date)) .attr('y2', d => y(d.active + 1)) .attr('stroke', colors.green.A700) .attr('stroke-width', stroke_width); svg .append('g') .selectAll('line') .data(by_birthday) .enter() .append('line') // .attr('x1', d => x(d.date) + stroke_width) .attr('y1', d => y(1)) .attr('x2', d => x(d.date) + stroke_width) .attr('y2', d => y(d.passive + 1)) .attr('stroke', colors.brown._900) .attr('stroke-width', stroke_width); return svg.node(); }35:T509,{ const svg = d3.select(DOM.svg(width, bar_height)) const x = d3.scaleLinear() .domain(d3.extent([0, passive])) .range([0, width]) svg .append('rect') .attr('x', x(0)) .attr('y', 0) .attr('width', x(passive_by_gender.male)) .attr('height', bar_height) .attr('fill', colors.blue.A100) svg .append('text') .text(passive_by_gender.male) .attr('x', x(passive_by_gender.male) / 2) .attr('y', bar_height / 2 + 6) .attr('text-anchor', 'middle') .attr('fill', '#FFF') .attr('font-size', '20px') svg .append('rect') .attr('x', x(passive_by_gender.male)) .attr('y', 0) .attr('width', x(passive_by_gender.female)) .attr('height', bar_height) .attr('fill', colors.pink.A100) svg .append('text') .text(passive_by_gender.female) .attr('x', x(passive_by_gender.male + passive_by_gender.female / 2)) .attr('y', bar_height / 2 + 6) .attr('text-anchor', 'middle') .attr('fill', '#FFF') .attr('font-size', '20px') svg .append('rect') .attr('x', x(passive_by_gender.male + passive_by_gender.female)) .attr('y', 0) .attr('width', x(passive_by_gender.other)) .attr('height', bar_height) .attr('fill', colors.purple.A100) return svg.node() }36:T508,{ const svg = d3.select(DOM.svg(width, bar_height)); const x = d3 .scaleLinear() .domain(d3.extent([0, logins - passive])) .range([0, width]); svg .append('rect') .attr('x', x(0)) .attr('y', 0) .attr('width', x(active_by_gender.male)) .attr('height', bar_height) .attr('fill', colors.blue.A200); svg .append('text') .text(active_by_gender.male) .attr('x', x(active_by_gender.male) / 2) .attr('y', bar_height / 2 + 6) .attr('text-anchor', 'middle') .attr('fill', '#FFF') .attr('font-size', '20px'); svg .append('rect') .attr('x', x(active_by_gender.male)) .attr('y', 0) .attr('width', x(active_by_gender.female)) .attr('height', bar_height) .attr('fill', colors.pink.A200); svg .append('text') .text(active_by_gender.female) .attr('x', x(active_by_gender.male + active_by_gender.female / 2)) .attr('y', bar_height / 2 + 6) .attr('text-anchor', 'middle') .attr('fill', '#FFF') .attr('font-size', '20px'); svg .append('rect') .attr('x', x(active_by_gender.male + active_by_gender.female)) .attr('y', 0) .attr('width', x(active_by_gender.other)) .attr('height', bar_height) .attr('fill', colors.purple.A200); return svg.node(); }37:T5fc,{ const height = 600 const svg = d3.select(DOM.svg(width, height)) const g = svg.append('g').attr('transform', 'translate(50,0)') const x = d3.scaleTime() .domain(d3.extent(by_birthday, d => d.date)) .range([margin.left, width - margin.right]) const data = biggest_families[0] const tree = d3.tree().size([height, width - 100]) const root = d3.hierarchy(data, d => d.children) tree(root) const link = g.selectAll('.link') .data(root.descendants().slice(1)) .enter() .append('path') .attr('class', 'link') .attr('fill', 'none') .attr('stroke', d => d.data.data.total_count > 0 ? colors.green.A700 : colors.brown._900) .attr('stroke-opacity', .4) .attr('stroke-width', '1.5px') .attr('d', d => `M${d.y},${d.x}C${d.parent.y + 100},${d.x} ${d.parent.y + 100},${d.parent.x} ${d.parent.y},${d.parent.x}`) const node = g.selectAll('.node') .data(root.descendants()) .enter() .append('g') .attr('class', d => 'node' + (d.children ? ' node--internal' : ' node--leaf')) .attr('transform', d => `translate(${d.y},${d.x})`) node.append('circle') .attr('r', 1.5) .attr('fill', d => d.data.data.total_count > 0 ? colors.green.A700 : colors.brown._900) node.append('text') .attr('dy', 3) .attr('x', d => d.children ? -8 : 8) .style('text-anchor', d => d.children ? 'end' : 'start') .style('font', '5px sans-serif') .text(d => d.data.name) return svg.node() }38:T640,{ const height = 600; const svg = d3.select(DOM.svg(width, height)); const g = svg.append('g').attr('transform', 'translate(50,0)'); const x = d3 .scaleTime() .domain(d3.extent(by_birthday, d => d.date)) .range([margin.left, width - margin.right]); const data = biggest_families[1]; const tree = d3.tree().size([height, width - 100]); const root = d3.hierarchy(data, d => d.children); tree(root); const link = g .selectAll('.link') .data(root.descendants().slice(1)) .enter() .append('path') .attr('class', 'link') .attr('fill', 'none') .attr('stroke', d => d.data.data.total_count > 0 ? colors.green.A700 : colors.brown._900 ) .attr('stroke-opacity', .4) .attr('stroke-width', '1.5px') .attr( 'd', d => `M${d.y},${d.x}C${d.parent.y + 100},${d.x} ${d.parent.y + 100},${ d.parent.x } ${d.parent.y},${d.parent.x}` ); const node = g .selectAll('.node') .data(root.descendants()) .enter() .append('g') .attr( 'class', d => 'node' + (d.children ? ' node--internal' : ' node--leaf') ) .attr('transform', d => `translate(${d.y},${d.x})`); node .append('circle') .attr('r', 1.5) .attr('fill', d => d.data.data.total_count > 0 ? colors.green.A700 : colors.brown._900 ); node .append('text') .attr('dy', 3) .attr('x', d => (d.children ? -8 : 8)) .style('text-anchor', d => (d.children ? 'end' : 'start')) .style('font', '5px sans-serif') .text(d => d.data.name); return svg.node(); }39:T643,{ const height = 500; const svg = d3.select(DOM.svg(width, height)); const g = svg.append('g').attr('transform', 'translate(40,0)'); const x = d3 .scaleTime() .domain(d3.extent(by_birthday, d => d.date)) .range([margin.left, width - margin.right]); const data = deepest_families[0]; const tree = d3 .tree() .size([height, width - margin.left - margin.right - 40]); const root = d3.hierarchy(data, d => d.children); tree(root); const link = g .selectAll('.link') .data(root.descendants().slice(1)) .enter() .append('path') .attr('class', 'link') .attr('fill', 'none') .attr('stroke', d => d.data.data.total_count > 0 ? colors.green.A700 : colors.brown._900 ) .attr('stroke-width', '1.5px') .attr( 'd', d => `M${d.y},${d.x}C${d.parent.y + 50},${d.x} ${d.parent.y + 50},${ d.parent.x } ${d.parent.y},${d.parent.x}` ); const node = g .selectAll('.node') .data(root.descendants()) .enter() .append('g') .attr( 'class', d => 'node' + (d.children ? ' node--internal' : ' node--leaf') ) .attr('transform', d => `translate(${d.y},${d.x})`); node .append('circle') .attr('r', 3) .attr('fill', d => d.data.data.total_count > 0 ? colors.green.A700 : colors.brown._900 ); node .append('text') .attr('dy', 3) .attr('x', d => (d.children ? -8 : 8)) .style('text-anchor', d => (d.children ? 'end' : 'start')) .style('font', '10px sans-serif') .text(d => d.data.name); return svg.node(); }3a:T3db3,/* db.users.aggregate([ { $match: {'dude.country.name': {$exists: true}} }, { $group: { _id: '$dude.country.name', count: { $sum: 1 } } }, { $sort: { count: -1 } } ]).toArray() */ by_country = /* 1 */ [ { "_id" : "Россия", "count" : 26962.0 }, { "_id" : "Украина", "count" : 6155.0 }, { "_id" : "ЮАР", "count" : 2740.0 }, { "_id" : "Беларусь", "count" : 1433.0 }, { "_id" : "США", "count" : 672.0 }, { "_id" : "Казахстан", "count" : 365.0 }, { "_id" : "Латвия", "count" : 355.0 }, { "_id" : "Израиль", "count" : 343.0 }, { "_id" : "Германия", "count" : 342.0 }, { "_id" : "Эстония", "count" : 270.0 }, { "_id" : "Австралия", "count" : 234.0 }, { "_id" : "Чехия", "count" : 200.0 }, { "_id" : "Молдова", "count" : 191.0 }, { "_id" : "Гондурас", "count" : 178.0 }, { "_id" : "Литва", "count" : 122.0 }, { "_id" : "Канада", "count" : 110.0 }, { "_id" : "Финляндия", "count" : 109.0 }, { "_id" : "Франция", "count" : 102.0 }, { "_id" : "Азербайджан", "count" : 100.0 }, { "_id" : "Великобритания", "count" : 90.0 }, { "_id" : "Япония", "count" : 88.0 }, { "_id" : "Австрия", "count" : 83.0 }, { "_id" : "Польша", "count" : 80.0 }, { "_id" : "Узбекистан", "count" : 75.0 }, { "_id" : "Испания", "count" : 73.0 }, { "_id" : "Грузия", "count" : 62.0 }, { "_id" : "Италия", "count" : 60.0 }, { "_id" : "Швеция", "count" : 60.0 }, { "_id" : "Мексика", "count" : 56.0 }, { "_id" : "Швейцария", "count" : 56.0 }, { "_id" : "Китай", "count" : 53.0 }, { "_id" : "Албания", "count" : 52.0 }, { "_id" : "Болгария", "count" : 51.0 }, { "_id" : "Нидерланды", "count" : 48.0 }, { "_id" : "Таиланд", "count" : 48.0 }, { "_id" : "Норвегия", "count" : 47.0 }, { "_id" : "Кыргызстан", "count" : 43.0 }, { "_id" : "Армения", "count" : 41.0 }, { "_id" : "Бельгия", "count" : 37.0 }, { "_id" : "Дания", "count" : 35.0 }, { "_id" : "КНДР", "count" : 32.0 }, { "_id" : "Арулько", "count" : 32.0 }, { "_id" : "Кипр", "count" : 31.0 }, { "_id" : "Ямайка", "count" : 31.0 }, { "_id" : "Антигуа и Барбуда", "count" : 30.0 }, { "_id" : "Румыния", "count" : 30.0 }, { "_id" : "Зимбабве", "count" : 29.0 }, { "_id" : "Американское Самоа", "count" : 28.0 }, { "_id" : "Венгрия", "count" : 27.0 }, { "_id" : "Ангуилья", "count" : 26.0 }, { "_id" : "Греция", "count" : 26.0 }, { "_id" : "Аргентина", "count" : 25.0 }, { "_id" : "Ирландия", "count" : 24.0 }, { "_id" : "Индия", "count" : 24.0 }, { "_id" : "Уоллис и Футуна", "count" : 23.0 }, { "_id" : "Эквадор", "count" : 23.0 }, { "_id" : "Новая Зеландия", "count" : 23.0 }, { "_id" : "Чад", "count" : 22.0 }, { "_id" : "Барбадос", "count" : 21.0 }, { "_id" : "Индонезия", "count" : 21.0 }, { "_id" : "Вьетнам", "count" : 21.0 }, { "_id" : "Сингапур", "count" : 20.0 }, { "_id" : "Бангладеш", "count" : 20.0 }, { "_id" : "Ниуэ", "count" : 20.0 }, { "_id" : "Эфиопия", "count" : 19.0 }, { "_id" : "Объединенные Арабские Эмираты", "count" : 19.0 }, { "_id" : "Португалия", "count" : 18.0 }, { "_id" : "Ангола", "count" : 18.0 }, { "_id" : "Уганда", "count" : 18.0 }, { "_id" : "Чили", "count" : 18.0 }, { "_id" : "Буркина Фасо", "count" : 17.0 }, { "_id" : "Алжир", "count" : 17.0 }, { "_id" : "Малайзия", "count" : 17.0 }, { "_id" : "Суринам", "count" : 17.0 }, { "_id" : "Остров Мэн", "count" : 16.0 }, { "_id" : "Бразилия", "count" : 16.0 }, { "_id" : "Сербия", "count" : 16.0 }, { "_id" : "Черногория", "count" : 16.0 }, { "_id" : "Афганистан", "count" : 16.0 }, { "_id" : "Гаити", "count" : 16.0 }, { "_id" : "Сомали", "count" : 15.0 }, { "_id" : "Люксембург", "count" : 15.0 }, { "_id" : "Исландия", "count" : 15.0 }, { "_id" : "Камбоджа", "count" : 14.0 }, { "_id" : "Монако", "count" : 14.0 }, { "_id" : "Турция", "count" : 14.0 }, { "_id" : "Вануату", "count" : 14.0 }, { "_id" : "Мадагаскар", "count" : 13.0 }, { "_id" : "Мальта", "count" : 13.0 }, { "_id" : "Тринидад и Тобаго", "count" : 13.0 }, { "_id" : "Пакистан", "count" : 13.0 }, { "_id" : "Куба", "count" : 12.0 }, { "_id" : "Папуа Новая Гвинея", "count" : 12.0 }, { "_id" : "Египет", "count" : 12.0 }, { "_id" : "Туркс и Кейкос", "count" : 12.0 }, { "_id" : "Андорра", "count" : 11.0 }, { "_id" : "Хорватия", "count" : 11.0 }, { "_id" : "Словакия", "count" : 11.0 }, { "_id" : "Гренландия", "count" : 10.0 }, { "_id" : "Демократическая Республика Конго", "count" : 10.0 }, { "_id" : "Багамские острова", "count" : 10.0 }, { "_id" : "Сан-Томе и Принсипи", "count" : 9.0 }, { "_id" : "Республика Корея", "count" : 9.0 }, { "_id" : "Британские Виргинские острова", "count" : 9.0 }, { "_id" : "Гонконг", "count" : 9.0 }, { "_id" : "Эритрея", "count" : 9.0 }, { "_id" : "Уругвай", "count" : 9.0 }, { "_id" : "Мозамбик", "count" : 9.0 }, { "_id" : "Перу", "count" : 9.0 }, { "_id" : "Словения", "count" : 8.0 }, { "_id" : "Таджикистан", "count" : 8.0 }, { "_id" : "Кабо-Верде", "count" : 8.0 }, { "_id" : "Доминиканская республика", "count" : 8.0 }, { "_id" : "Святая Люсия", "count" : 8.0 }, { "_id" : "Ирак", "count" : 8.0 }, { "_id" : "Бруней", "count" : 8.0 }, { "_id" : "Острова Кука", "count" : 8.0 }, { "_id" : "Реюньон", "count" : 7.0 }, { "_id" : "Габон", "count" : 7.0 }, { "_id" : "Бурунди", "count" : 7.0 }, { "_id" : "Каймановы острова", "count" : 7.0 }, { "_id" : "Тайвань", "count" : 7.0 }, { "_id" : "Коста-Рика", "count" : 6.0 }, { "_id" : "Нигерия", "count" : 6.0 }, { "_id" : "Ботсвана", "count" : 6.0 }, { "_id" : "Туркменистан", "count" : 6.0 }, { "_id" : "Боливия", "count" : 6.0 }, { "_id" : "Иран", "count" : 6.0 }, { "_id" : "Македония", "count" : 6.0 }, { "_id" : "Камерун", "count" : 6.0 }, { "_id" : "Фолклендские острова", "count" : 6.0 }, { "_id" : "Сирия", "count" : 6.0 }, { "_id" : "Французская Полинезия", "count" : 5.0 }, { "_id" : "Самоа", "count" : 5.0 }, { "_id" : "Виргинские Острова США", "count" : 5.0 }, { "_id" : "Северные Марианские острова", "count" : 5.0 }, { "_id" : "Центрально-Африканская Республика", "count" : 5.0 }, { "_id" : "Лаос", "count" : 5.0 }, { "_id" : "Нигер", "count" : 5.0 }, { "_id" : "Сент-Винсент и Гренадины", "count" : 5.0 }, { "_id" : "Непал", "count" : 5.0 }, { "_id" : "Кирибати", "count" : 5.0 }, { "_id" : "Гваделупа", "count" : 5.0 }, { "_id" : "Венесуэла", "count" : 5.0 }, { "_id" : "Либерия", "count" : 5.0 }, { "_id" : "Конго", "count" : 5.0 }, { "_id" : "Антильские острова", "count" : 5.0 }, { "_id" : "Фиджи", "count" : 5.0 }, { "_id" : "Лихтенштейн", "count" : 5.0 }, { "_id" : "Бутан", "count" : 5.0 }, { "_id" : "Белиз", "count" : 5.0 }, { "_id" : "Иордания", "count" : 5.0 }, { "_id" : "Монголия", "count" : 5.0 }, { "_id" : "Саудовская Аравия", "count" : 4.0 }, { "_id" : "Замбия", "count" : 4.0 }, { "_id" : "Филиппины", "count" : 4.0 }, { "_id" : "Тувалу", "count" : 4.0 }, { "_id" : "Кот-д'Ивуар", "count" : 4.0 }, { "_id" : "Фарерские острова", "count" : 4.0 }, { "_id" : "Того", "count" : 4.0 }, { "_id" : "Никарагуа", "count" : 4.0 }, { "_id" : "Сент Китс и Невис", "count" : 4.0 }, { "_id" : "Экваториальная Гвинея", "count" : 4.0 }, { "_id" : "Сьерра-Леоне", "count" : 3.0 }, { "_id" : "Маврикий", "count" : 3.0 }, { "_id" : "Гернси", "count" : 3.0 }, { "_id" : "Свазиленд", "count" : 3.0 }, { "_id" : "Бахрейн", "count" : 3.0 }, { "_id" : "Катар", "count" : 3.0 }, { "_id" : "Сейшеллы", "count" : 3.0 }, { "_id" : "Гренада", "count" : 3.0 }, { "_id" : "Босния и Герцеговина", "count" : 3.0 }, { "_id" : "Руанда", "count" : 3.0 }, { "_id" : "Кения", "count" : 3.0 }, { "_id" : "Шри-Ланка", "count" : 3.0 }, { "_id" : "Колумбия", "count" : 3.0 }, { "_id" : "Пуэрто Рико", "count" : 2.0 }, { "_id" : "Новая Каледония", "count" : 2.0 }, { "_id" : "Мали", "count" : 2.0 }, { "_id" : "Малави", "count" : 2.0 }, { "_id" : "Гватемала", "count" : 2.0 }, { "_id" : "Гайана", "count" : 2.0 }, { "_id" : "Сальвадор", "count" : 2.0 }, { "_id" : "Французская Гвинея", "count" : 2.0 }, { "_id" : "Кувейт", "count" : 2.0 }, { "_id" : "Мавритания", "count" : 2.0 }, { "_id" : "Ливан", "count" : 2.0 }, { "_id" : "Судан", "count" : 2.0 }, { "_id" : "Ливия", "count" : 2.0 }, { "_id" : "Мальдивские острова", "count" : 2.0 }, { "_id" : "Панама", "count" : 2.0 }, { "_id" : "Монтсеррат", "count" : 2.0 }, { "_id" : "Мьянма", "count" : 2.0 }, { "_id" : "Гамбия", "count" : 1.0 }, { "_id" : "Доминика", "count" : 1.0 }, { "_id" : "Гибралтар", "count" : 1.0 }, { "_id" : "Гвинея", "count" : 1.0 }, { "_id" : "Соломоновы острова", "count" : 1.0 }, { "_id" : "Макау", "count" : 1.0 }, { "_id" : "Йемен", "count" : 1.0 }, { "_id" : "Намибия", "count" : 1.0 }, { "_id" : "Марокко", "count" : 1.0 }, { "_id" : "Мартиника", "count" : 1.0 }, { "_id" : "Бенин", "count" : 1.0 }, { "_id" : "Парагвай", "count" : 1.0 }, { "_id" : "Палестина", "count" : 1.0 }, { "_id" : "Коморские острова", "count" : 1.0 }, { "_id" : "Тунис", "count" : 1.0 }, { "_id" : "Лесото", "count" : 1.0 }, { "_id" : "Гуам", "count" : 1.0 }, { "_id" : "Майотта", "count" : 1.0 }, { "_id" : "Оман", "count" : 1.0 } ]3b:T68f,{ const height = 400 const margin = { top: 50, right: 30, bottom: 100, left: 40 } const data = by_country.slice(0, 50) const svg = d3.select(DOM.svg(width, height)) const x = d3.scaleBand() .domain(data.map(d => d._id)) .range([margin.left, width - margin.right]) const y = d3 .scaleLog().base(2) .domain([1, d3.max(data, d => d.count)]) .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr('transform', `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(10)) const yAxis = g => g .attr('transform', `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(10)) svg.append('g').call(xAxis) .selectAll('text') .style('text-anchor', 'end') .attr('font-size', '8') .attr('dx', '-.8em') .attr('dy', '-.55em') .attr('transform', 'rotate(-90)') svg.append('g').call(yAxis) svg.append('g').selectAll('.bar') .data(data) .enter() .append('rect') .attr('class', 'bar') .attr('x', d => x(d._id)) .attr('y', d => y(d.count)) .attr('width', x.bandwidth() - 1) .attr('fill', colors.purple.A900) .attr('height', d => height - margin.bottom - y(d.count)) svg.append('g').selectAll('.bar') .data(data) .enter() .append('text') .attr('x', d => x(d._id) + x.bandwidth() / 2) .attr('y', d => y(d.count)) .style('text-anchor', 'start') .attr('font-size', '8') .attr('dx', '-.8em') .attr('dy', '-.55em') .style('font', '8px sans-serif') .text(d => d.count) return svg.node() }3c:T689,{ const height = 400 const margin = { top: 50, right: 30, bottom: 50, left: 40 } const data = by_country.slice(0, 10) const svg = d3.select(DOM.svg(width, height)) const x = d3.scaleBand() .domain(data.map(d => d._id)) .range([margin.left, width - margin.right]) const y = d3 .scaleLinear() .domain([1, d3.max(data, d => d.count)]) .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr('transform', `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(10)) const yAxis = g => g .attr('transform', `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(10)) svg.append('g').call(xAxis) .selectAll('text') .style('text-anchor', 'end') .attr('font-size', '8') .attr('dx', '-.8em') .attr('dy', '-.55em') .attr('transform', 'rotate(-90)') svg.append('g').call(yAxis) svg.append('g').selectAll('.bar') .data(data) .enter() .append('rect') .attr('class', 'bar') .attr('x', d => x(d._id)) .attr('y', d => y(d.count)) .attr('width', x.bandwidth() - 1) .attr('fill', colors.purple.A900) .attr('height', d => height - margin.bottom - y(d.count)) svg.append('g').selectAll('.bar') .data(data) .enter() .append('text') .attr('x', d => x(d._id) + x.bandwidth() / 2) .attr('y', d => y(d.count)) .style('text-anchor', 'start') .attr('font-size', '8') .attr('dx', '-.8em') .attr('dy', '-.55em') .style('font', '8px sans-serif') .text(d => d.count) return svg.node() }3d:[{"id":"6e533ab234ce1f62cb1380fcfd4a3e14b564ac40379030c0be7f810dbe5c5c3525af200d355594046015f364e4e883c20b5cf8b57179e5d3f2696ad4ed61b05a","href":"https://static.observableusercontent.com/files/6e533ab234ce1f62cb1380fcfd4a3e14b564ac40379030c0be7f810dbe5c5c3525af200d355594046015f364e4e883c20b5cf8b57179e5d3f2696ad4ed61b05a","name":"by_birthday@1.json","type":"application/json","lastModified":1605967872136.668,"size":292862},{"id":"cda7a61836d44686b07a59b1278525b5b4f7eec1272a62f497ecd0ce35cb7bcbfc949be62d59ae7dd68be80f0b3d6e79907d2a797d63e90d1a11dd58af13eb09","href":"https://static.observableusercontent.com/files/cda7a61836d44686b07a59b1278525b5b4f7eec1272a62f497ecd0ce35cb7bcbfc949be62d59ae7dd68be80f0b3d6e79907d2a797d63e90d1a11dd58af13eb09","name":"families-with-stats.json","type":"application/json","lastModified":1605968539589.409,"size":3901086}] 31:{"id":"81516fbd22811882","slug":"d3-ru","title":"Краткий обзор пользователей d3","thumbnail":"c4c5d3ea476fa67176c5cecf4cfec82058136ca975411d44080337bae231a93f","access_level":"public","create_time":"$D2018-07-10T10:07:22.303Z","update_time":"$D2020-11-21T18:07:13.959Z","view_time":null,"first_public_time":"$D2018-07-12T22:02:26.919Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"fe4aac1446538067","login":"romaklimenko","name":"Roman Klimenko","avatar_url":"https://avatars-next.observableusercontent.com/43ab6d186d90e198c84c69775b1b42aefc76727c72b8f482ac7a3c111107ef4d","tier":"starter_2024"},"version":1140,"publish_version":1140,"role":null,"authored":false,"authors":[{"type":"individual","id":"c5af103943962de2","login":"romaklimenko","name":"Roman Klimenko","avatar_url":"https://avatars-next.observableusercontent.com/43ab6d186d90e198c84c69775b1b42aefc76727c72b8f482ac7a3c111107ef4d","tier":null}],"members":[{"type":"individual","id":"c5af103943962de2","login":"romaklimenko","name":"Roman Klimenko","avatar_url":"https://avatars-next.observableusercontent.com/43ab6d186d90e198c84c69775b1b42aefc76727c72b8f482ac7a3c111107ef4d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"677ad5af80f570d0","slug":"d3-ru","title":"d3.ru","owner":{"id":"fe4aac1446538067","login":"romaklimenko","name":"Roman Klimenko"}},"type":"notebook","body":{"title":"Краткий обзор пользователей d3","cells":[{"id":298,"value":"md`# Краткий обзор пользователей d3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"colors = {\n return {\n red: {\n A400: '#FF1744',\n A700: '#D50000'\n },\n pink: {\n A100: '#FF80AB',\n A200: '#FF4081'\n },\n purple: {\n A100: '#EA80FC',\n A200: '#E040FB',\n A900: '#4A148C'\n },\n green: {\n A700: '#00C853'\n },\n blue: {\n A100: '#82B1FF',\n A200: '#448AFF',\n A700: '#2962FF'\n },\n brown: {\n _900: '#3E2723'\n },\n orange: {\n A700: '#F57C00'\n },\n yellow: {\n A700: '#FFD600'\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"logins = 157159","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"// db.users.find({total_count: 0}).count()\npassive = 97561","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"md`### Соотношение между теми, кто пишет и кто не пишет:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"{ \n const svg = d3.select(DOM.svg(width, bar_height))\n \n const x = d3.scaleLinear()\n .domain(d3.extent([0, logins]))\n .range([0, width])\n \n svg\n .append('rect')\n .attr('x', x(0))\n .attr('y', 0)\n .attr('width', x(logins - passive))\n .attr('height', bar_height)\n .attr('fill', colors.green.A700)\n \n svg\n .append('text')\n .text(logins - passive)\n .attr('x', x(logins - passive) / 2)\n .attr('y', bar_height / 2 + 6)\n .attr('text-anchor', 'middle')\n .attr('fill', '#FFF')\n .attr('font-size', '20px')\n \n svg\n .append('rect')\n .attr('x', x(logins - passive))\n .attr('y', 0)\n .attr('width', x(passive))\n .attr('height', bar_height)\n .attr('fill', colors.brown._900)\n \n svg\n .append('text')\n .text(passive)\n .attr('x', x(logins - passive + passive / 2))\n .attr('y', bar_height / 2 + 6)\n .attr('text-anchor', 'middle')\n .attr('fill', '#FFF')\n .attr('font-size', '20px')\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`\n – пишут, – не пишут.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"margin = {\n return {\n top: 20,\n right: 40,\n bottom: 30,\n left: 40\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"by_birthday = {\n const data = await FileAttachment(\"by_birthday@1.json\").json();\n const m = Object.keys(data)\n .map(d => {\n return {\n date: d.substr(0, 7),\n active: data[d].active || 0,\n passive: data[d].passive || 0\n };\n })\n .slice(1);\n\n const o = {};\n\n m.forEach(k => {\n o[k.date] = o[k.date] || { active: 0, passive: 0 };\n o[k.date].active += k.active;\n o[k.date].passive += k.passive;\n });\n\n return Object.keys(o)\n .map(k => {\n return {\n date: new Date(\n parseInt(k.substring(0, 4)),\n parseInt(k.substring(5)) - 1,\n 1\n ),\n active: o[k].active,\n passive: o[k].passive\n };\n })\n .slice(1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md`### Распределение по датам регистрации и по активности на сайте (логарифмическая шкала):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"md` – пишут, – не пишут.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1068,"value":"md`### Распределение по датам регистрации и по активности на сайте (линейная шкала):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"md` – пишут, – не пишут.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"bar_height = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"/*\ndb.users\n .aggregate(\n [\n { $match: { 'total_count': 0 } },\n { $group: { _id: \"$dude.gender\", count: { $sum: 1 } } }\n ])\n*/\npassive_by_gender = {\n return {\n male: 74912,\n female: 20503,\n other: 2146\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"md`### Соотношение полов среди тех, кто не пишет:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md` – *\"Вы знаете, я мужчина\"*, – *\"Ура! Я женщина!\"*, – не определились (${passive_by_gender.other}).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"/*\ndb.users\n .aggregate(\n [\n { $match: { 'total_count': { $ne: 0 } } },\n { $group: { _id: \"$dude.gender\", count: { $sum: 1 } } }\n ])\n*/\nactive_by_gender = {\n return {\n male: 52639,\n female: 6921,\n other: 38\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`### Соотношение полов среди тех, кто пишет:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md` – *\"Вы знаете, я мужчина\"*, – *\"Ура! Я женщина!\"*, – не определились (${active_by_gender.other}).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"// db.users.find({parent: {$exists:true}}).count()\ninvited = 15179","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"// db.users.find({parent: {$exists:false}}).count()\nnot_invited = 141980","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"md`### Соотношение между приглашенными и неприглашенными пользователями:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"{ \n const svg = d3.select(DOM.svg(width, bar_height))\n \n const x = d3.scaleLinear()\n .domain(d3.extent([0, logins]))\n .range([0, width])\n \n svg\n .append('rect')\n .attr('x', x(0))\n .attr('y', 0)\n .attr('width', x(not_invited))\n .attr('height', bar_height)\n .attr('fill', colors.blue.A700)\n \n svg\n .append('text')\n .text(not_invited)\n .attr('x', x(not_invited) / 2)\n .attr('y', bar_height / 2 + 6)\n .attr('text-anchor', 'middle')\n .attr('fill', '#FFF')\n .attr('font-size', '20px')\n \n svg\n .append('rect')\n .attr('x', x(not_invited))\n .attr('y', 0)\n .attr('width', x(invited))\n .attr('height', bar_height)\n .attr('fill', colors.orange.A700)\n \n svg\n .append('text')\n .text(invited)\n .attr('x', x(not_invited + invited / 2))\n .attr('y', bar_height / 2 + 6)\n .attr('text-anchor', 'middle')\n .attr('fill', '#FFF')\n .attr('font-size', '20px')\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"md` – без приглашения, – по приглашению.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"families = FileAttachment(\"families-with-stats.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"nodes = {\n const nodes = []\n \n const push = (node) => {\n nodes.push(node)\n node.children.forEach(c => {\n push(c)\n })\n }\n \n families.forEach(f => {\n push(f)\n })\n \n return nodes\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"biggest_families = nodes\n .sort((a, b) => (a.data.count > b.data.count ? -1 : 1))\n .slice(0, 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"md`### Самая большая семья:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"md` – пишут, – не пишут.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"deepest_families = nodes\n .sort((a, b) => (a.data.depth > b.data.depth ? -1 : 1))\n .slice(0, 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"md`### Семья с наибольшим количеством поколений:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"md` – пишут, – не пишут.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"md`#### Данные 2018 года:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"md`### Распределение пользователей по странам (логарифмическая шкала, топ-50):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"md`### Распределение пользователей по странам (линейная шкала, топ-10):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 32:"$31:body"