31:Ta11,chart_grouping = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) const rects = svg.append("g") .selectAll("g.lollipop") .data(chart_data) .join("g") .attr("class", "lollipop"); svg.append("g") .attr("class", "xaxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x_satis) .tickFormat(x => Number.isInteger(x) ? x.toFixed(0) : `(${x})`) ); svg.append("g") .attr("class", "yaxis") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y_satis) .tickSize(0, 0) .tickPadding(4)) const title = svg.append("text") .attr("class", "chart_title") .attr("transform", `translate(${margin.left / 2}, ${margin.top / 2})`) .style("font-weight", "bold") .style("font-size", "1.25em") .style("text-anchor", "start") .text("Players Stats by " + filters.filter(d => d.value == group)[0].label); svg.node().update = (group) => { let scaleFactor = 10; let scaleCount = data.length; rects.attr("transform", `translate(0, ${20 / scaleCount})`); rects .append("rect") .attr("x", d => margin.left) .attr("y", d => y_satis(d.rating) + y1_satis(d.group)) .attr("width", d => x_satis(d.value) - margin.left) .attr("height", d => 2) .attr("fill", d => color_satis(d.group)) let circleOffset = scaleCount == 4 ? 1 : y1_satis.bandwidth() / (2 * scaleFactor); rects .append("circle") .attr("cx", d => x_satis(d.value)) .attr("cy", d => y_satis(d.rating) + y1_satis(d.group) + circleOffset) .attr("r", d => 5) .attr("fill", d => color_satis(d.group)) }; rects .on('mouseenter', function(e, d, i) { tooltip .html( `

${d.rating}

${d.group}

Average Value: ${d.value.toFixed(2)}

` ) .style('visibility', 'visible'); d3.select(this).selectAll("*").attr('fill', '#ffb8ff'); }) .on('mousemove', function(e) { const side_padding = 3; let x = e.pageX - 0; let y = e.pageY - 100; tooltip.style('top', y + 10 + 'px').style('left', x + 10 + 'px'); }) .on('mouseout', function() { tooltip.html(``).style('visibility', 'hidden'); d3.select(this).selectAll("*") .transition() .attr('fill', d => color_satis(d.group)); }); svg.append("g").call(legend_satis); return svg.node(); }32:[] 2f:{"title":"Final Project Charts - Le","cells":[{"id":0,"value":"md`# Final Project Charts - Le`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md\n`\n## Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"filters = [\n {label: \"Position\", value: \"Pos\"},\n {label: \"Age\", value: \"age_group\"}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"viewof group = select({\n description: \"Select grouping\",\n options: filters\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md `## Filtering Data and Preparing Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"using_data","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"data2","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"actual_data = data2.filter(d => d.Pos != \"PF-C\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"data = _.chain(actual_data)\n .map(obj => ({ ...obj, age_group: +obj.Age < 20 ? \"< 20\" : +obj.Age <= 25 ? \"20 - 25\" : +obj.Age <= 30? \"25 - 30\" : \"30+\"}))\n .groupBy(group)\n .map((d, group) => {\n return {\n group: group,\n \"AveragePoints\": d3.mean(d.map(d => d[\"PTS\"])),\n \"FreeThrow(%)\": d3.mean(d.map(d => d[\"FT%\"])) * 100,\n \"3 Point(%)\": d3.mean(d.map(d => d[\"3P%\"])) * 100,\n \"Field Goal(%)\": d3.mean(d.map(d => d[\"FG%\"])) * 100\n };\n })\n .value()","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"keys = [\"AveragePoints\", \"FreeThrow(%)\", \"3 Point(%)\", \"Field Goal(%)\"].reverse()","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"chart_data = keys.map(key => _.chain(data).groupBy(key)\n .map(d => d.map(d => {\n return {\n rating: key,\n group: d.group,\n value: d[key]\n };\n }))\n .value())\n.flat(2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"margin = ({ top: 50, right: 30, bottom: 30, left: 68 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"height = 650","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'd3-tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'hidden')\n .style('padding', '12px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('border-radius', '4px')\n .style('color', '#fff')\n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"12px\")\n .text('a simple tooltip')","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"chart_grouping.update(group)","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"legend_satis = svg => {\n const g = svg\n .attr(\"transform\", `translate(${width - margin.left / 2}, 0)`)\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .attr(\"font-weight\", \"bold\")\n .selectAll(\"g\")\n .data(color_satis.domain())\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * 20})`);\n\n g.append(\"rect\")\n .attr(\"x\", -19)\n .attr(\"width\", 19)\n .attr(\"height\", 19)\n .attr(\"fill\", color_satis);\n\n g.append(\"text\")\n .attr(\"x\", -24)\n .attr(\"y\", 9.5)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"x_satis = d3\n .scaleLinear()\n .domain([d3.min(chart_data.map(d => d.value)) * .95, d3.max(chart_data.map(d => d.value)) * 1.05])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"y_satis = d3\n .scaleBand()\n .padding(0.4)\n .domain(keys)\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"y1_satis = d3.scaleBand()\n .domain(data.map(d => d.group))\n .rangeRound([0, y_satis.bandwidth()])\n // .padding(0.4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"color_satis = d3\n .scaleOrdinal()\n .domain(data.map(d => d.group))\n .range([\"#219ebc\", \"#d62828\", \"#ffb703\", \"#06d6a0\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"data2","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"md` ## Apendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"import { swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"import { data as using_data, data1, data2 } from \"@uw-info474/project-proposal\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"_ = require(\"lodash@4\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}