Likert Scales - Squares

100%

Likert Scales - Squares

✓ Published0🌍 Public

Last edited Jan 11, 2017

Created on Jan 8, 2017

This visualization displays Likert-scale survey responses as a grid of colored squares, with each row representing a question and each column an individual respondent. It encodes answer values through a quantized blue color scale, aiding quiz designers in spotting response patterns. The interactive page uses D3 v4 to render the SVG matrix, while jQuery manages dynamic filter checkboxes that let users narrow the displayed data by metadata fields like age, gender, accuracy, country, and source. The code also implements axis labels and a tooltip for detailed inspection, with data loaded from a CSV file via `d3.csv`.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

D3.chart Likert (even-point) example

The example displays a four-point Likert scale survey visualization using d3.chart and d3.v3, presenting five survey items as horizontal stacked bars with colored segments for each response category. Each bar shows percentage distributions across four response options (e.g., “Strongly disagree” to “Agree”), with labels aligned to the left or right to suggest forced-choice responses. The chart uses SVG rendering with animated transitions when the “Randomize” button is clicked, which updates percentages via a normalization algorithm that scales four random values to total 100. The visualization builds on Mike Bostock’s bullet chart, with custom chart classes (`LikertEven`, `LikertEvens`) managing layers for backgrounds, grid lines, and bar segments. Axis labels and tick formatting show absolute values, while the final row demonstrates the scale’s semantics with dimension descriptions.

CCodeXmonk

74% match

Loading thumbnail…

PseudoViz: Diverging Likert

This visualization displays a diverging Likert scale for survey responses across twelve social media platforms. Each horizontal bar is centered at zero, with segments extending leftward (disagreement, in reds) and rightward (agreement, in blues), sized proportionally to the percentage of total responses. Bars are sorted by overall positive sentiment. The implementation uses d3 v7’s `select`, `scaleLinear`, and `join` to render SVG rects. The data is a hardcoded array of twelve six-integer counts. Colors are manually prescribed using hex values, while the d3-scale-chromatic library is loaded but not used.

KK Munz

73% match

Loading thumbnail…

Untitled

This visualization shows survey responses across six professional categories, with bars colored by five response levels ranging from "Not at all" to "Tremendously." Each category displays a cluster of bars for the different response rates. The chart uses d3.scale.ordinal for the x-axis, d3.scale.linear for the y-axis, and d3.svg.axis for the axes. Rectangles are animated into place using transition with random delays, and hover effects darken bar colors. A legend appears sequentially, and the y-axis fades in after the bars animate. The data comes from data.json.

EEagleV22

71% match

Loading thumbnail…

Square Grid

This visualization displays a changing quantity as a grid of colored squares, where each square represents one unit, arranged so small rows of ten, groups of one hundred, and large rows of one thousand allow quick reading of exact counts by powers of ten. The count updates randomly, with squares animating in and out using `transition.attr("width", 0)` and `transition.delay` based on index. The SVG rendering uses `d3.select` and `d3.range` to manage the cells, and a `d3.interpolateNumber` tween animates the text label. The code uses the D3 v3 library and an interval timer to trigger updates.

Mmbostock

70% match

Loading thumbnail…

2-Dimensional Data Display

A 2-dimensional grid of numeric values is displayed as a matrix of colored squares, with each cell’s value overlaid as white text. The visualization uses D3.js v5 with SVG rendering, employing `selectAll`, `data`, and `enter` to bind nested array data from a hardcoded dataset to rows and columns. Each square is a `rect` with fixed dimensions, and text labels are positioned within cells, demonstrating a basic data binding and layout pattern.

Ffloresh

69% match

Loading thumbnail…

Diverging Stacked Bar Chart with D3.js

This visualization displays survey responses as a diverging stacked bar chart, with each row representing a question and colored segments showing the percentage of respondents who strongly disagree, disagree, are neutral, agree, or strongly agree. The chart uses D3.js v3 to load CSV data, compute percentage distributions, and render SVG rects and text labels via ordinal and linear scales. Alternating row backgrounds and a centered zero line aid readability, while a legend identifies the five response categories.

Jjhcliu19

69% match

Loading thumbnail…

Graph Design question

Three small multiples display survey ratings and population counts as dot plots, allowing comparison of two related variables side by side. The first two panels compare "Last" versus "This" ratings across ten responses, while the third plots population for ten countries. Each panel uses D3’s `scaleLinear` for the x-axis and `scalePoint` for the categorical y-axis, with circles sized at a fixed radius. The code loads data via `d3.csv`, formats tick labels with `format`, and renders axes with `axisBottom` and `axisLeft` in SVG. Data comes from `quest.csv` and `data.csv`, with populations multiplied by 1,000.

FFedor Sharygin

69% match

Loading thumbnail…

Example of using a csv file generated by responses to a Google Form.

A scatterplot visualizes survey responses from a Google Form, showing each respondent's height versus number of pets, with dot size encoding the number of coding languages and color indicating their preferred drink. The visualization uses d3.csv to load the remote Google Spreadsheet data, d3.scale.linear for axes, d3.svg.axis for tick marks, and d3.selectAll with .on("mouseover") to display HTML tooltips. A categorical color scale (d3.scale.category10) drives the legend, while SVG circles render with opacity and hover highlighting.

KKristinHenry

69% match