Skip to main content
SimilarExport ZIP
100%

Scatterplot Pivot

✓ Published0🌍 Public
AAndresAnayaIsaza
Last edited Feb 4, 2017
Created on Feb 4, 2017

A scatterplot explores the relationship between union status and workplace fatalities across U.S. states, with each point representing a state on a log-scaled axis. A button toggles the y-axis between raw fatality counts and percent deviation from expected values, animating points and guide lines between the two views. Built with D3.js and jQuery, the visualization uses SVG transitions, a sqrt scale, and tooltips to display state details on hover.

AI-generated description

A scatter plot that pivots one axis from raw to percent.

forked from <a href='http://bl.ocks.org/hobbes7878/'>hobbes7878</a>'s block: <a href='http://bl.ocks.org/hobbes7878/4d58a830176023229d7f'>Scatter plot pivot</a>

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

Fork of Simple Scatter Plot

This scatter plot visualizes the unemployment rate across different US states for a given year, using data from the "Unemployment in America Per US State" dataset. Each circle represents a state, with its position on the y-axis scaled to the unemployment rate. The plot uses D3's `scaleBand` for the categorical x-axis (states) and `scaleLinear` for the y-axis, with axes from `axisBottom` and `axisLeft`. Circles are rendered with configurable radius and opacity, and clicking a circle triggers an alert showing the state and its rate. The visualization is built using D3's join methodology for declarative SVG updates.

Oomniaabouhassan@gmail.com
72% match
Loading thumbnail…

scatter plot

This scatter plot displays the relationship between accident dates and the number of casualties, with time on the x-axis and casualty counts on the y-axis. The visualization uses D3.js v7 to render an SVG chart, employing `d3.scaleTime()` and `d3.scaleLinear()` for axis scaling, `d3.line()` to generate the path connecting data points, and `d3.axisBottom()` and `d3.axisLeft()` for labeled axes. Sample accident data is embedded directly in the script, with dates parsed using `d3.timeParse()` for proper time-based positioning.

JJames Cruz
71% match
Loading thumbnail…

Fork of Data visualizations

This scatterplot visualizes the correlation between poverty and obesity rates across U.S. states. Each state is represented by a circle labeled with its abbreviation, plotted along axes for poverty and obesity percentages. The chart uses D3.js to load CSV data, create scales, and render the SVG elements. A tooltip, built with the d3-tip library, appears on click, showing the state name, poverty, and obesity values. The accompanying text highlights observed clusters and trends in the data.

JJoshua chirchir
71% match
Loading thumbnail…

Scatter Plot with X Y Menus

This interactive scatter plot displays U.S. mortality statistics, letting users choose which demographic attributes or death types to plot on the x- and y-axes via ReactDropdown menus. The code uses the d3.csv loader, d3.scaleLinear, and d3.extent to parse and scale data from a Gist, then renders SVG circles and axes using React components such as AxisBottom, AxisLeft, and Marks. Only points matching a hard-coded "Total" age group are visible, with all other circles rendered at zero radius.

PPeter Maida
71% match
Loading thumbnail…

Scatter Plot

A scatter plot displays the population of U.S. states from 2018 data, with each state represented as a circle positioned along a linear population axis and a categorical state axis. The visualization is rendered as an SVG using D3 v5, where the circle coordinates are computed via the `scaleLinear` and `scalePoint` scales, and axes are drawn with `axisBottom` and `axisLeft`. The chart includes a title and axis label, with population values formatted using D3's `format` function to abbreviate large numbers.

PPerry
71% match
Loading thumbnail…

Scatter Plot with Interactive Color Legend

This scatter plot visualizes death statistics by year, with each point representing a demographic group’s death count. The color legend encodes sex, and hovering over a legend item fades non-matching points while highlighting the selected category. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG rendering. Data comes from a Gist CSV file, though sex, ethnicity, and age dropdowns remain non-functional.

PPeter Maida
70% match
Loading thumbnail…

Fork of Pie Chart

This example visualizes mortality rates across U.S. states as an annotated pie chart, with each slice labeled and accompanied by a legend showing state names and death counts. The visualization uses D3 v5 (d3.pie, d3.arc, d3.scaleOrdinal) to generate SVG paths and text elements, pulling data from a remote CSV file. It applies a custom color scale to distinguish slices and renders the chart centered on an SVG canvas with a static legend to the right.

RRahulSai05
70% match