31:T4db,function buildStackedBarChart(svg){ svg.append("g") .attr("class", "stacked-group-agree") .selectAll(".stacked-group-agree") .data(stackedDataAgree) .enter() .selectAll("rect") .data(d => d) .join( enter => { enter .append("rect") .attr("x", d => xScale(d[0])) .attr("y", d => yScale(d.data.question)) .attr("rx", 5) .attr("ry", 5) .attr("height", yScale.bandwidth()) .attr("fill", d => colorsAgree(d.key)) .attr("stroke", "#fff") .attr("width", d => xScale(d[1]) - xScale(d[0])) } ); svg.append("g") .attr("class", "stacked-group-disagree") .selectAll(".stacked-group-disagree") .data(stackedDataDisagree) .enter() .selectAll("rect") .data(d => d) .join( enter => { enter .append("rect") .attr("x", d => xScale(d[1])) .attr("y", d => yScale(d.data.question)) .attr("rx", 5) .attr("ry", 5) .attr("height", yScale.bandwidth()) .attr("fill", d => colorsDisagree(d.key)) .attr("stroke", "#fff") .attr("width", d => Math.abs(xScale(d[1]) - xScale(d[0]))) } ); }32:T51a,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)) }33:[{"id":"2b734026cf61756bd6a6e90ec885a4886406067df7e9b2cfd8639df36d65cf9895eefdb17f9eb8905f72988a6072a5d37cf05864d8063afcfb3964964199c6a5","href":"https://static.observableusercontent.com/files/2b734026cf61756bd6a6e90ec885a4886406067df7e9b2cfd8639df36d65cf9895eefdb17f9eb8905f72988a6072a5d37cf05864d8063afcfb3964964199c6a5","name":"SurveySample.csv","type":"text/csv","lastModified":1596667238969.105,"size":7531130}] 2f:{"title":"Personality Traits, View on Life and Opinions of Young People (Likert Scale)","cells":[{"id":823,"value":"

Personality Traits, View on Life and Opinions of Young People (Likert Scale)

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":799,"value":"// like this function, but don't feel like using it...\n// listOfColors = {\n// let listOfColors = []\n// for (let i = 0; i < 7; i++) {\n// let _div = i / 7\n// listOfColors.push(d3.interpolatePuOr(_div))\n// }\n// return listOfColors.slice(2,6)\n// }\n\nlistOfColors = {\n let stronglyAgree = '#95B850'\n let agree = \"#C9DDA4\"\n let stronglyDisagree = '#266497'\n let disagree = \"#94AFCA\"\n let listOfColors = [stronglyDisagree, disagree, agree, stronglyAgree]\n return listOfColors\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"function drawLegend(svg){\n const legendColumns = (width - margin.right)/5 ;\n const colors = listOfColors\n const legendText = [\"Strongly Disagree\", \"Disagree\", \"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":207,"value":"colorsAgree = d3.scaleOrdinal()\n .domain(stackedDataAgree.map(d => d.key))\n .range(listOfColors.slice(2, 4))","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"colorsDisagree = d3.scaleOrdinal()\n .domain(stackedDataDisagree.map(d => d.key))\n .range(listOfColors.slice(0, 2).reverse())","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) - 4)\n\n }\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"$31","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([-1 , 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.1)","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: 300})","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":"stackedDataAgree = d3.stack()\n .keys([\"4\", \"5\"])\n(formattedData)\n .map(d => (d.forEach(v => v.key = d.key), d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"stackedDataDisagree = {\n \n const data = d3.stack()\n .keys([\"2\", \"1\"])\n (formattedData)\n .map(d => (d.forEach(v => v.key = d.key), d))\n \n for (let i = 0; i < data.length; i++){\n data[i].forEach(d => {d[0] = -d[0], d[1] = -d[1]})\n }\n \n return data;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"$32","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":"$W33","stdlib":"1","titling":"auto"}