31:Tffe,graphic = { renderChart(raceData); function renderChart(results) { // modified from https://bl.ocks.org/mbostock/1550e57e12e73b86ad9e var canvas = document.querySelector("canvas"), context = canvas.getContext("2d"); var inputDriver = selectedDriver; var scaleFactor = window.devicePixelRatio || 1; context.clearRect(0, 0, canvas.width * scaleFactor, canvas.height * scaleFactor); context.scale(scaleFactor, scaleFactor); context.translate(0.5, 0.5); var drivers = []; var box = canvas.getBoundingClientRect(); var margin = {top: 20, right: 20, bottom: 30, left: 80}, width = (box.width - margin.left - margin.right) * scaleFactor, height = (box.height - margin.top - margin.bottom) * scaleFactor; canvas.width = box.width * scaleFactor; canvas.height = box.height * scaleFactor; var parseTime = d3.timeParse("%Y-%m-%d"); //1950-05-13 var x = d3.scaleTime() //.scaleLinear() .range([0, width]); var y = d3.scaleLinear() .range([height, 0]); var line = d3.line() // .x(function(d, i) { return x(i); }) .x(function(d, i) { return x(d.date); }) .y(function(d) { return y(d.points); }) //.curve(d3.curveStep) .context(context); context.translate(margin.left, margin.top); var data = {}; for (let i = 0; i < results.length; i++) { var d = results[i]; d.date = parseTime(d.r); if (drivers.indexOf(d.driver_id) === -1) { drivers.push(d.d); } data[d.d] = data[d.d] || []; var dataField = data[d.d]; var previousPoints = dataField.length > 0 ? dataField[dataField.length - 1].points : 0; data[d.d].push({ date: d.date, points: d.pt + previousPoints, }) } x.domain([parseTime('1950-05-13'), parseTime('2018-11-25')]); y.domain([0, 3200]); xAxis(); yAxis(); var colors = ['#f00', '#090', '#fd0', '#009', '#0ff']; for (let i = 0; i < drivers.length; i++) { context.beginPath(); line(data[drivers[i]]); context.lineWidth = 1; var selectedDrivers = ["1105", "1031", "1140", "1018", inputDriver]; if (selectedDrivers.indexOf(drivers[i]) > -1) { context.strokeStyle = colors[selectedDrivers.indexOf(drivers[i])]; } else { context.strokeStyle = "rgba(200,200,200,0.05)"; } context.stroke(); } function xAxis() { var tickCount = 10, tickSize = 6, ticks = x.ticks(tickCount), tickFormat = x.tickFormat(); context.beginPath(); ticks.forEach(function(d) { context.moveTo(x(d), height); context.lineTo(x(d), height + tickSize); }); context.strokeStyle = "black"; context.stroke(); context.textAlign = "center"; context.textBaseline = "top"; context.font = "24px sans-serif"; ticks.forEach(function(d) { context.fillText(tickFormat(d), x(d), height + tickSize); }); } function yAxis() { var tickCount = 10, tickSize = 6, tickPadding = 3, ticks = y.ticks(tickCount), tickFormat = y.tickFormat(tickCount); context.beginPath(); ticks.forEach(function(d) { context.moveTo(0, y(d)); context.lineTo(-6, y(d)); }); context.strokeStyle = "black"; context.stroke(); context.beginPath(); context.moveTo(-tickSize, 0); context.lineTo(0.5, 0); context.lineTo(0.5, height); context.lineTo(-tickSize, height); context.strokeStyle = "black"; context.stroke(); context.textAlign = "right"; context.textBaseline = "middle"; ticks.forEach(function(d) { context.fillText(tickFormat(d), -tickSize - tickPadding, y(d)); }); context.save(); context.rotate(-Math.PI / 2); context.textAlign = "right"; context.textBaseline = "top"; context.font = "24px sans-serif"; context.restore(); } } }32:[] 2f:{"title":"F1 Championship Points by every driver since 1950","cells":[{"id":0,"value":"md`# F1 Championship Points by every driver since 1950`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"viewof driver = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"html`\n

- Alain Prost

- Ayrton Senna

- Michael Schumacher

- Lewis Hamilton

- ${driver || 'Unselected'}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`\nData: [EloF1](https://github.com/emkael/elof1/tree/master/f1elo)\n\nNotes: Championship points changed most significantly in 2010 (to 25-18-15-12-10-8-6-4-2-1), but also the older system (10-8-6-2-1) changed a few times over the years ([see wiki](https://en.wikipedia.org/wiki/List_of_Formula_One_World_Championship_points_scoring_systems)). \n\nFastest lap points ignored (1950-59, 2019-). \n\nDropped races ignored (1950-1990).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"selectedDriver = {\n var inputDriverName = driver;\n var driverListFilter = driverList.filter(d => d.driver_name === inputDriverName);\n\n if(driverListFilter.length > 0) {\n var inputDriver = driverListFilter[0].driver_id;\n }\n \n return inputDriver;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"driverList = d3.csv('https://raw.githubusercontent.com/joshrayman/joshrayman.github.io/master/vis/drivers.csv')","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"raceData = d3.json(\"https://raw.githubusercontent.com/joshrayman/joshrayman.github.io/master/vis/data-min.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"html`\n\n ${driverList.map(driver => ``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}