31:T51b,formattedData = { const data = []; const nestedData = d3.nest() .key(d => d.question) .rollup(v => { return { "1": d3.sum(v, d => d.response === 1 ? 1 : 0)/v.length, "2": d3.sum(v, d => d.response === 2 ? 1 : 0)/v.length, "3": d3.sum(v, d => d.response === 3 ? 1 : 0)/v.length, "4": d3.sum(v, d => d.response === 4 ? 1 : 0)/v.length, "5": d3.sum(v, d => d.response === 5 ? 1 : 0)/v.length, "agreementRate": d3.sum(v, d => d.response >= 4 ? 1 : 0)/v.length, "disagreementRate": d3.sum(v, d => d.response <= 2 ? 1 : 0)/v.length, "neutralRate": d3.sum(v, d => d.response === 3 ? 1 : 0)/v.length } }) .entries(sourceData); console.log("nest: ", nestedData) for (let i = 0; i < nestedData.length; i++){ data.push({ question: nestedData[i].key, "1": nestedData[i].value["1"], "2": nestedData[i].value["2"], "3": nestedData[i].value["3"], "4": nestedData[i].value["4"], "5": nestedData[i].value["5"], "agreementRate": nestedData[i].value.agreementRate, "disagreementRate": nestedData[i].value.disagreementRate, "neutralRate": nestedData[i].value.neutralRate }) }; return data .sort((a, b) => d3.descending(a.agreementRate, b.agreementRate)); }32:[{"id":"2b734026cf61756bd6a6e90ec885a4886406067df7e9b2cfd8639df36d65cf9895eefdb17f9eb8905f72988a6072a5d37cf05864d8063afcfb3964964199c6a5","href":"https://static.observableusercontent.com/files/2b734026cf61756bd6a6e90ec885a4886406067df7e9b2cfd8639df36d65cf9895eefdb17f9eb8905f72988a6072a5d37cf05864d8063afcfb3964964199c6a5","name":"SurveySample.csv","type":"text/csv","lastModified":1596583154413.453,"size":7531130}] 2f:{"title":"Personality Traits, View on Life and Opinions of Young People (100% Stacked)","cells":[{"id":0,"value":"

Personality Traits, View on Life and Opinions of Young People (100% Stacked)

Results of a survey conducted in 2013 by the Faculty of Social and Economic Sciences

Data Source can be found here

","pinned":false,"hidden":false,"mode":"html"},{"id":30,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n \n drawYAxis(svg);\n drawXAxis(svg);\n buildStackedBarChart(svg);\n buildAgreementPlot(svg);\n drawLegend(svg)\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"function drawLegend(svg){\n const legendColumns = (width - margin.right)/7 ;\n const colors = listOfColors\n const legendText = [\"Strongly Disagree\", \"Disagree\", \"Meh\", \"Agree\", \"Strongly Agree\"]\n \n const legendGroup = svg.append(\"g\")\n .attr(\"class\", \"legend-group\")\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n \n for (let i = 0; i < colors.length; i++){\n console.log(colors[i]);\n legendGroup\n .append(\"rect\")\n .attr(\"x\", legendColumns*(i))\n .attr(\"y\", 30)\n .attr(\"rx\", 5)\n .attr(\"ry\", 5)\n .attr(\"fill\", colors[i])\n .attr(\"height\", radius)\n .attr(\"width\", radius);\n legendGroup\n .append(\"text\")\n .text(legendText[i])\n .attr(\"x\", (legendColumns*(i)) + radius + 5)\n .attr(\"y\", 30 + radius/2 + 5)\n .attr(\"font-size\", \"10px\")\n }\n\n\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"listOfColors = {\n let stronglyAgree = '#95B850'\n let agree = \"#C9DDA4\"\n let stronglyDisagree = '#266497'\n let disagree = \"#94AFCA\"\n let meh = \"#ededed\"\n let listOfColors = [stronglyDisagree, disagree, meh, agree, stronglyAgree]\n return listOfColors\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"colors = d3.scaleOrdinal()\n .domain(stackedData.map(d => d.key))\n .range(listOfColors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"function buildAgreementPlot(svg){\n svg.append(\"g\")\n .attr(\"class\", \"dot-group\")\n .selectAll(\"circle\")\n .data(formattedData, d => d.question)\n .join(\n enter => {\n enter\n .append(\"circle\")\n .attr(\"class\", \"dot\")\n .attr(\"cy\", d => yScale(d.question) + radius)\n .attr(\"r\", radius)\n .attr(\"fill\", \"#fff\")\n .attr(\"stroke\", \"#ddd\")\n //.transition().duration(2000)\n .attr(\"cx\", d => xScale(d.agreementRate));\n enter\n .append(\"text\")\n .attr(\"class\", \"dot-label\")\n .text(d => d3.format(\".1%\")(d.agreementRate))\n .attr(\"y\", d => yScale(d.question) + radius + 4)\n //.transition().duration(2000)\n .attr(\"x\", d => xScale(d.agreementRate) - (radius/2) - 5)\n\n }\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"function buildStackedBarChart(svg){\n svg.append(\"g\")\n .attr(\"class\", \"stacked-group\")\n .selectAll(\".stacked-group\")\n .data(stackedData)\n .enter()\n .selectAll(\"rect\")\n .data(d => d)\n .join(\n enter => {\n enter\n .append(\"rect\")\n .attr(\"x\", d => xScale(d[0]))\n .attr(\"y\", d => yScale(d.data.question))\n .attr(\"rx\", 5)\n .attr(\"ry\", 5)\n .attr(\"height\", yScale.bandwidth())\n .attr(\"fill\", d => colors(d.key))\n .attr(\"stroke\", \"#fff\")\n .attr(\"width\", d => xScale(d[1]) - xScale(d[0]))\n }\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"function buildChartGroup(svg){\n svg.append(\"g\")\n .attr(\"class\", \"chart-area\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"xScale = d3.scaleLinear()\n .domain([0 , 1])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"xAxis = d3.axisTop(xScale)\n .ticks(5)\n .tickSizeInner(-height-margin.right)\n .tickSizeOuter(0)\n .tickFormat(d => d3.format(\".0%\")(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"function drawXAxis(svg) {\n svg.append(\"g\")\n .attr(\"transform\", `translate(0, ${margin.top})`)\n .attr(\"class\", \"x axis\")\n .call(xAxis)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"yScale = d3.scaleBand()\n .domain(formattedData.map(d => d.question))\n .range([margin.top, height - margin.bottom])\n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"yAxis = d3.axisLeft(yScale)\n .tickSize(0)\n .tickSizeInner(-height-margin.top)\n .tickFormat(d => d.length > 40 ? d.substring(0, 40) + \"...\" : d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"function drawYAxis(svg){\n svg.append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .attr(\"class\", \"y axis\")\n .call(yAxis)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"margin = ({top: 100, right: 30, bottom: 30, left: 250})","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"fontSize = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"height = 2500;","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"radius = yScale.bandwidth()/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"stackedData = d3.stack()\n .keys([\"1\", \"2\", \"3\", \"4\", \"5\"])\n(formattedData)\n .map(d => (d.forEach(v => v.key = d.key), d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"chartData = {\n const data = [];\n const nestedData = d3.nest()\n .key(d => d.question)\n .key(d => d.response)\n .rollup(v => v.length)\n .entries(sourceData)\n .map(d => {\n return {\n question: d.key,\n values: d.values.map(v => {\n return {\n response: v.key,\n count: v.value\n }\n })\n }\n });\n \n for (let i = 0; i < nestedData.length; i++) {\n nestedData.forEach(d => {\n d.totalResponses = d3.sum(d.values, x => x.count);\n d.values.forEach(x => {\n data.push({\n question: d.question,\n totalResponsesPerQuestion: d.totalResponses,\n response: x.response,\n percentOfTotal: x.count/d.totalResponses\n });\n })\n });\n };\n \n return data;\n //return nestedData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"sourceData = {\n const rawData = await FileAttachment(\"SurveySample.csv\").text();\n return d3.csvParse(rawData, ({ Response, Question, Age, Height, Weight, NumberOfSiblings, Gender, HandOrientation, Education, isOnlyChild, ChildhoodLocale, ChildhoodDwelling }) => ({\n response: +Response,\n question: Question,\n age: +Age,\n height: +Height,\n weight: +Weight,\n numOfSiblings: +NumberOfSiblings,\n handOrientation: HandOrientation,\n education: Education,\n isOnlyChild: isOnlyChild,\n locale: ChildhoodLocale,\n dwelling: ChildhoodDwelling\n }))\n .filter(d => d.response)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}