Skip to main content
SimilarExport ZIP
100%

A Bar Chart

✓ Published0🌍 Public
BBrandonStroud
Last edited Mar 22, 2016
Created on Mar 22, 2016

This bar chart displays the number of Zika virus cases for each state, using green bars with black text labels. The visualization initially sorts states alphabetically, then after a five-second delay, the bars transition to a descending order by case count. Each bar includes a tooltip showing the character length of the state name on hover. The chart is built with D3 v3, using SVG rendering, linear and ordinal scales, and axis components. Data comes from the `states-zika.csv` file, with margins adjusted to fit the full chart.

AI-generated description

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1389927'>A Bar Chart</a>

Make the following changes to this bar chart:

  1. Use the "states-zika.csv" file instead of "sample-data.csv".
  2. adjust margins as needed so that the entire bar chart is displayed properly.
  3. Make the bars green.
  4. Make all text black.
  5. Sort the bars alphabetically by state name in ascending order.
  6. After a 5 second delay, transition to sorting the bars in descending order according to their values.
  7. Create a tooltip for each bar that displays the number of characters in the name of the state over which you are hovering. For example, if I hover over Ohio, the tooltip will say "4". If I hover over Virginia, the tooltip will say "8".

forked from <a href='http://bl.ocks.org/scresawn/'>scresawn</a>'s block: <a href='http://bl.ocks.org/scresawn/9327a6642682b87430ec'>A Bar Chart</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

A Bar Chart

This bar chart displays the number of Zika virus cases for each U.S. state, with bars sorted alphabetically by state name and colored green. After a 5-second delay, the bars transition to sort in descending order by case count. The visualization uses d3.v3 with SVG rendering, a linear x-axis scale, and an ordinal y-axis scale. Hovering over a bar triggers a tooltip showing the character count of the state’s name, while the data comes from the "states-zika.csv" file. All text is black, and margins are adjusted to fit the chart fully.

BBrandonStroud
98% match
Loading thumbnail…

A Bar Chart

This bar chart displays Zika virus case counts for U.S. states, sorted alphabetically by state name, then transitions to a descending order by case count after a 5-second delay. The bars are rendered in green with black text and axes, using D3.js v3 to generate SVG elements and apply animations via `transition()`. Hovering over a bar triggers a tooltip showing the character length of the state’s name, while the x-axis scales linearly and the y-axis uses an ordinal scale for state labels, with data loaded from the `states-zika.csv` file.

BBrandonStroud
96% match
Loading thumbnail…

US State Map

This visualization is a choropleth map of the United States, colored to show the number of Zika virus cases reported in each state during 2016. It uses a logarithmic color scale to differentiate the magnitude of cases, with darker shades of orange representing higher counts. The map is rendered using D3 v4's SVG paths for each state, and hovering over a state reveals a tooltip with the exact number of cases. The data is loaded from a CSV file using `d3.csv`.

LLaurynKW
84% match
Loading thumbnail…

US State Map

This choropleth map of the United States displays Zika virus case counts by state, with each state colored on a grayscale gradient from black to white based on its reported cases. Hovering over a state triggers a tooltip that lists the low, average, and high case numbers for that region. The map is built with D3 v3 and uses an SVG rendering approach, loading state paths from a pre-defined `uStates.js` object and binding the Zika data from an external CSV file. The tooltip HTML is generated dynamically through a custom `tooltipHtml` function, and the color scale uses `d3.interpolate` to map case counts to shades.

HHeywhoyou22
84% match
Loading thumbnail…

Zika Virus 2015

This choropleth map visualizes Zika virus cases across the United States in 2015, with states colored on a logarithmic scale from white to black based on total reported cases. Built with D3 v3 and an Albers USA projection, the map renders each state as an SVG path, with the color encoding derived from the "Total cases" column of the dataset. States with zero cases remain white, while those with higher case counts appear progressively darker—California leads with 13 cases, followed by Florida with 9 and Texas with 8, creating a visual hierarchy of geographic impact. The map includes interactive tooltips on hover, implemented using Malcolm Maclean's tooltip pattern, and a legend adapted from Mike Bostock's example, allowing viewers to quickly identify states with higher Zika virus activity. This simple choropleth, adapted from Scott Murray's approach and earlier West Nile Virus examples, uses a log color scale to differentiate case counts across the United States.

77man10
83% match
Loading thumbnail…

US State Map

This example visualizes the geographic distribution of Zika virus cases across US states, with a choropleth map that uses a sequential color scale to encode the total case count per state. The map is rendered as an SVG using the D3.js v4 library, and includes interactive hover states that display a tooltip with the exact case number for each state. Data is loaded from a CSV file and processed with D3's `d3.csv` function, while the U.S. state boundaries are drawn using a collection of SVG path elements provided by the `uStates.js` library. The coloring applies a logarithmic scale to handle the wide range of case values, from states with just a few cases to those with over a thousand.

LLaurynKW
83% match
Loading thumbnail…

US State Map

This visualization displays a choropleth map of the United States showing reported Zika virus cases by state in 2016. Each state is colored on a gradient from black to white based on its case count, with hover interactions that reveal exact figures through a tooltip. The map is rendered as SVG using D3 v3, with state paths and data loaded from CSV files via `d3.csv`. The tooltip displays case data alongside a simple table, and the `uStates.draw` function handles map rendering and interactions.

CCraftbd
83% match
Loading thumbnail…

US State Map

The map displays Zika virus case counts per US state, colored according to a gradient that encodes the number of cases. Hovering over a state reveals a tooltip with the state name and its case total. The visualization uses D3 v3 to load CSV data and render an SVG map, with state paths defined in a separate JavaScript file and a custom tooltip HTML builder for interaction.

LLaurynKW
83% match