2d:null 2e:["$","title",null,{"children":"Scatter Plot /w better tooltip | Ege | Observable"}] 33:T586,chart = { const { h, w, bg, padding } = config const svg = d3 .select(DOM.svg(w, h)) .style('background', bg) .attr('id', 'grap') // X axis svg.append('g') .attr('transform', `translate(0, ${h - padding})`) .call(xAxis) .attr('class', 'axis') .selectAll('text') .attr('x', 20) .attr('y', 4) svg.append("text") .attr('class', 'label') .attr("text-anchor", "end") .attr("y", h - padding/3) .attr("x", w/2) .text("Year"); // Y Axis svg.append('g') .attr('transform', `translate(${padding}, ${padding})`) .call(yAxis) .attr('class', 'axis') .selectAll('text') .attr('x', -8) .attr('y', 12) svg.append("text") .attr('class', 'label') .attr("text-anchor", "end") .attr("y", 32) .attr("x", -h/3) .attr("transform", "rotate(-90)") .text("Time in minutes"); const xScale = d3.scaleLinear() .domain([d3.min(years) - 1, d3.max(years)]) .range([padding, w - padding]) const yScale = d3.scaleLinear() .domain([d3.min(seconds) - 10 , d3.max(seconds)]) .range([padding, h - padding]) // Cicles svg.selectAll('circle') .data(cyclists) .enter() .append('circle') .attr('class', 'circle') .attr('cx', d => xScale(d.Year)) .attr('cy', d => h - yScale(d.Seconds)) .attr('r', 4) return svg.node() }34:[] 31:{"id":"8c8d907aec15978b","slug":"scatter-plot-w-better-tooltip","title":"Scatter Plot /w better tooltip","thumbnail":"7fd0d47abae729e202910c8fd1c3307e1dedf1f9e79f3df2ba14d5410144c07c","access_level":"public","create_time":"$D2020-06-10T16:25:40.225Z","update_time":"$D2020-06-10T21:01:22.567Z","view_time":null,"first_public_time":"$D2020-06-10T21:00:24.512Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"724b611e67ddda86","login":"ege","name":"Ege","avatar_url":"https://avatars-next.observableusercontent.com/30884d615bf38c182fd5c464806b8e409c0124ba9030adfced935918adce8ad9","tier":"starter_2024"},"version":524,"publish_version":524,"role":null,"authored":false,"authors":[{"type":"individual","id":"d1ec98edf7859319","login":"ege","name":"Ege","avatar_url":"https://avatars-next.observableusercontent.com/30884d615bf38c182fd5c464806b8e409c0124ba9030adfced935918adce8ad9","tier":null}],"members":[{"type":"individual","id":"d1ec98edf7859319","login":"ege","name":"Ege","avatar_url":"https://avatars-next.observableusercontent.com/30884d615bf38c182fd5c464806b8e409c0124ba9030adfced935918adce8ad9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":null,"type":"notebook","body":{"title":"Scatter Plot /w better tooltip","cells":[{"id":0,"value":"md`# Scatter Plot /w better tooltip \n### (freecodecamp challenge#2)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"md`## Doping In Professional Bicycle Racing \nChart of 35 fastest times up Alpe d'Huez \\n \n*Hover over dots to see details and click to go to wiki page*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"tooltip = {\n chart\n const tooltip =\n d3.select('body').append('div')\n .attr('class', 'tooltip')\n .style('position', 'absolute')\n .style('visibility', 'hidden').text('ege')\n\n d3.selectAll(\"circle\")\n .on(\"mouseover\", function(d){\n d3.select(this).transition().attr('r', 12)\n })\n .on(\"mousemove\", function(d){\n return tooltip\n.html(`\\\nName: ${d.Name}
\\\nYear: ${d.Year}
\\\nTime: ${d.Time}
\\\nNationality: ${d.Nationality}
\\\nClick to see more info.
\\\n`)\n .style(\"top\", (d3.event.pageY-10)+\"px\")\n .style(\"left\",(d3.event.pageX+20)+\"px\")\n .style(\"visibility\", \"visible\");\n })\n .on(\"mouseout\", function(){\n d3.select(this).transition().attr('r', 4) \n return tooltip.html(``).style(\"visibility\", \"hidden\");\n })\n .on(\"click\", function(d) {\n window.open(d.URL);\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"yAxis = {\n const { w, h, padding } = config\n const yAxScale = d3\n .scaleLinear()\n .domain([d3.min(seconds) - 10, d3.max(seconds)])\n .range([h - padding*2, 0])\n const yAx = d3\n .axisLeft()\n .ticks(20)\n .tickFormat(d => {\n return msToStringTime(d)\n })\n .scale(yAxScale)\n return yAx\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"xAxis = {\n const { h, w, padding } = config\n const xAxScale = \n d3.scaleLinear()\n .domain([d3.min(years) -1, d3.max(years)])\n .range([padding, w - padding])\n \n const xAx = d3\n .axisBottom()\n .scale(xAxScale)\n .ticks(20)\n .tickFormat(d => d.toString())\n \n return xAx\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"years = cyclists.map(c => c.Year)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"seconds = cyclists.map(c => c.Seconds)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"config = {\n return {\n h: 500,\n w: 800,\n padding: 80,\n bg: 'hsl(187, 100%, 27%)'\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"msToStringTime = ms => { \n const min = Math.floor(ms/60)\n const sec = Math.floor((ms/60) % min * 60)\n return `${min}:${sec}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"cyclists = d3.json(dataUrl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"dataUrl = 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`\n---\n*Objectives:*\n - Fetch data from: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json\n - Create a chart area with appropriate axes\n - Give axes names and adjust the tick labels\n - Enter data to the plot\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"