Skip to main content
SimilarExport ZIP
100%

Q1 graphs

✓ Published0🌍 Public
CCurran Kelleher
Last edited Jan 16, 2020
Created on Jan 16, 2020
Forked from Q1 graphs

This interactive bar chart visualizes survey responses from incarcerated individuals, showing the percentage of "yes" answers for questions across five categories: Services, Procedure, Economics, Health and Well Being, and Interpersonal. Users select a category from a dropdown menu to filter and display the corresponding questions. Built with D3 v5, the visualization uses `scaleLinear` and `scaleBand` for positioning, along with `axisLeft` and `axisBottom` for axes. It loads data from a CSV file and renders in an SVG, dynamically updating the bars and axes in response to menu selections.

AI-generated description

Helping out with getting the original example working.

The problem was a typo in the name of the CSV file.

Also, it seems that if you prefix the path of loading a CSV file with ./, it doesn't work, but leaving that out it does. This may be a bug in MagicSandbox.

MIT Licensed

Similar vizzes

Loading thumbnail…

Q1 graphs

This interactive bar chart visualizes survey responses from incarcerated individuals, broken down by category (Services, Procedure, Economics, Health and Well Being). A dropdown menu lets users switch between these categories, updating the displayed questions and their corresponding "Yes" percentages. The chart uses a horizontal bar layout where each bar represents a survey question, with length proportional to the affirmative response rate. Built with D3 v5, it leverages `csv` for data loading, `scaleBand` and `scaleLinear` for positioning, and `axisLeft`/`axisBottom` for axes, rendering as SVG.

EEvan Misshula
98% match
Loading thumbnail…

Q1 graphs

This interactive visualization displays survey results from incarcerated individuals, showing the percentage of "yes" responses for various questions across five service and procedure categories. Users select a category from a dropdown menu to filter the horizontal bar chart, which orders questions by their yes-percentage values. The visualization uses D3 v5 with SVG rendering, leveraging `scaleLinear` and `scaleBand` for the bar dimensions, `axisLeft` and `axisBottom` for the axes, and a custom dropdown menu component. Data comes from the aggregated CSV file containing survey counts and percentages.

EEvan Misshula
97% 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…

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
70% match
Loading thumbnail…

Interactive Bar Chat

This interactive bar chart displays survey percentages for ten programming languages, each bar labeled with its corresponding value. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map categorical data to the SVG coordinate system, with `axisBottom` and `axisLeft` providing labeled axes. Data is parsed from an embedded JSON structure, and grid lines are generated using `axisLeft` with custom tick sizing. The chart is rendered as an SVG within a fixed-width container, with colors and styling applied through CSS classes.

Hhireign
70% match
Loading thumbnail…

Interactive Bar Chat

This interactive bar chart displays survey percentages for ten programming languages, each bar labeled with its corresponding value. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map categorical data to the SVG coordinate system, with `axisBottom` and `axisLeft` providing labeled axes. Data is parsed from an embedded JSON structure, and grid lines are generated using `axisLeft` with custom tick sizing. The chart is rendered as an SVG within a fixed-width container, with colors and styling applied through CSS classes.

Hhireign
70% match
Loading thumbnail…

Bar Chart - Social Media MQP

This example shows responses to a Likert-scale survey question as a bar chart, with counts for each agreement option (e.g., “Strongly Disagree” to “Strongly Agree”) for a selected social media platform. A dropdown menu lets the viewer switch between questions, and the chart updates its scale and bar heights accordingly. The visualization uses D3 v7 modules including `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to render the bars and axes from CSV data fetched via `csvParse`, with a fixed color scheme imported from `schemePuOr`.

KK Munz
69% match
Loading thumbnail…

Exploring survey data interactively - y-axis

An interactive bar chart explores survey data by visualizing aggregated values for different student interest groups. A dropdown menu lets users select which variable to display on the y-axis, including averages for height, stress, and expenses. Built with D3 v5, the chart updates scales, axes, and bar positions dynamically when the selection changes, while the data preparation module handles filtering and aggregation. The chart uses SVG rendering and data joins to generate the form options and bars.

RRoyCsuka
69% match