{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{"gridIframeSandboxAttributes":"allow-forms allow-modals allow-pointer-lock allow-presentation allow-same-origin allow-scripts"},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjMyODg5MTU0LCJpYXQiOjE2MzI4ODU1NTQsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.8SQeT8MVKgrm0Q37FAI6YsaU482SQlvq4AIi3EqGA50jvwpQmGFfPvGyp1QOdtQwB8u__jmGmMMveVrtcgf7Kh_jHWzi_qt_QMBww8t0p4VDYulEKEXHqqRTl2lcbUGHIjLmXQA-8GzjeKR-OjRVBpR1PMyAm8t5Qhf8H7-1pMOzgh8mz_nTtsgKIYwglj6iu2PFK_BGFOzqvTUaX11gGlSjz6BEbyUAOW8yAbHnJcehcIXUd4XtwFMM5T1b9Pxf7QFgxJMo27002_nEOwaMQClO1S1GSXgPFq2F_z66PPVW1qMPDE-BJ0XlzM_f9PsWtzMp_tUIIg-DuQHxyTwJoA"},"__graphql":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar80":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=512&version=0&width=512","currentContext":{"id":"VoDkNZ","baseUrl":"/anon","title":"Captain Anonymous","name":"Captain Anonymous","avatar80":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=512&version=0&width=512","username":"anon","contextType":"USER","__typename":"User"},"currentTeamId":null,"baseUrl":"/anon","username":"anon","admin":false,"anon":true,"pro":false,"verified":null,"teams":[],"__typename":"User"}}},"__pay_stripe_public":"pk_NgCjQmQs7wXOFmfNC0LKMgEkmlThn","__pay_braintree_env":"production","__item":"{\"id\":32037218,\"user_id\":2814973,\"html\":\"<div id=\\\"title\\\">Which tennis player was No.1 the longest?<\\/div>\\n<div id=\\\"legend\\\">\\n <div class=\\\"item female\\\">Women<\\/div>\\n <div class=\\\"item male\\\">Men<\\/div>\\n<\\/div>\\n<div id=\\\"chart-wrapper\\\">\\n <canvas id=\\\"chart\\\"><\\/canvas>\\n<\\/div>\\n<div id=\\\"footer\\\">\\n <div class=\\\"left\\\" ><a href=\\\"https:\\/\\/createwithdata.com\\/chartjs-and-csv\\/\\\" target=\\\"_blank\\\">About<\\/a><\\/div>\\n <div class=\\\"right\\\">Source: <a href=\\\"https:\\/\\/public.tableau.com\\/en-us\\/s\\/resources\\\" target=\\\"_blank\\\">Tableau<\\/a> \\/ Wikipedia<\\/div>\\n<\\/div>\",\"css\":\"body {\\n font-family: 'Roboto';\\n color: #333;\\n background-color: #F9F7EB;\\n}\\n\\n#title {\\n font-family: 'Merriweather';\\n text-align: center;\\n padding: 30px;\\n font-size: 28px;\\n letter-spacing: -0.01em;\\n color: #333;\\n}\\n\\n#legend {\\n display: flex;\\n justify-content: flex-end;\\n padding: 0 10px 10px;\\n font-size: 12px;\\n}\\n\\n#legend .item {\\n line-height: 12px;\\n padding: 0 10px 0 4px;\\n}\\n\\n#legend .item.male {\\n border-left: 12px solid #19A0AA;\\n}\\n\\n#legend .item.female {\\n border-left: 12px solid #F15F36;\\n}\\n\\n\\n#chart-wrapper {\\n height: 1000px;\\n}\\n\\n#footer {\\n display: flex;\\n justify-content: space-between;\\n padding: 20px 10px;\\n color: #aaa;\\n font-size: 12px;\\n}\\n\\n#footer a {\\n color: #aaa;\\n}\\n\\n\",\"parent\":0,\"js\":\"Chart.defaults.global.defaultFontFamily = 'Roboto';\\nChart.defaults.global.defaultFontColor = '#333';\\n\\nfunction makeChart(players) {\\n \\/\\/ players is an array of objects where each object is something like:\\n \\/\\/ {\\n \\/\\/ \\\"Name\\\": \\\"Steffi Graf\\\",\\n \\/\\/ \\\"Weeks\\\": \\\"377\\\",\\n \\/\\/ \\\"Gender\\\": \\\"Female\\\"\\n \\/\\/ }\\n\\n var playerLabels = players.map(function(d) {return d.Name});\\n var weeksData = players.map(function(d) {return +d.Weeks});\\n var playerColors = players.map(function(d) {return d.Gender === 'Female' ? '#F15F36' : '#19A0AA';});\\n\\n var chart = new Chart('chart', {\\n type: 'horizontalBar',\\n options: {\\n maintainAspectRatio: false,\\n legend: {\\n display: false\\n },\\n scales: {\\n xAxes: [\\n {\\n scaleLabel: {\\n display: true,\\n labelString: 'Weeks at No.1',\\n fontSize: 16\\n }\\n }\\n ]\\n }\\n },\\n data: {\\n labels: playerLabels,\\n datasets: [\\n {\\n data: weeksData,\\n backgroundColor: playerColors\\n }\\n ]\\n }\\n })\\n}\\n\\n\\/\\/ Request data using D3\\nd3.csv('https:\\/\\/s3-us-west-2.amazonaws.com\\/s.cdpn.io\\/2814973\\/atp_wta.csv')\\n .then(makeChart);\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"css_prefix_free\":null,\"css_external\":null,\"js_library\":null,\"js_modernizr\":null,\"js_external\":null,\"created_at\":\"2019-01-21T10:28:16.000Z\",\"updated_at\":\"2019-06-21T14:41:23.000Z\",\"session_hash\":\"c511c820062793b190d485baeaf03618\",\"title\":\"Visualising a CSV file with Chart.js\",\"description\":\"This pen demonstrates how to load a comma separated value (CSV) file using D3 and visualising it using Chart.js. The data is hosted as a Codepen asset, but could be hosted anywhere on the web. See tutorial at https:\\/\\/createwithdata.com\\/chartjs-and-csv\\/\",\"slug_hash\":\"mvbBYa\",\"head\":\"<link href=\\\"https:\\/\\/fonts.googleapis.com\\/css?family=Merriweather|Roboto\\\" rel=\\\"stylesheet\\\">\",\"private\":false,\"slug_hash_private\":\"7b3e754b59786a257a715b385bc890e2\",\"has_animation\":false,\"css_pre_processor_lib\":\"\",\"checksum\":0,\"screenshot_uuid\":\"9d109797-11bf-416f-8d2d-e12cd729602b\",\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"js_module\":false,\"pen_hash\":null,\"hashid\":\"mvbBYa\"}"}