eherchen

@eherchen·8 public vizzes

DC Crime Stack Chart

This interactive stacked bar chart visualizes 2017 crime counts by offense type across Washington, D.C. police service areas (PSAs). Built with D3.js (v3), the visualization uses a stacked layout to aggregate five offense categories—such as burglary and motor vehicle theft—along a horizontal axis, with PSA segments stacked vertically. Users can hover over bars to see tooltips with exact counts via d3-tip, or hover over the color legend to highlight specific crime types while dimming others. The chart also includes a dropdown to switch between yearly datasets.

Jul 13, 2019

Loading thumbnail…

Test

This stacked bar chart displays the estimated 2010 religious composition of the 20 most populous countries, with each bar segmented by religion. Hovering over bars reveals tooltips with exact population figures, while hovering over the color legend highlights a specific religion and dims the others. The visualization is built with D3.js, using `d3.layout.stack()` for stacking, `d3.legend.color()` for the interactive legend, and `d3-tip` for tooltips. Data comes from the Pew Research Global Religious Landscape dataset, rendered as an animated SVG.

Jul 13, 2019

Loading thumbnail…

Test Rev1

This interactive stacked bar chart visualizes the estimated 2010 religious breakdown of the 20 most populous countries, with each bar segment representing a religion's share per country. The visualization uses D3.js to render an SVG, employing `d3.layout.stack` and `d3.scale.ordinal` for the stacked bar structure. Users can hover over individual bars for tooltips and over the color legend to highlight specific religions, which triggers a fade effect via a semi-transparent overlay layer. Data originates from the Pew Research Center's Global Religious Landscape study, processed through a custom script.

Jul 13, 2019

Loading thumbnail…

Team GELCAPS Project2 landing page

This page shows a simple abstract logo composed of red geometric shapes on a white background, rendered as static SVG. The design includes a central star-like polygon, a horizontal bar, and a smaller triangular shape. The implementation uses inline SVG paths within an HTML wrapper styled with Bootstrap, but it does not use JavaScript libraries like D3 for dynamic behavior. The SVG markup defines specific coordinates and fill colors for each shape, and the page includes a navigation bar with links to other projects.

Jul 8, 2019

Loading thumbnail…

Healthcare vs. Poverty

This interactive scatter plot compares the percentage of people living in poverty and lacking healthcare across U.S. states. Users can toggle the x-axis between poverty rate and median household income, with circles and state abbreviations transitioning smoothly in response. Tooltips display exact values on hover. Built with D3.js, the visualization uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.tip` for interactions, driven by CSV data from the U.S. Census Bureau.

Jul 8, 2019

Loading thumbnail…

Healthcare Scatter Plot

This scatter plot visualizes the relationship between poverty rates and the percentage of people lacking healthcare across U.S. states. Each circle represents a state, positioned by its poverty percentage on the x-axis and its healthcare deficit on the y-axis, sourced from UCI Machine Learning Repository data. The visualization is rendered using D3.v5's `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct the chart, with SVG circles and custom text labels for axes and title.

Jul 8, 2019

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between car attributes. Two dropdown menus let users select which columns map to the X and Y axes, with axes, labels, and points updating accordingly. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `select` APIs, along with a reusable `dropdownMenu` component. Points animate via `transition().duration(2000)` with staggered delays, rendered as semi-transparent red SVG circles with grid lines.

Jul 6, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Red, semi-transparent circles mark each car’s values, with axis labels and a title clarifying the variables. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` functions to map data and render axes, while `csv` loads the dataset and SVG circles represent the points.

Jul 6, 2019