2d:null 2e:["$","title",null,{"children":"Lollipop chart with D3 | Nikolay Dudaev | Observable"}] 33:T17fd,async function drawDotPlot() { // Reading data let data = d3.csvParse(await FileAttachment("commanders_years.csv").text()); data = data.map(a => { if (a.name === 'Viktor Mikhaylovich Afanasyev') { return { ...a, name: 'Viktor Afanasyev' }; } return a; }); // Accessors const dateParser = d3.timeFormat('%Y-%m-%d'); const selectionYear = d => parseInt(d.year_of_selection); const firstMissionYear = d => parseInt(d.year_of_mission); const astronautName = d => d.name; const yearsSinceSelection = d => parseInt(d.years_btw_selection_first_mission); // Canvas elements and dimensions let dimensions = { width: 1000, height: 2000, margins: { top: 25, right: 150, bottom: 70, left: 180 } }; dimensions.boundedWidth = dimensions.width - dimensions.margins.left - dimensions.margins.right; dimensions.boundedHeight = dimensions.height - dimensions.margins.top - dimensions.margins.bottom; const svg = d3 .select('#chart') .append('svg') .attr('width', dimensions.width) .attr('height', dimensions.height) .style('background-color', '#263238'); const bounds = svg .append('g') .attr('width', dimensions.boundedWidth) .attr('height', dimensions.boundedHeight) .style( 'transform', `translate(${dimensions.margins.left}px, ${dimensions.margins.top + 50}px)` ); // Scales const xScale = d3 .scaleLinear() .domain([-2, d3.max(data, yearsSinceSelection)]) .range([0, dimensions.boundedWidth]); const yScale = d3 .scaleBand() .domain(data.map(d => d.name)) .range([0, dimensions.boundedHeight]) .padding(1); // Axes const xAxisTop = d3.axisTop().scale(xScale); const yAxis = d3.axisLeft().scale(yScale); // Drawing axes const xAxisElementsTop = bounds.append('g').call(xAxisTop); xAxisElementsTop.select('.domain').remove(); xAxisElementsTop.selectAll('.tick text').remove(); xAxisElementsTop.selectAll('.tick line').remove(); const yAxisElements = bounds.append('g').call(yAxis); yAxisElements.select('.domain').remove(); yAxisElements.selectAll('.tick line').remove(); yAxisElements .selectAll('.tick text') .attr('fill', '#FFFFFF') .style('font-size', '14px'); // Draw data const lines = bounds .append('g') .selectAll('line') .data(data) .enter() .append('line') .attr('x1', d => xScale(0)) .attr('x2', d => xScale(yearsSinceSelection(d))) .attr('y1', d => yScale(astronautName(d))) .attr('y2', d => yScale(astronautName(d))) .attr('fill', 'none') .attr('stroke', '#B0BEC5') .attr('stroke-width', '1px') .attr('opacity', 0.7); const selectionYearCircles = bounds .append('g') .selectAll('circle') .data(data) .enter() .append('circle') .attr('cx', d => xScale(0)) .attr('cy', d => yScale(astronautName(d))) .attr('r', 4) .attr('fill', '#FF80AB') .attr('stroke', 'none'); const firstMissionYearCircles = bounds .append('g') .selectAll('circle') .data(data) .enter() .append('circle') .attr('cx', d => xScale(yearsSinceSelection(d))) .attr('cy', d => yScale(astronautName(d))) .attr('r', 4) .attr('fill', '#84FFFF') .attr('stroke', 'none'); const selectionYears = bounds .append('g') .selectAll('text') .data(data) .enter() .append('text') .text(d => selectionYear(d)) .attr('x', d => xScale(-1)) .attr('y', d => yScale(astronautName(d)) + 4) .attr('stroke', 'none') .attr('fill', '#B0BEC5') .style('font-size', '12px'); const missionYears = bounds .append('g') .selectAll('text') .data(data) .enter() .append('text') .text(d => firstMissionYear(d)) .attr('x', d => xScale(yearsSinceSelection(d) + 0.3)) .attr('y', d => yScale(astronautName(d)) + 4) .attr('stroke', 'none') .attr('fill', '#B0BEC5') .style('font-size', '12px'); const yearsBetween = bounds .append('g') .selectAll('text') .data(data) .enter() .append('text') .text(d => yearsSinceSelection(d)) .attr('x', xScale(19)) .attr('y', d => yScale(astronautName(d)) + 4) .attr('stroke', 'none') .attr('fill', '#B0BEC5') .style('font-size', '14px'); const legendYears = bounds .append('text') .text('Years') .attr('x', xScale(19)) .attr('y', yScale('Maksim Surayev') - 45) .attr('stroke', 'none') .attr('fill', '#B0BEC5') .style('font-size', '16px') .attr('text-anchor', 'middle'); const legendOnTop = bounds.append('g'); legendOnTop .append('circle') .attr('cx', xScale(4)) .attr('cy', yScale('Maksim Surayev') - 50) .attr('r', 4) .attr('fill', '#FF80AB') .attr('stroke', 'none'); legendOnTop .append('circle') .attr('cx', xScale(9)) .attr('cy', yScale('Maksim Surayev') - 50) .attr('r', 4) .attr('fill', '#84FFFF') .attr('stroke', 'none'); legendOnTop .append('text') .attr('stroke', 'none') .attr('fill', '#B0BEC5') .style('font-size', '10px') .attr('text-anchor', 'middle') .append('tspan') .text('Year in which astronaut') .attr('x', xScale(4)) .attr('y', yScale('Maksim Surayev') - 80) .append('tspan') .text('has been selected to the squad') .attr('x', xScale(4)) .attr('y', yScale('Maksim Surayev') - 70); legendOnTop .append('text') .attr('stroke', 'none') .attr('fill', '#B0BEC5') .style('font-size', '10px') .attr('text-anchor', 'middle') .append('tspan') .text('Year of first mission') .attr('x', xScale(9)) .attr('y', yScale('Maksim Surayev') - 80) .append('tspan') .text('in a Commander role') .attr('x', xScale(9)) .attr('y', yScale('Maksim Surayev') - 70); legendOnTop .append('line') .attr('x1', xScale(4)) .attr('x2', xScale(9)) .attr('y1', yScale('Maksim Surayev') - 50) .attr('y2', yScale('Maksim Surayev') - 50) .attr('fill', 'none') .attr('stroke', '#B0BEC5') .attr('stroke-width', '1px') .attr('opacity', 0.7); }34:T432,html``35:[{"id":"d9c8cc2c81ba76cb6a046597c037cace04ebd00d2f24478eb211b7665d8b6d5ecad3dd5e629ba3286eadf76706a2b504b8e5549afcb90fcb06eb9420d891328f","href":"https://static.observableusercontent.com/files/d9c8cc2c81ba76cb6a046597c037cace04ebd00d2f24478eb211b7665d8b6d5ecad3dd5e629ba3286eadf76706a2b504b8e5549afcb90fcb06eb9420d891328f","name":"commanders_years.csv","type":"text/csv","lastModified":1595763842626.708,"size":1700}] 31:{"id":"3726d71983642823","slug":"lolipop-chart-with-d3","title":"Lollipop chart with D3","thumbnail":"840645f1bd1a89fa8b6828cca50afc080f8ff5011cf7b61545231d297b25ca23","access_level":"public","create_time":"$D2020-07-24T19:31:26.293Z","update_time":"$D2020-07-28T18:17:03.479Z","view_time":null,"first_public_time":"$D2020-07-26T16:42:32.620Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"d38ca9d90f1fba9f","login":"nd","name":"Nikolay Dudaev","avatar_url":"https://avatars-next.observableusercontent.com/0e6a389516ed3358f095bfb04f65c302267bff0b202c937a4e83480c58495f57","tier":"starter_2024"},"version":330,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"37ce6ddf0a1dfd9c","login":"nd","name":"Nikolay Dudaev","avatar_url":"https://avatars-next.observableusercontent.com/0e6a389516ed3358f095bfb04f65c302267bff0b202c937a4e83480c58495f57","tier":null}],"members":[{"type":"individual","id":"37ce6ddf0a1dfd9c","login":"nd","name":"Nikolay Dudaev","avatar_url":"https://avatars-next.observableusercontent.com/0e6a389516ed3358f095bfb04f65c302267bff0b202c937a4e83480c58495f57","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Lollipop chart with D3","cells":[{"id":0,"value":"md`# Lollipop chart with D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"{\n yield html`\n

Astronauts wait years to get to their dream - fly into space*

During those years technology changes, world changes, your body changes. You have to keep up to speed with all those changes. You have to improve every day, learn new things, be better than your competitors. It is not easy to keep yourself motivated each and every day. But what if you had to wait years for your dream to come true?..

Data source: https://data.mendeley.com/datasets/86tsnnbv2w/1

* Only astronauts whose 1st mission was as a Commander were selected for this chart

\n \n

\n `;\n drawDotPlot();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"