Group Project Bioinformatics

100%

Group Project Bioinformatics

✓ Published0🌍 Public

Last edited Apr 5, 2018

Created on Apr 5, 2018

This interactive parallel coordinates chart visualizes UFO sighting data from a CSV file. The visualization employs gray background lines for context and blue foreground lines for focus, with draggable axes that users can rearrange by sorting dimensions. Brush controls on each axis filter the displayed UFO records, dynamically hiding non-matching foreground lines. The code uses d3.svg.line() for path generation, d3.behavior.drag() for axis manipulation, and d3.svg.brush() for interactive filtering, all rendered as SVG elements with smooth transitions during drag operations.

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 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

85% 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

82% 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

80% match

Loading thumbnail…

UFO Sightings

This visualization maps 250 common words extracted from UFO sighting reports into a force-directed network. Each word is a node, with its size reflecting frequency of use, and words that frequently co-occur in the same report are linked, revealing linguistic clusters of shapes (disk, cigar, sphere), movements (hover, travel, flash), and colors (blue, yellow, bright). Built with D3 v4, the layout uses SVG for the node-link diagram and WebGL for rendering, with the word "bright" dominating as the most frequent descriptor.

JJoshFeldman777

72% 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

70% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates visualization displays multivariate data from a cars dataset recorded in CSV format, with each row represented as a path crossing multiple vertical axes. Users can drag axes to reorder dimensions and brush along them to filter highlighted foreground lines, while gray background lines provide context. Built with D3 v3, the example uses SVG rendering, ordinal and linear scales, `d3.svg.axis`, `d3.svg.line`, `d3.behavior.drag`, and `d3.svg.brush`. Axes reorder smoothly with transitions, and brushing toggles focus based on selected extents.

BBBischof

69% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates chart uses color-coded polylines to display country-level survey data across multiple dimensions, including happiness, art/education, environmental concern, and organizational memberships. Built with D3.js v3, the visualization renders SVG paths for both background context (gray) and foreground focus (steel blue) lines. The code implements interactive brushing via `d3.svg.brush()` to filter data, and uses `d3.behavior.drag()` to allow users to reorder axes by dragging. Axis labels are mapped through `d3.scale.ordinal()` and `d3.scale.linear()`, with data loaded from the `total4.csv` file.

KKanwalNayan

69% match

Loading thumbnail…

Untitled

This interactive parallel coordinates chart visualizes a dataset of cars and their specifications, such as fuel economy, horsepower, and weight. Each car is represented by a line connecting its attribute values across multiple vertical axes. Users can drag axes to reorder them and use brush controls on each axis to filter which vehicles remain highlighted, with the background context paths hidden while dragging. The visualization is built with D3.js v3, using SVG for rendering, `d3.svg.axis` for axes, and `d3.behavior.drag` and `d3.svg.brush` for interaction.

QqOp3

69% match