Let's get tool tipsy up in here

100%

Let's get tool tipsy up in here

✓ Published2🌍 Public

Last edited Jan 30, 2024

Created on Dec 14, 2023

This interactive D3 visualization compares state-level median income, alcohol consumption, and murder rates. Users select different quantitative variables for the x- and y-axes via HTML dropdown menus, toggling between a categorical bar chart and a quantitative scatterplot. The SVG rendering uses `scaleBand` and `scaleLinear` for the axes and animated transitions via `transition` for morphing between chart types. Hovering over a bar or text label triggers a CSS-styled tooltip that fetches an external SVG state flag and displays a data table, using `pointer` for mouse position tracking.

AI-generated description

My first go at a dual purpose data viz. Big thanks to Curran and everyone else for showing me how to do stuff.

MIT Licensed

Similar vizzes

Loading thumbnail…

Intersections

This visualization displays the relationship between U.S. state statistics—including median income, alcohol consumption, and murder rate—using a dynamic scatter plot. The plot transitions between categorical bar charts for states and quantitative scatter plots, with animated circles for numeric comparisons. D3's scaleLinear, scaleBand, axisBottom, and axisLeft APIs handle the chart construction, while the `menu` component and `dispatch` enable interactive axis selection. The code uses `transition` for smooth animations and `selection.join` for efficient SVG element updates. The data comes from a CSV file combining income, alcohol, and murder statistics per state.

Aadventuresenglish.info@gmail.com

83% match

Loading thumbnail…

Intersections 3

This interactive visualization, "Intersections 3," presents the relationships between median income, alcohol consumption, and murder rates across U.S. states. Users can dynamically reassign these quantitative variables to either axis via dropdown menus, which triggers animated transitions that morph the display between scatter plots and categorical bar graphs. Built with D3 v6, the example demonstrates reusable chart components and the `selection.join` API for updating SVG elements. The dataset is loaded from a CSV file, and state names are resolved using a hardcoded lookup table.

Aadventuresenglish.info@gmail.com

83% match

Loading thumbnail…

Intersections Two

This example presents an interactive scatter plot of U.S. state statistics, including median income, alcohol consumption, and murder rate, using the D3.js library. Users can select which quantitative variable to map to the X and Y axes via dropdown menus, with the chart animating transitions between configurations. The visualization dynamically switches between circular marks for quantitative axes and rectangular bars for categorical axes, such as plotting states alphabetically. Data is loaded from a CSV file, and the code leverages D3's selection joins, scales, and axes for rendering.

Aadventuresenglish.info@gmail.com

82% match

Loading thumbnail…

Fork of Intersections 3

This interactive visualization explores relationships between socioeconomic indicators—median income, alcohol consumption, and murder rate—across U.S. states using the Iris Dataset-inspired scatter plot. Users switch axes via dropdown menus, toggling between categorical state labels and quantitative measures. The chart animates transitions between scatter plots and bar charts using D3’s selection.join, transitions, and scaleBand/scaleLinear scales. SVG circles and rectangles encode data points, with tooltips providing detailed state information. The code leverages D3 v6, CSV data loading, and custom reusable chart and menu components.

Aadventuresenglish.info@gmail.com

80% match

Loading thumbnail…

Fork of Interactive Color Legend Bar chart with tooltip for Alcohol Vs Life Expectancy

This interactive bar chart visualizes the relationship between alcohol consumption and life expectancy across continents, colored by year using an interactive color legend. Hovering a legend entry highlights the corresponding year’s data while dimming others; a tooltip summarizes the correlation for that year. Built with D3 v3, it uses `d3.nest`, `d3.layout.stack`, `d3.scale.ordinal`, `d3.legend.color`, and `d3-tip` for tooltips. Data comes from a CSV file, rendered as SVG with animated transitions.

Aall-over-yet

75% match

Loading thumbnail…

Fork of Interactive Color Legend Bar chart with tooltip for Alcohol Vs Life Expectancy

This chart plots alcohol consumption against life expectancy across continents, using an interactive color legend to filter data by year. Bars represent aggregated alcohol consumption on the x-axis and life expectancy on the y-axis, with a tooltip summarizing the correlation for each year. Built with D3.js v3, it uses `d3.layout.stack` for bar layout, `d3.legend.color` for the interactive legend, and `d3-tip` for tooltips. The SVG visualization animates on hover, highlighting layers while dimming the base bars, and includes custom axis formatting and tick filtering.

HHowardHan99

74% match

Loading thumbnail…

A5 Bubble Plot (D3)

This bubble plot visualizes alcohol and tobacco usage across U.S. states, with circle size encoding population and color intensity representing alcohol use rates per 1000 people. Built with D3 v7, it uses `d3.scaleLinear` for position, radius, and color mapping, plus SVG circles with `title` elements for hover tooltips. The chart loads CSV data from a GitHub gist and displays axes with custom tick formatting, along with descriptive legends and labels.

NNoah C.

74% match

Loading thumbnail…

D3.js Step by Step: Step 5 - Adding Tooltips

This donut chart visualizes aggravated assault counts by state using the FBI’s estimated_crimes.csv dataset, with each slice colored by year via `d3.scale.category20b()`. Hovering over a slice triggers a tooltip that displays the state name, assault count, and a calculated percentage, using `d3.svg.arc`, `d3.layout.pie`, and mouseover events. The SVG chart includes a legend and fixed dimensions, with tooltips styled as absolutely positioned HTML divs.

Jjithendra9582

74% match