2c:null 2d:["$","title",null,{"children":"Highcharts with #TidyTuesday | Kurtis Pivert | Observable"}] 32:T56c,heatmap = Highcharts.chart('heat-map', { chart: { type: 'heatmap' }, title: { text: 'Number of Players Heat Map', align: "left" }, caption: { text: 'Source: Statistics Canada', align: "right" }, xAxis: { gridLineWidth: 0, lineWidth: 0, tickLength: 0, title: { text: 'Month' }, labels : { formatter: function() {return getMonthAbbr(this.value)} } }, yAxis: { categories: [1995, 1996, 1997, 1998, 1999, 2000], gridLineWidth:0, title: { text: 'Year' } }, colorAxis: { min: 0, minColor: '#FFFFFF', maxColor: Highcharts.getOptions().colors[0] // Adjust the color scheme as per your preference }, tooltip : { formatter: function() { return "" + getMonthAbbr(this.point.x) + ' ' + this.point.y + "
Players: " + this.point.value } }, legend: { align: 'right', layout: 'vertical', margin: 0, verticalAlign: 'top', y: 30 }, credits : {enabled:false}, series: [{ name: 'Number of Players', data: by_month_year.map(obj => { return {x:obj.month_num, y:obj.year, value:obj.count_players, dataLabels: {color: obj.count_players<16 ? 'black' : 'white'}} }), dataLabels: { enabled: true, color: "black", style: {textOutline: 'none'} } }] });33:T5c8,// Given an array of x-values and a separation radius, returns an array of y-values. function dodge(X, radius, centerY) { const Y = new Float64Array(X.length); const radius2 = radius ** 2; const epsilon = 1e-3; let head = null, tail = null; // Returns true if circle ⟨x,y⟩ intersects with any circle in the queue. function intersects(x, y) { let a = head; while (a) { const ai = a.index; if (radius2 - epsilon > (X[ai] - x) ** 2 + (Y[ai] - y) ** 2) return true; a = a.next; } return false; } // Place each circle sequentially. for (const bi of d3.range(X.length).sort((i, j) => X[i] - X[j])) { // Remove circles from the queue that can’t intersect the new circle b. while (head && X[head.index] < X[bi] - radius2) head = head.next; // Choose the minimum non-intersecting tangent. if (intersects(X[bi], Y[bi] = 0)) { let a = head; Y[bi] = Infinity; do { const ai = a.index; let y1 = Y[ai] + Math.sqrt(radius2 - (X[ai] - X[bi]) ** 2); let y2 = Y[ai] - Math.sqrt(radius2 - (X[ai] - X[bi]) ** 2); if (Math.abs(y1) < Math.abs(Y[bi]) && !intersects(X[bi], y1)) Y[bi] = y1; if (Math.abs(y2) < Math.abs(Y[bi]) && !intersects(X[bi], y2)) Y[bi] = y2; a = a.next; } while (a); } // Add b to the queue. const b = { index: bi, next: null }; if (head === null) head = tail = b; else tail = tail.next = b; } return Y; }34:[{"id":"a43242f2c2fa69d635ea30bf0e540ee55f5081515a709edc15aab5581c929fdbaf2cd719f11a16e01304230dd07ecd3e706d7890679fe78c15412bc9814b7ad6","href":"https://static.observableusercontent.com/files/a43242f2c2fa69d635ea30bf0e540ee55f5081515a709edc15aab5581c929fdbaf2cd719f11a16e01304230dd07ecd3e706d7890679fe78c15412bc9814b7ad6","name":"nhl_rosters.csv","type":"text/csv","lastModified":1705791779556.988,"size":8554333}] 30:{"id":"900d2d2b8e1bd567","slug":null,"title":"Highcharts with #TidyTuesday","thumbnail":"56658147ab623b807aa76da82b0e5c5563629eb6288c560d87fb2b274b13dea3","access_level":"public","create_time":"$D2024-01-20T23:02:59.556Z","update_time":"$D2024-01-20T23:02:59.556Z","view_time":null,"first_public_time":"$D2024-01-20T23:02:59.556Z","has_unpublished_edits":null,"fork":{"id":"4f7e0f69e9cc804d","slug":"highcharts-tidytuesday","title":"Highcharts with #TidyTuesday","owner":{"id":"230f604926360997","login":"tashapiro","name":"Tanya Shapiro"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e4bb8f7752ef9ed5","login":"kpivert","name":"Kurtis Pivert","avatar_url":"https://avatars-next.observableusercontent.com/af3d039b4208c460193a6b2797f843cc739817afb12524aa6bc440318590a1d1","tier":"starter_2024","bio":"Interested in communicating data-driven insights. Director of Data Science at @ASNDataAnalytics. "},"version":643,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"92da2bda7181e33a","login":"kpivert","name":"Kurtis Pivert","avatar_url":"https://avatars-next.observableusercontent.com/af3d039b4208c460193a6b2797f843cc739817afb12524aa6bc440318590a1d1","tier":null,"bio":"Interested in communicating data-driven insights. Director of Data Science at @ASNDataAnalytics. "}],"members":[{"type":"individual","id":"92da2bda7181e33a","login":"kpivert","name":"Kurtis Pivert","avatar_url":"https://avatars-next.observableusercontent.com/af3d039b4208c460193a6b2797f843cc739817afb12524aa6bc440318590a1d1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Highcharts with #TidyTuesday","cells":[{"id":0,"value":"# Highcharts with #TidyTuesday\nExploring [Highcharts]('https://www.highcharts.com/') with [#TidyTuesday](https://github.com/rfordatascience/tidytuesday) data. The data provided this week looks at NHL hockey player information.\n\n### Chart Outputs\nWhat I've learned about working with this library in JS - in order to create the output, you first need to set up a placeholder div and set a unique id for the div. Then, in JS, use the Highcharts function to create the chart and reference the id the output.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"viewof chartType = Inputs.radio([\"column\", \"line\"], {label: \"Chart Type\", value:\"column\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"### Chart Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":422,"value":"beeswarm = Highcharts.chart('distribution-plot', {\n chart: {\n type: 'scatter'\n },\n title: {\n text: selectCountry + \" Hockey Players Weight (lbs)\",\n align: \"left\"\n },\n subtitle: {\n text: \"Players in 2022-2023 Season\",\n align: \"left\"\n },\n yAxis: {\n gridLineWidth:0,\n labels: {enabled: false},\n title: null\n },\n xAxis: {\n tickLength:0,\n gridLineWidth: 1,\n },\n caption: {\n text: \"Source: Statistics Canada\",\n align: \"right\"\n },\n plotOptions: {\n scatter: {\n marker: {\n lineWidth: 0.5,\n lineColor: 'white'\n }}\n },\n credits: {enabled: false},\n legend : {enabled: false},\n tooltip: {\n formatter: function() {\n return '' + this.point.name + '
Weight: ' + this.point.x \n\n }\n },\n series: [{\n name: \"Stat\",\n data: beeswarmData.map(obj => {return {x:obj.weight_in_pounds, y:obj.beeswarm_y, name: obj.first_name + ' ' + obj.last_name}}),\n marker: {\n radius: radius\n }\n }]\n}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"Dynamic radius for beeswarm plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":632,"value":"beeswarmRecords = roster_subset.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"radius = beeswarmRecords > 450 ? 5 : beeswarmRecords > 300 ? 6.5 : beeswarmRecords > 200 ? 7 : beeswarmRecords > 100 ? 10 : 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"dynamicChart = Highcharts.chart('dynamic-chart', {\n chart: {\n type: chartType,\n style: {marginBottom:50}\n },\n title: {\n text: 'Hockey Players by Birth Month',\n align: \"left\"\n },\n caption: {\n text: 'Source: Statistics Canada',\n align: \"right\"\n },\n xAxis: {\n categories: by_month.map(i => i.month_abbr),\n title: {\n text: 'Month'\n }\n },\n yAxis: {\n title: {\n text: 'Number of Players'\n }\n },\n legend : {enabled: false},\n credits : {enabled: false},\n series: [{\n name: 'Players',\n data: by_month.map(i => i.count_players),\n dataLabels: {enabled: true}\n }]\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"treemap = Highcharts.chart('treemap', {\n chart: {\n type: 'treemap'\n },\n title: {\n text: 'Distribution of Players by Birth Country: ' + selectedYear,\n align: 'left'\n },\n credits: {enabled:false},\n series: [{\n name: \"Country\",\n colorByPoint: true,\n data: by_country.map(obj => {return {name:obj.birth_country, value:obj.count_players}})\n }]\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"### Import Highcharts\n\nSet up Highcharts and supporting modules.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"Highcharts = {\n const Highcharts = await require(\"highcharts\");\n await require(\"highcharts/highcharts-more.js\");\n await require(\"highcharts/modules/heatmap.js\");\n await require(\"highcharts/modules/treemap.js\");\n return Highcharts;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"### Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"function getMonthAbbr(number) {\n const months = [\n \"Jan\", \"Feb\", \"Mar\", \"Apr\",\n \"May\", \"Jun\", \"Jul\", \"Aug\",\n \"Sep\", \"Oct\", \"Nov\", \"Dec\"\n ];\n if (number >= 1 && number <= 12) {\n return months[number - 1];\n } else {\n return \"Invalid Month\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"function calculateBeeswarm(data, variableName, centerY, radius, padding) {\n // Sort data based on the variableName\n data.sort((a, b) => a[variableName] - b[variableName]);\n\n // Compute which data points are considered defined.\n const I = d3.range(data.length).filter(i => !isNaN(data[i][variableName]));\n\n // Construct scales and axes.\n const xScale = d3.scaleLog()\n .domain(d3.extent(data, d => d[variableName]))\n .range([0, width]);\n\n // Compute the y-positions using dodge function\n const Y = dodge(I.map(i => xScale(data[i][variableName])), radius * 2 + padding, centerY);\n\n // Create the resulting dataset with new x and y positions\n const result = data.map((item, index) => {\n return {\n ...item,\n beeswarm_x: item[variableName],\n beeswarm_y: centerY + Y[index],\n };\n });\n\n return result;\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"### Data\n\nThis is pure preference - I prefer to wrangle my data with SQL for aggregations. Here are some of the queries to prep the data before putting it into Highcharts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":367,"value":"select \nbirth_country\n,count(*) as count_players\nfrom nhl_rosters\nwhere YEAR(birth_date) = ${selectedYear}\ngroup by 1","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"by_country","database":"nhl_rosters.csv"},{"id":9,"value":"select \nMONTH(birth_date) as month_num\n,strftime(birth_date, '%b') as month_abbr\n,count(distinct player_id) as count_players\nfrom nhl_rosters\nGROUP BY ALL\nORDER BY 1","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"by_month","database":"var:nhl_rosters"},{"id":93,"value":"select \nMONTH(birth_date) as month_num\n,YEAR(birth_date) as year\n,strftime(birth_date, '%b') as month_abbr\n,count(distinct player_id) as count_players\nfrom nhl_rosters\nWHERE year>=1995 and year<=2000\nGROUP BY ALL\nORDER BY 2, 1","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"by_month_year","database":"nhl_rosters.csv"},{"id":431,"value":"SELECT * \nFROM nhl_rosters\nWHERE season = 20222023 and birth_country = ${selectCountry}","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"roster_subset","database":"var:nhl_rosters"},{"id":7,"value":"Data from [TidyTuesday](https://github.com/rfordatascience/tidytuesday/blob/master/data/2024/2024-01-09/nhl_rosters.csv).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"nhl_rosters = await FileAttachment(\"nhl_rosters.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"nhl_rosters","database":"$undefined"},{"id":436,"value":"beeswarmData = calculateBeeswarm(roster_subset, \"weight_in_pounds\",0, radius, 1.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"### CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"