Group Project Bioinformaticsnew

100%

Group Project Bioinformaticsnew

✓ Published0🌍 Public

Last edited Apr 17, 2018

Created on Apr 12, 2018

This example visualizes the geographic distribution of White House petition signatures as a choropleth heat map of the United States. Built with D3 v3 and rendered as SVG with animation, the map lets users click any state to view its signature count. Color intensity encodes the number of signatures, using a logarithmic scale to handle values that range from a few dozen to over 4,500; the scale is implemented with a linear interpolator as a stand-in, as noted by the author. The data is loaded from UFO_color.csv and joined to state shapes, with the visualization drawing on Mike Bostock's map demo and forked from thedod's clickable US heat-map. The project demonstrates a quick-and-dirty approach to choropleth mapping in d3, with interactivity and animation for a compelling presentation of petition signature distributions across the United States.

AI-generated description

https://gist.github.com/4544529 (demo) was my first d3 adventure, where I scraped signatures from a White House petition and showed them as a pie chart.

Here, I show them as a US heat map (based on one of Mike Bostock's map demos). You can click on a state, and see how many signatures came from it.

Darker color means more signatures, but since the numbers range from a few dozens to >4500, the scale is logarithmic. I don't know yet how to use log() interpolators (I promise to learn), so I just did it quick and dirty with linear() and masking tape.

forked from <a href='http://bl.ocks.org/thedod/'>thedod</a>'s block: <a href='http://bl.ocks.org/thedod/4548858'>Clickable US heat-map of petition signature count</a>

forked from <a href='http://bl.ocks.org/Craftbd/'>Craftbd</a>'s block: <a href='http://bl.ocks.org/Craftbd/7af9830ee360cf7103e0f71571d8cfb8'>Group Project Bioinformatics</a>

forked from <a href='http://bl.ocks.org/rubin2ma/'>rubin2ma</a>'s block: <a href='http://bl.ocks.org/rubin2ma/eca7ad72e037a2b879582c3c509350e8'>Group Project Bioinformatics</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Group Project Bioinformatics

This interactive D3.js map visualizes the geographic distribution of White House petition signatures across US states. Users click a state to zoom in and display its exact signature count next to the state abbreviation. A linear color scale applies a logarithmic transformation to the signature data, mapping darker green shades to higher counts. The visualization uses D3’s `d3.geo.albersUsa` projection, `d3.geo.path` for rendering SVG state boundaries, and animated transitions to scale and translate the map on click.

CCraftbd

92% match

Loading thumbnail…

Group Project Bioinformaticsnew1

This visualization combines a choropleth map of the United States with a parallel coordinates plot. The map colors each state according to a logarithmic scale of petition signature counts, with darker shades indicating higher numbers, and clicking a state updates the display. The parallel coordinates chart plots car dataset attributes, using D3’s drag behavior, brushes, and SVG paths for interactive exploration. Both views use D3 v3, with the map relying on `d3.geoPath` and state boundary data from a GeoJSON file.

CCraftbd

87% match

Loading thumbnail…

Group Project Bioinformatics FINAL!!

This visualization presents a choropleth map of the United States where darker colors indicate higher UFO sighting counts per state, using a logarithmic color scale. Users can click on any state to view its specific signature count. The map is rendered with D3 v3, utilizing `d3.geoPath` and `d3.csv` to load the state geometries and data, with an animated transition on selection. The project also includes parallel coordinates charts for exploring multi-dimensional data like income and mental health metrics.

CCraftbd

81% match

Loading thumbnail…

Group Project Bioinformatics1

This visualization combines a choropleth map of UFO sightings with select demographic data. The map, rendered using D3's geo projection and path generators, colors states based on the logarithmic count of reported sightings from the loaded dataset. Clicking a state triggers a zoom-in animation and displays the state's name and sighting count. The page also includes scaffolding for a parallel coordinates plot using D3 scales and axes, though it remains non-functional.

CCraftbd

78% match

Loading thumbnail…

Group Project Bioinformatics Final Copy!1

An interactive United States choropleth map and parallel coordinates plot explore state-level relationships between UFO sightings, median income, poverty, mental health, and substance use indicators from 2013–2014. Users can click a state to highlight its multi-dimensional data path, with map color intensity logarithmically scaled to sighting counts. The visualization is built with D3 v3, using `d3.geoPath` for the map, `d3.csv` for data loading, and SVG rendering with drag-and-drop axes for exploring the parallel coordinates.

CCraftbd

77% match

Loading thumbnail…

Project 1 Bioinfomatics

This block displays a choropleth map of the United States, visualizing Zika virus case counts by state. The data is loaded from a CSV file and joined with geographic state paths. A logarithmic color scale, using d3.scaleLog and d3.scaleSequential with the "Oranges" interpolator, maps case counts to fill colors, enabling differentiation across a wide range of values. States are rendered as SVG paths and include an interactive tooltip that appears on hover, displaying the state name and its total number of cases. The map is drawn using D3 v4 with SVG and animated transitions.

CCraftbd

76% match

Loading thumbnail…

US State Map

This example shows a choropleth-style interactive map of the United States built with D3 v3. Each state is drawn as an SVG path from the included `uStates.js` GeoJSON-like data, and its fill color is determined by randomized sample data generated on the fly. Hovering over a state triggers a custom tooltip that displays low, average, and high values for that state, with hover effects changing fill opacity. The map is rendered in an SVG container with a fixed size, and the tooltip follows the cursor using absolute positioning. The dataset is based on West Nile virus case reports, though the visualization itself uses synthetic data for demonstration. The project is forked from a series of related blocks and is released under the GPL-3.0 license.# US State Map This interactive choropleth visualization presents a color-coded map of the United States, with each state shaded to represent data values and displaying detailed information on hover. ## Visualization Description The visualization displays a complete map of the contiguous United States, Alaska, and Hawaii, with each state colored using a yellow-to-dark-red sequential color scale (interpolated from "#ffffcc" to "#800026") based on sample data values. States appear as outlined gray polygons that respond to user interaction. **Interaction:** When users hover over a state, it becomes semi-transparent and a dark tooltip appears, showing the state's abbreviation and a small table with three statistics: Low, Average, and High values. **Data:** The map visualizes sample data for each US state, with low, average, and high values used to encode the color intensity. While the current implementation uses randomly generated data, the accompanying WestNile.csv dataset suggests the visualization could display West Nile virus statistics—including neuroinvasive and non-neuroinvasive disease cases, total cases, deaths, and presumptive viremic blood donors per state. **Design:** The visualization encodes data through a sequential color scale interpolated from light yellow ("#ffffcc") to dark red ("#800026"), where the color intensity represents the average value. The geographic layout uses the standard US state map with state boundaries drawn in grey. Hovering over a state triggers a tooltip that displays the state name along with low, average, and high values for the selected metric. Animated transitions provide visual feedback during state selection. The implementation is built with D3 v3, reading state path data from a JavaScript file, and the tooltip is implemented as an HTML overlay that appears on mouseover. Files: index.html, uStates.js, WestNile.csv </body> </html> (this text was cut off, and additional files may be needed to fully reproduce the visualization) Please describe the full URL (path) to the data file(s) used in this example. The final answer should just be a data path, with no additional prose.WestNile.csv

HHeywhoyou22

73% match

Loading thumbnail…

US State Map finished

This example visualizes the geographic distribution of West Nile virus cases across US states using a choropleth map. The map is rendered in SVG with D3 v4, with each state’s fill color encoded on a logarithmic scale using d3.scaleLog and a sequential interpolated color scheme based on the number of reported cases. Hovering over a state triggers a tooltip displaying the state name and total case count. The map also includes an animation component, as state boundaries and fills are drawn dynamically. Data is loaded from a CSV file and joined to GeoJSON state paths via a custom uStates.js module.

CCraftbd

72% match