34:["$","title",null,{"children":"Personality Traits, View on Life and Opinions of Young People (Multiple Bars) | Tim Lafferty | Observable"}] 3c:T509,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["5"], b["5"])); }3d:[{"id":"2b734026cf61756bd6a6e90ec885a4886406067df7e9b2cfd8639df36d65cf9895eefdb17f9eb8905f72988a6072a5d37cf05864d8063afcfb3964964199c6a5","href":"https://static.observableusercontent.com/files/2b734026cf61756bd6a6e90ec885a4886406067df7e9b2cfd8639df36d65cf9895eefdb17f9eb8905f72988a6072a5d37cf05864d8063afcfb3964964199c6a5","name":"SurveySample.csv","type":"text/csv","lastModified":1634902125155.671,"size":7531130}] 38:{"id":"9af7f0c8853d2c86","slug":"personality-traits-view-on-life-and-opinions-of-young-peopl","title":"Personality Traits, View on Life and Opinions of Young People (Multiple Bars)","thumbnail":"fd1f78ecf2ce4612b99c261a2a6d3e08a5a88759f2bfb26fb8a01cb1acbbf024","access_level":"public","create_time":"$D2021-10-22T11:28:45.155Z","update_time":"$D2021-11-01T11:19:27.474Z","view_time":null,"first_public_time":"$D2021-10-22T12:16:53.992Z","has_unpublished_edits":null,"fork":{"id":"2f431cb5e3e9b2ff","slug":"stacked-bar-chart","title":"Personality Traits, View on Life and Opinions of Young People (100% Stacked)","owner":{"id":"bee9456da5197995","login":"timlafferty","name":"Tim Lafferty"}},"stars":2,"starred":false,"owner":{"type":"team","id":"bee9456da5197995","login":"timlafferty","name":"Tim Lafferty","avatar_url":"https://avatars-next.observableusercontent.com/7f79f75b70e154fa26e9abf1c11d6e0ebb2e6250c6b28b28e485e6aaebaea00d","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1056,"publish_version":1056,"role":null,"authored":false,"authors":[{"type":"individual","id":"d2d6cb4496c05170","login":"timlafferty","name":"Tim Lafferty","avatar_url":"https://avatars-next.observableusercontent.com/7f79f75b70e154fa26e9abf1c11d6e0ebb2e6250c6b28b28e485e6aaebaea00d","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"d2d6cb4496c05170","login":"timlafferty","name":"Tim Lafferty","avatar_url":"https://avatars-next.observableusercontent.com/7f79f75b70e154fa26e9abf1c11d6e0ebb2e6250c6b28b28e485e6aaebaea00d","tier":null,"role":"editor"}],"comments":[{"id":"7e36976783766262","reply_to_id":null,"content":"This isn't the correct way around, is it? Nobody likes to see animals suffering and much of the rest is also weird.","create_time":"$D2021-10-31T13:13:06.431Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"75aecdc67c9c3e41","login":"jtheisen","name":"Jens Theisen","avatar_url":"https://avatars-next.observableusercontent.com/69e2b33d1ba6ffa4a6341cd8ced3cdfdaee4e6911cd16311958cd6a5138687a0","tier":null}},{"id":"655997f60c57f204","reply_to_id":"7e36976783766262","content":"Ha. Yes - thank you for pointing it out. I reversed the legend colors but forgot the labels.","create_time":"$D2021-11-01T11:16:04.629Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d2d6cb4496c05170","login":"timlafferty","name":"Tim Lafferty","avatar_url":"https://avatars-next.observableusercontent.com/7f79f75b70e154fa26e9abf1c11d6e0ebb2e6250c6b28b28e485e6aaebaea00d","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"872c5524b7cf6542","slug":"public-collection","title":"Public Collection","owner":{"id":"bee9456da5197995","login":"timlafferty","name":"Tim Lafferty"}},"type":"notebook","body":{"titling":"auto","title":"Personality Traits, View on Life and Opinions of Young People (Multiple Bars)","cells":[{"id":0,"value":"

Personality Traits, View on Life and Opinions of Young People (Multiple Bars)

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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n \n drawYAxis(svg);\n buildStackedBarChart(svg);\n drawLegend(svg)\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"function drawLegend(svg){\n const legendColumns = (width - margin.right)/7 ;\n const colors = listOfColors\n const legendText = [\"Strongly Agree\", \"Agree\", \"Meh\", \"Disgree\", \"Strongly Disagree\"]\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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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.reverse()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"colors = d3.scaleOrdinal()\n .domain(stackedData.map(d => d.key))\n .range(listOfColors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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, i) => xScale( Math.abs(( (+d.key-5)*20))/100))\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]))/5)\n enter\n .append(\"text\")\n .attr(\"class\", \"bar-label\")\n .text(d => d3.format(\".1%\")(d[1]-d[0]))\n .attr(\"x\", d => xScale( Math.abs(( (+d.key-5)*20))/100) + ((xScale(d[1]) - xScale(d[0]))/5) + 1)\n .attr(\"y\", d => yScale(d.data.question) + yScale.bandwidth() - 2)\n }\n )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"function buildChartGroup(svg){\n svg.append(\"g\")\n .attr(\"class\", \"chart-area\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"xScale = d3.scaleLinear()\n .domain([0 , 1])\n .range([margin.left, (width - margin.right)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"yScale = d3.scaleBand()\n .domain(formattedData.map(d => d.question))\n .range([margin.top, height - margin.bottom])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"margin = ({top: 100, right: 30, bottom: 30, left: 250})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"fontSize = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"height = 2500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"radius = yScale.bandwidth()/2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"stackedData = d3.stack()\n .keys([\"1\", \"2\", \"3\", \"4\", \"5\"].reverse())\n(formattedData)\n .map(d => (d.forEach(v => v.key = d.key), d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 33:null