2b:[{"id":"2b734026cf61756bd6a6e90ec885a4886406067df7e9b2cfd8639df36d65cf9895eefdb17f9eb8905f72988a6072a5d37cf05864d8063afcfb3964964199c6a5","href":"https://static.observableusercontent.com/files/2b734026cf61756bd6a6e90ec885a4886406067df7e9b2cfd8639df36d65cf9895eefdb17f9eb8905f72988a6072a5d37cf05864d8063afcfb3964964199c6a5","name":"SurveySample.csv","type":"text/csv","lastModified":1634905098709.786,"size":7531130}] 2a:{"title":"Personality Traits, View on Life and Opinions of Young People (Heat Map)","cells":[{"id":823,"value":"

Personality Traits, View on Life and Opinions of Young People (Heat Map)

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 drawYAxis(svg);\n drawXAxis(svg);\n buildRects(svg);\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1312,"value":"listOfColors = {\n let stronglyAgree = '#95B850'\n let agree = \"#C9DDA4\"\n let meh = \"#eee\"\n let stronglyDisagree = '#266497'\n let disagree = \"#94AFCA\"\n let listOfColors = [stronglyDisagree, disagree, meh, agree, stronglyAgree]\n return listOfColors\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1367,"value":"function getColorScale(percentageValue, scalerDirection) {\n let range = \"#ffffff\"\n if (scalerDirection == 'Positive') {\n range = listOfColors[4] \n } else if(scalerDirection == \"Negative\") {\n range = listOfColors[0]\n }\n let colorScale = d3.interpolateRgb(listOfColors[2], range)(percentageValue / percentageMax)\n return colorScale\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"function buildRects(svg) {\n svg.append(\"g\")\n .attr(\"class\", \"heat-area\")\n .selectAll(\".rect\")\n .data(formattedData)\n .join(\n enter => {\n enter\n .append(\"rect\")\n .attr(\"x\", d => xScale(d.numericLabel))\n .attr(\"y\", d => yScale(d[0]))\n .attr(\"rx\", 5)\n .attr(\"ry\", 5)\n .attr(\"height\", yScale.bandwidth())\n .attr(\"fill\", d => getColorScale(d.responsePercentage, d.scalerDirection))\n .attr(\"stroke\", \"#fff\")\n .attr(\"width\", d => xScale.bandwidth())\n enter\n .append(\"text\")\n .attr(\"class\", \"rect-label\")\n .text(d => d3.format('.1%')(d.responsePercentage))\n .attr(\"x\", d => xScale(d.numericLabel) + (xScale.bandwidth()/2) - 12)\n .attr(\"y\", d => yScale(d[0]) + (yScale.bandwidth()/2) + 4)\n \n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1440,"value":"percentageMax = d3.extent(formattedData, d => d.responsePercentage)[1]","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.scaleBand()\n .domain(formattedData.map(d => d.numericLabel))\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 => 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[0]))\n .range([margin.top, height - margin.bottom])\n .padding(0.01)","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":261,"value":"formattedData = {\n let rollup = d3Array.flatRollup(sourceData, v => v.length, d => d.question, d => d.response.toString())\n rollup.forEach(d => {\n d['numericLabel'] = assignNumericLabel(d[1])\n d['totalResponses'] = sourceData.filter(e => d[0] == e.question).length\n d['responsePercentage'] = d[2]/d.totalResponses\n if (d[1] <= 2) {\n d['scalerDirection'] = 'Negative'\n } else if (d[1] >= 4) {\n d['scalerDirection'] = 'Positive'\n } else {\n d['scalerDirection'] = 'Neutral'\n }\n })\n console.log(\"rollup values: \", rollup.sort((a, b) => d3.ascending(a[0], b[0])))\n return rollup.sort((a, b) => d3.ascending(a[0], b[0])).sort((a, b) => d3.descending(a[1], b[1]))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1088,"value":"function assignNumericLabel(value) {\n let _label = ''\n if (value == \"1\") {\n _label = \"Strongly Disgree\"}\n else if (value == \"2\") {\n _label = \"Disagree\"}\n else if (value == \"3\") {\n _label = \"Meh\"}\n else if (value == \"4\") {\n _label = \"Agree\"\n } else if (value == \"5\") {\n _label = \"Strongly Agree\"\n }\n else {\n _label = \"Unknown\"\n }\n return _label\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@6\")\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"d3Array = require(\"d3-array@^3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2b","stdlib":"1","titling":"auto"}