Skip to main content
100%

Interactive Plot

✓ Published0🌍 Public
JJinyu Wang
Last edited Dec 14, 2021
Created on Dec 14, 2021
Forked from HTML Starter

This interactive plot visualizes survey data on youth smoking cessation, showing how long individuals have quit smoking across different years, with each dot’s color indicating age group. Users can switch the color encoding between age, sex, or grade via a dropdown menu. The visualization uses D3 v6 with SVG rendering, leveraging `d3.scaleOrdinal` for categorical color mapping, `d3.legendColor` for legends, and `d3.zoom` for interactive panning and zooming. Data is loaded as CSV from a remote repository, and transitions are applied when the selected grouping changes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive visualization maps the U.S. daily cigarette smoking rate from 1996 to 2012 across counties, showing changes over time through a choropleth map with a slider. A tooltip displays each county’s 1996 and 2012 rates along with the change. The visualization uses D3 v4’s `d3.geo` module with the Albers USA projection, `d3.nest` for data organization, and `d3.scale.threshold` for color coding, rendering SVG paths for counties and states. Data comes from the Institute for Health Metrics and Evaluation.

Ddexuzi
73% match
Loading thumbnail…

Fork of Activity8_Task3_DV_LB_Q3

This scatter plot visualizes the Smoking dataset, showing the relationship between gross income and the age at which individuals began smoking, with each point colored pink for females and sky blue for males. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load and scale the data, then renders SVG circles positioned by income and age. The data is fetched from a remote GitHub CSV file, and the plot fills the browser window with labeled axes for Gross_Income and Smoking_At_Age.

Llikithabaddam@my.unt.edu
73% match
Loading thumbnail…

Exploring survey data interactively - d3V6

An interactive bar chart displays survey data grouped by study preferences, letting users select from a dropdown menu to change the y-axis variable. The visualization updates scales, axes, and bar heights dynamically as users explore metrics like average height, stress, or sibling counts. Using d3.rollup to aggregate data and the general update pattern with enter and exit selections, the chart re-renders smoothly. The SVG-based visualization loads JSON survey data and generates dropdown options automatically from dataset fields.

LLaurens
73% match
Loading thumbnail…

Pie chart

This visualization presents the distribution of survey respondents across different age groups using a pie chart. The chart is rendered as an SVG using React and D3 v5, with each section colored distinctly and labeled with a data value. Data is loaded asynchronously from a CSV file using `d3.csv`. The code constructs the pie using `d3.pie`, generates arcs with `d3.arc`, and applies colors via `d3.scaleOrdinal`. A legend, created with SVG `<rect>` and `<text>` elements, maps each color to its age group and member count.

VVineela Reddy
73% match
Loading thumbnail…

Exploring survey data interactively - y-axis

This interactive bar chart lets users explore survey data by selecting a variable from a dropdown menu, which updates the y-axis and bar heights to show different averages and totals across student interest groups. Built with D3 v5 and SVG, it uses the general update pattern to re-render scales, axes, and rectangles when the selection changes. The dropdown options are generated dynamically from the data using a data join, and all values are computed from the survey responses via the `prepareData` module.

SSergio Eijben
73% match
Loading thumbnail…

Prototype 4

This interactive scatter plot displays insurance charges against age, with a color selector allowing viewers to group data by smoker status, sex, region, BMI category, or number of children. Built with React and D3.js v7, the visualization uses a d3.scaleOrdinal with schemeCategory10 for coloring, and draws best-fit regression lines per group. A legend and radio-button controls filter the categorical coloring.

Jjojongo15342@gmail.com
72% match
Loading thumbnail…

Activity6_Task3.1

This scatter plot visualizes survey data from university students, showing the relationship between each respondent's age and their course of study, with points colored by their year of study (Year 1 through Year 4). The visualization uses D3.js v7 to load a CSV file from a GitHub gist and render an SVG chart with a linear x-axis for age and a point scale y-axis for course names. The code applies d3.scaleLinear, d3.scalePoint, and d3.scaleOrdinal to position and color the circles, while interactive tooltips appear on mouseover to display the exact age, course, and year for each data point.

Nnissisharon61@gmail.com
72% match
Loading thumbnail…

A6 Barchart D3

This example visualizes the percentage of smokers in the United States from 1980 to 2012 using a vertical bar chart. Each bar’s height and color encode the recorded percentage value, with a sequential blue color scale mapped via `d3.scaleSequential` and `d3.interpolateBlues`. The chart includes axes, labels, a title, and a legend generated with the `d3-legend` library’s `d3.legendColor`. Data is loaded from a CSV file and rendered as SVG using D3 v7, with tooltips provided by appended `<title>` elements.

EEric Yao
72% match