3f:null 40:["$","title",null,{"children":"D3.js Football TimeLine | waihotse | Observable"}] 46:Tedd,{ const svg = d3.select(DOM.svg(innerWidth + margin.left + margin.right, (numTypes * (rowHeight + rowPadding)) + margin.top + margin.bottom+50)); let chart = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`) const tooltip_circle = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '5px') .style('float', 'left') .style('font-family', 'monospace') .style('font-size', '0.5px') .html(d =>`

Event Type: ${id_to_event[d.type]}
Time: ${d.min} : ${d.sec}
By: ${d.player_id}
Location: x: ${d.x} y: ${d.y}

`) svg.call(tooltip_circle) const tooltip_bar = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '5px') .style('float', 'left') .style('font-family', 'monospace') .style('font-size', '0.5px') .html(d =>`

Total number of events: ${d}

`) svg.call(tooltip_bar) const tooltip_rightbar = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '5px') .style('float', 'left') .style('font-family', 'monospace') .style('font-size', '0.5px') .html(d =>`

Event: ${d.key}
Total number of events: ${d.value.count}

`) svg.call(tooltip_rightbar) // let monthBars = chart.append("g") // .selectAll("rect") // .data(minute_stats) // .enter().append("rect") // .attr("x", d => x3(d.key)) // .attr("y", d => -y2(d.value)) // .attr("height", d => y2(d.value)) // .attr("width", d => x3(d3.timeMinute.offset(d.key, 1)) - x3(d.key) - 2) // .attr("fill", "firebrick") // .attr("opacity", 0.25) let monthBars = chart.append("g") .selectAll("rect") .data(minute_stats) .enter().append("rect") .attr("x", (d,i) => x3(i)) .attr("y", d => -y2(d)) .attr("height", d => y2(d)) .attr("width", d => x3(d+1) - x3(d)) .attr("fill", "green") .attr("opacity", 0.25) .on('mouseover', tooltip_bar.show) .on('mouseout', tooltip_bar.hide); // console.log(monthBars); //It is made but not sure why its unseen chart.append("g") .call(xAxis); let typeRows = chart.append("g") .selectAll("g") .data(event_typeEntries) .enter().append("g"); typeRows.append("text") .text(d => `${d.key} (${d.value.count})`) .attr("class", "label") .attr("x", -margin.left) .attr("y", d => y(d.key) + textOffset); typeRows.append("line") .attr("x1", x.range()[0]) .attr("x2", x.range()[1]) .attr("stroke", "rgba(0,0,0,0.05)") .attr("y1", d => y(d.key)) .attr("y2", d => y(d.key)) typeRows.append("rect") .attr("x", x2.range()[0]) .attr("y", d => y(d.key) - rowHeight / 2) .attr("height", rowHeight) .attr("width", d => x2(d.value.success) - x2.range()[0]) .attr("fill", "green") .attr("opacity", 0.25) .on('mouseover', tooltip_rightbar.show) .on('mouseout', tooltip_rightbar.hide); typeRows.append("text") .text(d => d.value.success) .attr("class", "label") .attr("text-anchor", "end") .attr("x", x2.range()[1] - 4) .attr("y", d => y(d.key) + textOffset); chart.append("g") .selectAll("circle") .data(UsaVsPortugal731796) .enter().append("circle") .attr("cx", d => x(d._ts)) .attr("cy", d => y(id_to_event[d.type])) .attr("r", d => event_types[id_to_event[d.type]].scale(d.outcome)) .attr("fill", d=>{ return (d.side=='H'?'blue':'red'); }) .attr("opacity", 0.25) .on('mouseover', tooltip_circle.show) .on('mouseout', tooltip_circle.hide); return svg.node(); }47:[] 44:{"id":"74e42ef2240b3398","slug":"untitled","title":"D3.js Football TimeLine","thumbnail":"f1179df55c62d1d55efe427e7ca8f871cacc09cbbdf5f238ec4e6d51f0f7227c","access_level":"public","create_time":"$D2019-04-30T16:50:53.002Z","update_time":"$D2019-05-02T05:58:18.465Z","view_time":null,"first_public_time":"$D2019-05-01T11:40:28.384Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"01838619b3f965fe","login":"whtsead213","name":"waihotse","avatar_url":"https://avatars-next.observableusercontent.com/412f98ec6ed5be36946a11cf9f0e849da68f34f435541345a2040718704d25af","tier":"starter_2024","bio":"HKUST\r\nComputer Science","following":false},"version":450,"publish_version":450,"role":null,"authored":false,"authors":[{"type":"individual","id":"4e2ea8687971ca1b","login":"whtsead213","name":"waihotse","avatar_url":"https://avatars-next.observableusercontent.com/412f98ec6ed5be36946a11cf9f0e849da68f34f435541345a2040718704d25af","tier":null,"bio":"HKUST\r\nComputer Science","following":false}],"members":[{"type":"individual","id":"4e2ea8687971ca1b","login":"whtsead213","name":"waihotse","avatar_url":"https://avatars-next.observableusercontent.com/412f98ec6ed5be36946a11cf9f0e849da68f34f435541345a2040718704d25af","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3.js Football TimeLine","cells":[{"id":439,"value":"md`# D3.js Football TimeLine`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"require('d3-scale-chromatic');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"d3tip = require('d3-tip')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"d_set = d3.csv('https://gist.githubusercontent.com/cheung927/4b7bf42c0aee3b26c6594471398bc912/raw/69be9047f80438e5eaaa1cf01997c43a1bab8228/usa-vs-portugal-731796.csv', d=>{\n return{\n ...d,\n _ts: d3.timeParse(\"%s\")(+d._ts),\n roundup_min: d3.timeParse(\"%M\")(d.min) \n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"id_to_event = ({\n \"16\": \"goal\",\n \"17\": \"card\",\n \"18\": \"player substituted\",\n \"13\": \"miss\",\n // \"5\": \"ball out\",\n //\"102\": \"start playing\",\n // \"100\": \"pass\",\n // \"101\": \"pass\",//\"ball conduction\",\n \"41\": \"goalkeeper punches ball\",\n \"10\": \"goalkeeper save shot\",\n \"15\": \"attempt saved by other player\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"UsaVsPortugal731796 = d_set.filter(d=> Object.keys(id_to_event).includes(d.type));\n//filter out undesired event records","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"UsaVsPortugal731796_groupbymin = _.groupBy(UsaVsPortugal731796,'roundup_min')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"minute_stats = json2array(UsaVsPortugal731796_groupbymin).map(d=>d.length)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"\njson2array = function json2array(json){\n var result = [];\n var keys = Object.keys(json);\n keys.forEach(function(key){\n result.push(json[key]);\n });\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"margin = ({top: 40, right: 32, bottom: 40, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"innerWidth = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"rowPadding = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"textOffset = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"style = html`\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":"event_types = d3.nest()\n\t.key(d => id_to_event[d.type])\n\t.rollup(event => ({\n success: d3.sum(event, e => e.outcome),\n scale: d3.scaleSqrt()\n \t.domain([0, d3.max(event, e => e.outcome)])\n \t.range([0, rowHeight / 2]),\n count: event.length\n }))\n\t.object(UsaVsPortugal731796)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"event_typeEntries = d3.entries(event_types)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"// x = d3.scaleLinear()\n// \t.domain(d3.extent(UsaVsPortugal731796.map(d=>+d._ts)))\n// \t.range([50, innerWidth - 200])\n\nx = d3.scaleTime()\n\t.domain(d3.extent(UsaVsPortugal731796.map(d=>d._ts)))\n\t.range([120, innerWidth - 200])\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"x2 = d3.scaleLinear()\n\t.domain([0, d3.max(event_typeEntries, d => d.value.success)])\n\t.range([x.range()[1] + 16, innerWidth])\n//the right half width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"[0,minute_stats.length]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"minute_stats.map((d,i)=>i)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"d3.max(minute_stats.map((d,i)=>d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"// x3 = d3.scaleTime()\n// \t.domain(d3.extent(UsaVsPortugal731796.map(d=>d.roundup_min)))\n// \t.range([120, innerWidth - 200])\nx3 = d3.scaleLinear()\n\t.domain([0,minute_stats.length])\n\t.range([120, innerWidth - 200])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"y = d3.scaleOrdinal()\n\t.domain(event_typeEntries.sort((a,b) => {\n\treturn b.value.success - a.value.success\n}).map(t => t.key))\n\t.range(d3.range(numTypes).map(d => (d * (rowHeight + rowPadding)) + rowHeight))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"y2 = d3.scaleLinear()\n\t.domain([0, d3.max(minute_stats.map((d,i)=>d))])\n\t.range([0, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"exp = d3.scaleSqrt()\n\t.domain([0, 1])\n\t.range([0, rowHeight / 2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"pow = d3.scalePow()\n\t.exponent(10)\n\t.domain([0, d3.max(UsaVsPortugal731796, d => d.outcome)])\n\t.range([0, 1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"r = function(d) {\n return exp(pow(d)); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"xAxis = g => g.attr(\"transform\", `translate(0, ${numTypes * (rowHeight + rowPadding) + rowHeight})`)\n .call(d3.axisBottom(x).ticks(innerWidth / 100).tickFormat(multiFormat))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"numTypes = d3.keys(event_types).length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"multiFormat = {\n // var formatMillisecond = d3.timeFormat(\".%L\"),\n // formatSecond = d3.timeFormat(\":%S\"),\n var formatMinute = d3.utcFormat(\"%H:%M:%S\");\n // formatHour = d3.timeFormat(\"%I %p\"),\n // formatDay = d3.timeFormat(\"%a %d\"),\n // formatWeek = d3.timeFormat(\"%b %d\"),\n // formatMonth = d3.timeFormat(\"%b\"),\n // formatYear = d3.timeFormat(\"%Y\");\n\n function multiFormat(date) {\n // return (d3.timeSecond(date) < date ? formatMillisecond\n // : d3.timeMinute(date) < date ? formatSecond\n // : d3.timeHour(date) < date ? formatMinute\n // : d3.timeDay(date) < date ? formatHour\n // : d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek)\n // : d3.timeYear(date) < date ? formatMonth\n // : formatYear)(date);\n return formatMinute(date);\n}\n return multiFormat;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"viewof rowHeight = html`\n\t\n`\n\n// viewof dateIn2017Slider2 = slider({\n// title: 'zoom',\n// value: 20,\n// min: 12,\n// max: 64,\n// step: 1,\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"minute_stats","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"build_linechart = function(dataset) {\n\treturn vegalite({\n data: {\n values: dataset\n },\n mark: \"bar\",\n width,\n height: 240,\n autosize: \"fit\",\n encoding: {\n x: {field: \"_ts\", type: \"temporal\", timeUnit: \"minutesecond\",\n axis: { format: \"%M:%S\", title: \"time\" }},\n y: { aggregate: \"count\", field: \"*\", type: \"quantitative\",\n },\n },\n title: `Event vs Time`\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"build_linechart(UsaVsPortugal731796)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"