Skip to main content
SimilarExport ZIP
100%

Scatter plot of tobacco control data with menu

✓ Published0🌍 Public
MMing Liu
Last edited Oct 7, 2021
Created on Oct 5, 2021

This scatter plot shows tobacco control power indicators for Canada, the United States, and Mexico from 2007 to 2018, based on WHO MPOWER data. A menu lets users switch between five control measures, and the y-axis and points update with a smooth transition. The visualization uses d3.scaleLinear, d3.axisBottom, and d3.axisLeft for scales and axes, with d3.transition for animations. Points are colored by country and rendered as SVG circles with a legend.

AI-generated description

A scatter plot of tobacco control data with menu.

This scatter plot is to show that tobacoo control overview for three countries reported by MPOWER from 2007 to 2018.

Three countries: <span style="color:red">Canada</span>, <span style="color:blue">United States of America</span> and <span style="color:green">Mexico</span>.

Original data resource is WHO Global Health Observatory data repository, and I have uploaded it to a gist link on Github.

X axis is year, from 2007 to 2018.

Y axis is power indicator of tobacco control that you choose. A higher number means a more powerful control on tobacco.

You can choose what type of tobacco control you want to check through the menu bar on the top of the plot.

*This is a part of week 6 assignmnet: Add Interaction

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot of tobacco control data

This scatter plot displays tobacco control scores for Canada, the United States, and Mexico from 2007 to 2018, based on WHO Global Health Observatory data. The y-axis represents the strength of warning labels about tobacco dangers, ranging from 1 (not reported) to 5 (comprehensive pictorial warnings). The visualization highlights an upward trend, with all three countries improving their warning policies over time. The code uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom for the chart's ticks. Circles are rendered in SVG with a radius of 10 pixels, colored by country (red, blue, green) and drawn with 50% opacity.

MMing Liu
88% match
Loading thumbnail…

Scatter Plot of CDC Data with Menus

This data visualization displays a scatter plot of U.S. CDC health data, allowing users to explore relationships between variables like age, weight, and exercise. The chart uses two dropdown menus to select which quantitative or categorical columns map to the x- and y-axes, with points updating via d3's transition API. The implementation leverages d3's scaleLinear and scalePoint for axis scaling, and the selection.join method for incremental rendering of circles and axes. The plot renders as SVG with a 1-second animated transition, using the CDC General Health dataset fetched via CSV.

RRidhima Saxena
70% match
Loading thumbnail…

Upload tobacco control data

This example displays a textual summary of a tobacco control dataset, reporting its file size, row count, and column count after loading. The visualization uses D3 v5 to fetch the CSV from a GitHub gist via `d3.csv`, then calculates the file’s size with `d3.csvFormat` and displays the statistics inside a styled `<pre>` element. The data originates from the WHO Global Health Observatory repository and covers MPOWER tobacco control indicators for all countries from 2007 to 2018.

MMing Liu
70% match
Loading thumbnail…

A6 Diverging Bar Chart D3

This diverging bar chart visualizes the percentage-point change in smoking rates between 2011 and 2012 across five countries, with positive differences extending rightward in blue and negative differences leftward in red from a central zero axis. The chart uses D3.js v7 to load the CSV dataset, compute the absolute maximum difference for symmetric axis scaling, and render SVG rectangles with horizontal orientation. A d3-scale linear color scale maps negative to positive values through light grey, while the d3-legend plugin adds a horizontal color legend. Hovering highlights bars in orange, and the chart includes labeled axes for both percentage difference and country names.

EEric Yao
69% match
Loading thumbnail…

Imports with Menus

Two dropdown menus let the viewer select which countries to compare on the x- and y-axes of a scatter plot, while a color legend filters the points by export category. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for coloring, and d3.select to update the menus and plot dynamically. Data covers exports to China and the United States from 2000 to 2016, sourced from the World Trade Organization. Circles animate into position with transitions, and filtering fades non-selected points.

Vveagy
69% match
Loading thumbnail…

A7 Small Multiples of Line Chart

This visualization employs a small multiples layout to compare smoking prevalence trends across three countries—China, Pakistan, and India—from the "smoking.csv" dataset. Each panel contains a line chart with time on the x-axis and smoking rate on the y-axis, encoded with a distinct color. The SVG is rendered using D3.js, with each country's data isolated via grouping and plotted in its own cell. The use of small multiples allows for easy comparison of trends over time, while the legend and axes provide context. The design emphasizes clarity through consistent scales and minimal visual noise, enabling viewers to focus on the shape of each line. The example demonstrates the power of small multiples for comparative analysis, though it leaves room for interactive enhancements.

RRavneet Singh Bhatia
69% match
Loading thumbnail…

d3 scatterplot matrix

This scatterplot matrix visualizes North American population-health indicators, comparing fertility rate, life expectancy, and population growth across the United States, Canada, and Mexico. Each of the nine charts plots one variable against another, with data points colored by country using a d3.scaleOrdinal color scale and a legend rendered in SVG. The code loads data from a CSV file via d3.csv, filters incomplete records, and uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.extent to build axes and scale the plots.

AAndrew
69% match
Loading thumbnail…

A4 Scatterplot (D3)

This scatterplot visualizes the relationship between reported alcohol and tobacco use among individuals aged 26 and older, using data from the CORGIS dataset. Each red dot represents a state or region, plotting total monthly tobacco use on the x-axis against alcohol use on the y-axis, with values displayed in thousands. Hovering over a dot reveals a tooltip with the exact figures via SVG `<title>` elements. The visualization is built with D3 v7, using `d3.csv` for data loading, `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` for rendering ticks.

NNoah C.
69% match