JHamron

@JHamron·6 public vizzes

CoinStats

CoinStats visualizes cryptocurrency market data from May 2013 to October 2017, plotting daily price, market capitalization, or 24-hour trading volume for Bitcoin, Ethereum, Bitcoin Cash, Litecoin, or Ripple. A multi-line chart built with D3.js displays the selected time series, while a jQuery UI slider filters the date range and dropdown menus switch between coins and metrics. The chart uses D3 scales and path generators for axes and lines, with a hover tooltip showing exact values on the focused data point.

Mar 22, 2021

Loading thumbnail…

Bar Graph - New York Homeless Population (2009-2012)

This example shows the unsheltered homeless population in New York across five boroughs, surface totals, subways, and total counts for each year from 2009 to 2012, using a grouped bar chart. The visualization uses d3.scaleBand for the area and year groupings, d3.scaleLinear for the population axis, and d3.scaleOrdinal with categorical colors to differentiate years. Bars are rendered as SVG rectangles, with axes drawn via d3.axisLeft and d3.axisBottom, and a legend is manually constructed using appended SVG elements. Data is loaded from a CSV file using d3.csv.

Mar 18, 2021

Loading thumbnail…

Line Graph - New York Homeless Population (2009-2012)

This line graph shows the homeless population in New York from 2009 to 2012 across multiple areas, with lines for boroughs and categories such as Surface Total and Subways. It displays the full dataset without aggregation, plotting population counts against years. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `line` to render SVG paths and circles, with a color legend indicating which lines correspond to boroughs versus transportation categories. The data is loaded from a CSV file.

Mar 18, 2021

Loading thumbnail…

Customizing Axes Base

This bar chart displays the populations of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects estimate. It showcases extensive D3 axis customization, including tick formatting, grid lines, and removal of default axis elements. The visualization uses `d3.csv` for data loading, `d3.scaleLinear` and `d3.scaleBand` for scaling, and `d3.axisLeft` and `d3.axisBottom` for axes. Styling is applied through CSS classes for ticks, labels, and the title.

Mar 18, 2021

Loading thumbnail…

Scatter Plot Base

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting horsepower against vehicle weight. The code uses D3 v5 with `scalePoint` and `scaleLinear` for axis mapping, and `axisLeft`/`axisBottom` for gridlines. Circles are rendered as SVG elements with red, semi-transparent fill. The chart includes margin-based layout, axis labels, and a title, with styling applied via external CSS.

Mar 17, 2021

Loading thumbnail…

Line Graph

This line graph displays the unsheltered homeless population in New York City from 2009 to 2012, broken down by borough and surface versus subway locations. The visualization is built with D3 v5, using `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.line` with `d3.curveBasis` to render the smooth paths. Data originates from a CSV file, and SVG is used for all rendering, with tooltips omitted.

Mar 17, 2021