benpedroscott

@benpedroscott·11 public vizzes

Stylizing Bar Chart v1

A horizontal bar chart ranks the ten most populous countries using data from a CSV file, with populations converted to thousands. The SVG bars animate their width over two seconds via a D3 transition, while axes are styled with custom tick labels. The visualization uses D3 v5 methods like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and applies a tick formatter that abbreviates population values with suffixes.

Mar 7, 2022

Loading thumbnail…

Custom Bars v1

This D3 v5 visualization displays the points scored by the Mizzou football team for each season from 2010 to 2020, using a custom bar chart with animated bars that grow over 1.5 seconds. The chart, built within a React framework and rendered as SVG, uses `d3.scaleLinear` and `d3.scaleBand` to map points and season labels. The y-axis labels are styled with a Lato font, and the bars are filled with a golden color. The data is loaded from a remote CSV file with `d3.csv`.

Oct 7, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the University of Missouri's football statistics from 2010 onward as a horizontal bar chart, plotting either total points or win percentage per season. Built with React and D3.js (specifically d3.scaleBand and d3.scaleLinear), the chart uses an SVG rendering with animated transitions from d3.transition. Users select between the two metrics via a dropdown menu, with tooltips showing exact values. The data comes from a CSV file loaded asynchronously via d3.csv.

Oct 6, 2021

Loading thumbnail…

Refactored Mizzou

This bar chart displays points scored by Mizzou football across seasons, with animated bars growing horizontally. Built with React and D3 v5, it uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for categorical seasons, and `d3.axisBottom` and `d3.axisLeft` for labeled ticks. Data loads from a CSV via `useEffect` and `d3.csv`, while `.transition().duration(1500)` animates bar widths. SVG rendering includes full-width gridlines, a title, and axis labels.

Oct 5, 2021

Loading thumbnail…

World Map

This world map uses the Natural Earth projection via `d3.geoNaturalEarth1` and renders land, graticules, and interiors as SVG paths with `d3.geoPath`. The landmass data comes from the world-atlas TopoJSON source, while country boundaries are derived from a `topojson.mesh` operation. Ocean and sphere backgrounds are styled with CSS fills, and graticules appear as gray lines. The visualization is built with React, incorporating D3's `geoPath` and `geoGraticule` APIs within a single SVG canvas.

Sep 27, 2021

Loading thumbnail…

Menus Mizzou Bars v2

This visualization shows the number of points scored by the Mizzou football team by season, with an interactive dropdown to switch between displaying points and games won. The data from `data.csv` is rendered as horizontal bars within an SVG element, using D3 v5 to manage scales, axes, and animated bar width transitions over 1.5 seconds. The interface relies on React and the React Dropdown library for user input, while all chart elements and text styling, including bold Lato font titles, are defined in the included CSS.

Sep 27, 2021

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by switching the x-axis attribute via a dropdown menu. Built with React and D3 v5, the visualization renders SVG circles for each data point, with axis components (AxisBottom and AxisLeft) generating tick marks and labels. The code uses d3.scaleLinear, d3.extent, and d3.csv for data loading and scaling, while ReactDropdown provides the interactive menu. A native SVG `<title>` element serves as a basic tooltip, displaying the x-axis value for each point on hover.

Sep 27, 2021

Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperature readings over the course of a week, using a smooth, natural curve to connect data points. It renders as an SVG within a React application, leveraging D3 v5 functions like `scaleTime`, `scaleLinear`, `line`, and `curveNatural`. A scatter of circles marks each individual observation, with tooltips showing the day for each point. The chart draws its data from a CSV file containing San Francisco weekly temperature data, sourced from the United Nations World Population Prospects.

Sep 14, 2021

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot displays the relationship between sepal length and sepal width in the Iris flower dataset, loaded via d3.csv. Each point is rendered as a fixed-size circle using SVG in a React component, with axes and gridlines built from the d3.scaleLinear scale. The plot’s aesthetic is customized through the Poppins font, muted colors for ticks and marks, and rotated axis labels, while hover tooltips—implemented with SVG <title> elements—reveal the formatted sepal length value for each point.

Sep 14, 2021

Loading thumbnail…

Angry Face

A stylized angry face built with React and D3 v7 rendered as SVG. D3’s `arc` generator creates the frown-shaped mouth, while React elements define the red circular head, black stroke, angled eyebrows, and pink blush details. The face is centered using SVG groups and transforms, with all geometry computed from fixed constants rather than external data.

Sep 11, 2021

Loading thumbnail…

Bar Chart v1

This bar chart displays population data for ten countries, with horizontal bars ordered by decreasing population from China to Mexico. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for the population axis and `scaleBand` for the categorical country axis. Data is loaded from a CSV file using D3's `csv` function, with population values multiplied by 1000 to convert from thousands. The chart includes axis labels via `axisLeft` and `axisBottom`, with bars styled in steelblue.

Sep 7, 2021