3e:null 3f:["$","title",null,{"children":"Bubble chart with D3 with a lot of interaction. | Yan Wu | Observable"}] 45:T4733,async function goldenAge() { const durationTime = 100; let data = d3.csvParse(await FileAttachment("origin_new.csv").text()); data = data.filter(d => d.av_rating >= 5.4); // let data = await d3.csv( // "https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2019/2019-01-08/IMDb_Economist_tv_ratings.csv" // ); const titleIds = new Set(data.map(d => d.titleId)); const initialTitles = [ 'tt0098936', 'tt0098936-a', 'tt0106179', 'tt0106179-a', 'tt0141842', 'tt0306414', 'tt0159206', 'tt0903747', 'tt0944947', 'tt2477230' ]; // 1. Access data const dateParser = d3.timeParse("%Y-%m-%d"); const xAccessor = d => dateParser(d.date); const yAccessor = d => parseFloat(d.av_rating); const zAccessor = d => parseFloat(d.share); const dramaTrendWeighted = [ { date: "1990-01-03", av_rating: 7.95 }, { date: "2018-10-10", av_rating: 8.55 } ]; const dramaTrend = [ { date: "1990-01-03", av_rating: 7.8 }, { date: "2018-10-10", av_rating: 8.2 } ]; const filmTrend = [ { date: "1990-01-03", av_rating: 7.7 }, { date: "2018-10-10", av_rating: 6.9 } ]; const legend = [ { date: "2004-07-01", av_rating: 5.9, share: 50.0 }, { date: "2004-07-01", av_rating: 5.872, share: 25.0 }, { date: "2004-07-01", av_rating: 5.85, share: 10.0 } ]; // 2. Create chart dimensions let dimensions = { width: 1000, height: 768, margin: { top: 20, right: 70, bottom: 20, left: 10 } }; dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right; dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom; // 3. Draw canvas const svg = d3 .select('#wrapper') .append('svg') .attr('width', dimensions.width) .attr('height', dimensions.height); const bounds = svg .append('g') .attr('width', dimensions.boundedWidth) .attr('height', dimensions.boundedHeight) .style( 'transform', `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)` ); const tooltip = d3.select('#tooltip'); // 4. Create scales const xScale = d3 .scaleTime() .domain(d3.extent(data, xAccessor)) .range([0, dimensions.boundedWidth]); const yScale = d3 .scaleLinear() .domain(d3.extent(data, yAccessor)) .range([dimensions.boundedHeight, 0]); const zScale = d3 .scaleSqrt() .domain(d3.extent(data, zAccessor)) .range([2, 18]); // 5. Draw data const lineGenerator = d3 .line() .x(d => xScale(xAccessor(d))) .y(d => yScale(yAccessor(d))) .curve(d3['curveMonotoneX']); const showTooltip = function(d) { let title = d.title; let season = d.seasonNumber; let year = new Date(d.date).getFullYear(); let rating = d3.format(".2f")(d.av_rating); let genres = d.genres; d3.select('#title').text(title); d3.select('#season').text(`S${season}(${year})`); d3.select('#rating').text(rating); d3.select('#genre').text(genres); tooltip .style('visibility', 'visible') .style('left', d3.mouse(this)[0] + 50 + "px") .style('top', d3.mouse(this)[1] + 200 + "px"); }; const hideTooltip = function() { tooltip.style('visibility', 'hidden'); }; const moveTooltip = function(d) { tooltip .style('left', d3.mouse(this)[0] + 50 + "px") .style('top', d3.mouse(this)[1] + 100 + "px"); }; const onMouseEnter = function(d) { d3.selectAll('[class^="special"]') .attr('fill', '#bde0eb') .attr('stroke', 'none') .attr('fill-opacity', 0.6); d3.selectAll('[id^="special"]').attr('opacity', 0); d3.selectAll('.movie-titles').attr('opacity', 0); d3.selectAll('.bubbles' + d.titleId) .attr('fill', '#3ebcd2') .attr('fill-opacity', 1) .attr('stroke', '#ffffff') .attr('stroke-width', '1px'); d3.select('#line' + d.titleId).attr('opacity', 1); d3.selectAll('.trends').attr('opacity', 0.3); d3.selectAll('.line-texts').attr('opacity', 0); d3.select(this) .attr('fill', '#3ebcd2') .attr('fill-opacity', 1) .attr('stroke', '#000000') .attr('stroke-width', '2px'); showTooltip(d); }; const onMouseEnterBounds = function(d) { d3.selectAll('[class^="special"]') .attr('fill', '#3ebcd2') .attr('stroke', '#ffffff') .attr('stroke-width', '1px') .attr('fill-opacity', 1); d3.selectAll('[id^="special"]').attr('opacity', 1); d3.selectAll('.movie-titles').attr('opacity', 1); d3.selectAll('.line-texts').attr('opacity', 1); }; const onMouseLeave = function(d) { d3.selectAll('.bubbles' + d.titleId) .attr('fill', '#bde0eb') .attr('stroke', 'none') .attr('fill-opacity', 0.6); d3.select('#line' + d.titleId).attr('opacity', 0); d3.selectAll('.movie-titles').attr('opacity', 1); d3.selectAll('.trends').attr('opacity', 1); d3.select(this) .attr('fill', '#bde0eb') .attr('stroke', 'none') .attr('fill-opacity', 0.6); hideTooltip(); }; const onMouseEnterSpecial = function(d) { d3.selectAll('[class^="special"]') .attr('fill', '#bde0eb') .attr('stroke', 'none') .attr('fill-opacity', 0.6); d3.selectAll('[id^="special"]').attr('opacity', 0); d3.selectAll('.movie-titles').attr('opacity', 0); d3.selectAll('.specialbubbles' + d.titleId) .raise() .attr('fill', '#3ebcd2') .attr('fill-opacity', 1) .attr('stroke', '#ffffff') .attr('stroke-width', '1px'); d3.select('#specialline' + d.titleId).attr('opacity', 1); d3.selectAll('.trends').attr('opacity', 0.3); d3.selectAll('.line-texts').attr('opacity', 0); d3.select(this) .attr('fill', '#3ebcd2') .attr('fill-opacity', 1) .attr('stroke', '#000000') .attr('stroke-width', '2px'); showTooltip(d); }; const onMouseLeaveSpecial = function(d) { d3.selectAll('.specialbubbles' + d.titleId) .attr('fill', '#bde0eb') .attr('stroke', 'none') .attr('fill-opacity', 0.6); d3.select('#specialline' + d.titleId).attr('opacity', 0); d3.selectAll('.movie-titles').attr('opacity', 1); d3.selectAll('.trends').attr('opacity', 1); d3.select(this) .attr('fill', '#bde0eb') .attr('stroke', 'none') .attr('fill-opacity', 0.6); hideTooltip(); }; bounds .append('rect') .attr('width', '100%') .attr('height', '100%') .attr('fill', 'transparent') .on('mouseenter', onMouseEnterBounds); bounds .append('g') .selectAll('circle') .data(data) .enter() .append('circle') .attr('class', d => 'bubbles' + d.titleId) .attr('cx', d => xScale(xAccessor(d))) .attr('cy', d => yScale(yAccessor(d))) .attr('r', d => zScale(zAccessor(d))) .attr('fill', '#bde0eb') .attr('stroke', 'none') .attr('fill-opacity', 0.6) .on('mouseenter', onMouseEnter) .on('mousemove', moveTooltip) .on('mouseleave', onMouseLeave); bounds .append('path') .attr('id', 'weightedTrend') .attr('class', 'trends') .attr('d', lineGenerator(dramaTrendWeighted)) .attr('fill', 'blue') .attr('stroke', '#006ba2') .attr('stroke-width', '3px'); bounds .append('text') .attr('class', 'line-texts') .attr('x', d => xScale(dateParser("2015-01-04"))) .attr('y', d => yScale(8.7)) .append('tspan') .attr('x', d => xScale(dateParser("2015-01-04"))) .attr('y', d => yScale(8.69)) .text('TV drama trend,') .attr('class', 'line-texts') .attr('opacity', 1) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .attr('fill', '#006ba2') .attr('stroke', 'none') .style('font-size', '12px') .style('font-weight', 'bold') .append('tspan') .attr('x', d => xScale(dateParser("2015-01-04"))) .attr('y', d => yScale(8.6)) .text('weighted by ratings') .attr('class', 'line-texts') .attr('opacity', 1) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .attr('fill', '#006ba2') .attr('stroke', 'none') .style('font-size', '12px') .style('font-weight', 'bold'); bounds .append('path') .attr('id', 'weightedTrend') .attr('class', 'trends') .attr('d', lineGenerator(dramaTrendWeighted)) .attr('fill', 'none') .attr('stroke', '#006ba2') .attr('stroke-width', '3px') .attr('opacity', 1); bounds .append('text') .attr('class', 'line-texts') .attr('opacity', 1) .attr('x', d => xScale(dateParser("2015-01-04"))) .attr('y', d => yScale(8.22)) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .text('TV drama trend') .attr('fill', '#006ba2') .attr('stroke', 'none') .style('font-size', '12px') .style('font-weight', 'bold'); bounds .append('path') .attr('id', 'trend') .attr('class', 'trends') .attr('d', lineGenerator(dramaTrend)) .attr('fill', 'none') .attr('stroke', '#006ba2') .attr('stroke-dasharray', "4 4") .attr('stroke-width', '3px') .attr('opacity', 1); bounds .append('path') .attr('id', 'weightedTrend') .attr('class', 'trends') .attr('d', lineGenerator(filmTrend)) .attr('fill', 'none') .attr('stroke', '#b8b5aa') .attr('stroke-width', '2px') .attr('opacity', 1); bounds .append('text') .attr('class', 'line-texts') .attr('opacity', 1) .attr('x', d => xScale(dateParser("2015-01-04"))) .attr('y', d => yScale(7.3)) .append('tspan') .attr('x', d => xScale(dateParser("2015-01-04"))) .attr('y', d => yScale(7.3)) .text('Film drama trend,') .attr('class', 'line-texts') .attr('opacity', 1) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .attr('fill', '#b8b5aa') .attr('stroke', 'none') .style('font-size', '12px') .style('font-weight', 'bold') .append('tspan') .attr('x', d => xScale(dateParser("2015-01-04"))) .attr('y', d => yScale(7.21)) .text('weighted by ratings') .attr('class', 'line-texts') .attr('opacity', 1) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .attr('fill', '#b8b5aa') .attr('stroke', 'none') .style('font-size', '12px') .style('font-weight', 'bold'); bounds .append('g') .selectAll('circle') .data(data.filter(d => initialTitles.includes(d.titleId))) .enter() .append('circle') .attr('class', d => 'specialbubbles' + d.titleId) .attr('id', d => d.titleId) .attr('cx', d => xScale(xAccessor(d))) .attr('cy', d => yScale(yAccessor(d))) .attr('r', d => zScale(zAccessor(d))) .attr('fill', '#3ebcd2') .attr('stroke', '#ffffff') .attr('stroke-width', '1px') .attr('fill-opacity', 1) .on('mouseenter', onMouseEnterSpecial) .on('mousemove', moveTooltip) .on('mouseleave', onMouseLeaveSpecial); const getCoordinates = function(selection, ids) { let coords = []; ids.forEach(id => { let filtered = selection.filter(sel => sel.id === id); let totalX = filtered.reduce((acc, cur) => { return (acc = acc + cur.getBBox().x); }, 0); let totalY = filtered.reduce((acc, cur) => { return (acc = acc + cur.getBBox().y); }, 0); switch (id) { case 'tt0098936': coords.push({ id: id, coordX: totalX / filtered.length + 20, coordY: totalY / filtered.length + 10 }); break; case 'tt0098936-a': coords.push({ id: id, coordX: totalX / filtered.length - 25, coordY: totalY / filtered.length - 10 }); break; case 'tt0106179': coords.push({ id: id, coordX: totalX / filtered.length - 40, coordY: totalY / filtered.length - 55 }); break; case 'tt0106179-a': coords.push({ id: id, coordX: totalX / filtered.length - 25, coordY: totalY / filtered.length - 10 }); break; case 'tt0159206': coords.push({ id: id, coordX: totalX / filtered.length - 20, coordY: totalY / filtered.length + 40 }); break; case 'tt0141842': coords.push({ id: id, coordX: totalX / filtered.length - 10, coordY: totalY / filtered.length - 30 }); break; case 'tt0306414': coords.push({ id: id, coordX: totalX / filtered.length - 10, coordY: totalY / filtered.length - 20 }); break; case 'tt0903747': coords.push({ id: id, coordX: totalX / filtered.length - 60, coordY: totalY / filtered.length + 20 }); break; case 'tt0944947': coords.push({ id: id, coordX: totalX / filtered.length, coordY: totalY / filtered.length - 45 }); break; default: coords.push({ id: id, coordX: totalX / filtered.length + 15, coordY: totalY / filtered.length }); break; } }); return coords; }; const specialCircleCoordinates = getCoordinates( d3.selectAll('[class^="special"]').nodes(), initialTitles ); bounds .append('g') .selectAll('text') .data(data.filter(d => initialTitles.includes(d.titleId))) .enter() .append('text') .attr('class', 'movie-titles') .attr( 'x', d => specialCircleCoordinates.filter(coords => coords.id === d.titleId)[0] .coordX + "px" ) .attr( 'y', d => specialCircleCoordinates.filter(coords => coords.id === d.titleId)[0] .coordY + "px" ) .attr('text-anchor', 'start') .style('font-size', '14px') .attr('stroke', 'none') .attr('fill', '#3ebcd2') .text(d => d.title); titleIds.forEach(title => { let movie = data.filter(d => d.titleId === title); bounds .append('g') .append('path') .attr('d', lineGenerator(movie)) .attr( 'id', initialTitles.includes(title) ? 'specialline' + title : 'line' + title ) .attr('stroke', '#3ebcd2') .attr('stroke-width', '1px') .attr('fill', 'none') .attr('opacity', initialTitles.includes(title) ? 1 : 0); }); bounds .append('g') .attr('id', 'legend') .selectAll('circle') .data(legend) .enter() .append('circle') .attr('cx', d => xScale(xAccessor(d))) .attr('cy', d => yScale(yAccessor(d))) .attr('r', d => zScale(zAccessor(d))) .attr('fill', 'none') .attr('stroke', '#b7c6cf') .attr('stroke-width', '1px'); bounds .append('text') .append('tspan') .attr('x', xScale(dateParser(legend[0].date))) .attr('y', yScale(5.7)) .text('Size=share of IMDb') .attr('text-anchor', 'middle') .attr('stroke', 'none') .attr('fill', '#98a9b3') .style('font-size', '12px') .append('tspan') .attr('x', xScale(dateParser(legend[0].date))) .attr('y', yScale(5.6)) .text('ratings for shows') .attr('text-anchor', 'middle') .attr('stroke', 'none') .attr('fill', '#98a9b3') .style('font-size', '12px') .append('tspan') .attr('x', xScale(dateParser(legend[0].date))) .attr('y', yScale(5.5)) .text('for that year') .attr('text-anchor', 'middle') .attr('stroke', 'none') .attr('fill', '#98a9b3') .style('font-size', '12px'); bounds .append('text') .attr('x', xScale(dateParser(legend[0].date))) .attr('y', yScale(5.97)) .text('50%') .attr('text-anchor', 'middle') .attr('stroke', 'none') .attr('fill', '#98a9b3') .style('font-size', '12px') .style('background-color', 'white'); // 6. Draw peripherals const years = [ new Date(1990, 1, 1), new Date(1995, 1, 1), new Date(2000, 1, 1), new Date(2005, 1, 1), new Date(2010, 1, 1), new Date(2015, 1, 1), new Date(2018, 1, 1) ]; const yAxisGenerator = d3 .axisLeft() .scale(yScale) .tickSize(20); const xAxisGeneratorTop = d3 .axisTop() .scale(xScale) .tickSize(dimensions.boundedHeight) .tickValues(years) .ticks(d3.timeYear.every(5)) .tickFormat(d => (d >= d3.timeYear(d) ? d.getFullYear() : null)); const xAxisGeneratorBottom = d3 .axisBottom() .scale(xScale) .tickValues(years) .ticks(d3.timeYear.every(5)) .tickFormat(d => (d >= d3.timeYear(d) ? d.getFullYear() : null)); bounds .append('g') .style('transform', `translate(0, ${dimensions.boundedHeight}px)`) .call(xAxisGeneratorTop) .call(g => g.select('.domain').remove()) .call(g => g .selectAll('.tick line') .attr('stroke', 'rgb(183, 198, 207)') .attr('opacity', 0.5) ) .call(g => g .selectAll('.tick text') .attr('stroke', 'none') .attr('fill', 'rgb(117, 141, 153)') .style('font-size', '12px') ); bounds .append('g') .style('transform', `translate(0, ${dimensions.boundedHeight}px)`) .call(xAxisGeneratorBottom) .call(g => g.select('.domain').remove()) .call(g => g.selectAll('.tick line').remove()) .call(g => g .selectAll('.tick text') .attr('stroke', 'none') .attr('fill', 'rgb(117, 141, 153)') .style('font-size', '12px') ); bounds .append('g') .style('transform', `translate(${dimensions.boundedWidth + 25}px, 0)`) .call(yAxisGenerator) .call(g => g.select('.domain').remove()) .call(g => g .selectAll('.tick text') .attr('x', 0) .attr('dy', -4) .style('font-size', '12px') .attr('stroke', 'none') .attr('fill', '#758d99') ) .call(g => g .selectAll('.tick line') .attr('stroke', 'rgb(183, 198, 207)') .attr('opacity', 0.5) ); }46:T425,html``47:[{"id":"5252a46b6cee161e4a932573e98d3269cc82e7cf62a3d00005605aa7c6376f16cb4de53c58262555518996466ceef0149f1d3d1d748a677969ba1aa6388ac7ae","href":"https://static.observableusercontent.com/files/5252a46b6cee161e4a932573e98d3269cc82e7cf62a3d00005605aa7c6376f16cb4de53c58262555518996466ceef0149f1d3d1d748a677969ba1aa6388ac7ae","name":"origin_new.csv","type":"text/csv","lastModified":1675459866807.153,"size":164761}] 43:{"id":"a13820753a4093dc","slug":null,"title":"Bubble chart with D3 with a lot of interaction.","thumbnail":"f9d1053920eeef87eaf0ad5db3e6d9675b4817e743aa1926929cadf9ac3a8573","access_level":"public","create_time":"$D2023-02-03T21:31:06.807Z","update_time":"$D2023-02-03T21:31:06.807Z","view_time":null,"first_public_time":"$D2023-02-03T21:31:06.807Z","has_unpublished_edits":null,"fork":{"id":"492ec0420a608fcf","slug":"bubble-chart-with-d3-with-a-lot-of-interaction-work-in-progre","title":"Bubble chart with D3 with a lot of interaction.","owner":{"id":"d38ca9d90f1fba9f","login":"nd","name":"Nikolay Dudaev"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b395fcc1dd8ae22e","login":"hermionewy","name":"Yan Wu","avatar_url":"https://avatars-next.observableusercontent.com/6811bb1dfdf5314bac440d335f565765e80d51660c04e3e37f79b7e50792eba7","tier":"starter_2024","bio":"Designer, Coder, Journalist, Storyteller","following":false},"version":557,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f7c45ac5dd13b71b","login":"hermionewy","name":"Yan Wu","avatar_url":"https://avatars-next.observableusercontent.com/6811bb1dfdf5314bac440d335f565765e80d51660c04e3e37f79b7e50792eba7","tier":null,"bio":"Designer, Coder, Journalist, Storyteller","following":false}],"members":[{"type":"individual","id":"f7c45ac5dd13b71b","login":"hermionewy","name":"Yan Wu","avatar_url":"https://avatars-next.observableusercontent.com/6811bb1dfdf5314bac440d335f565765e80d51660c04e3e37f79b7e50792eba7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bubble chart with D3 with a lot of interaction.","cells":[{"id":0,"value":"md`# Bubble chart with D3 with a lot of interaction.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"md`This is a remake. Original chart is here https://www.economist.com/graphic-detail/2018/11/24/tvs-golden-age-is-real`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"{\n yield html`\n \n

Average rating

\n \n *\n Seasons with at least 100 ratings on average\n \n

\n `;\n goldenAge();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require('d3@5', \"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"

TV dramas shown in America