Perry

@phouchens·7 public vizzes

LineChart

This line chart visualizes daily temperature measurements in San Francisco, with temperature on the y-axis and date on the x-axis, using a smooth curved path to connect the data points. The chart is rendered as an SVG using D3 v5, with scales created via `scaleTime` and `scaleLinear`, axes generated by `axisBottom` and `axisLeft`, and the line drawn using the `line` generator with `curveBasis` smoothing. The code loads temperature data from a CSV file, parses the date and numeric values, and displays gridlines with tick marks, axis labels, and a title.

Mar 6, 2020

Loading thumbnail…

Temp in Sanfran

A scatterplot displays daily average temperatures in San Francisco for December 2020, with each circle representing a day's reading. The chart uses a time-scaled x-axis for dates and a linear y-axis for temperature in Fahrenheit, with gridlines and labeled axes. Built with D3 v5, the visualization loads data from a CSV file, parses dates via `new Date()`, and renders circles using `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. The SVG output includes a title, semi-transparent purple points, and styled tick marks.

Mar 6, 2020

Loading thumbnail…

Cars Plot

This scatterplot visualizes the relationship between car weight and horsepower, with each circle representing a car from the auto-mpg dataset loaded via `d3.csv`. The visualization uses `d3.scaleLinear` for both axes, `d3.extent` to compute domains, and `d3.axisBottom` and `d3.axisLeft` to render the gridlines and tick labels with the SVG rendering approach. Purple semi-transparent circles are positioned using `scaleLinear` mappings, while axis labels and a title are added as SVG text elements.

Mar 6, 2020

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of U.S. states from 2018 data, with each state represented as a circle positioned along a linear population axis and a categorical state axis. The visualization is rendered as an SVG using D3 v5, where the circle coordinates are computed via the `scaleLinear` and `scalePoint` scales, and axes are drawn with `axisBottom` and `axisLeft`. The chart includes a title and axis label, with population values formatted using D3's `format` function to abbreviate large numbers.

Mar 5, 2020

Loading thumbnail…

Custom Axis

A horizontal bar chart displays the 2018 population of US states and Washington D.C., sourced from datausa.com. The visualization uses D3 v5 with an SVG rendering, where the x-axis is customized using `scaleLinear` and `axisBottom` with a tick formatter to abbreviate large numbers (e.g., converting G to B). The y-axis uses `scaleBand`, and the chart includes a title and axis label styled via CSS.

Mar 3, 2020

Loading thumbnail…

Bar Chart

This bar chart displays 2018 state population data from datausa.com. It uses D3 v5 with an SVG rendering approach, mapping population values to horizontal bar lengths against state labels. The code employs `d3.csv`, `scaleLinear`, and `scaleBand` to process the data and position the bars, with `axisLeft` and `axisBottom` generating the chart’s axes. Each state’s population is represented by a steel-blue rectangle, sorted alphabetically along the vertical axis.

Mar 2, 2020

Loading thumbnail…

HTML Starter

This example visualizes a smiling face composed of SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth drawn with a D3 arc path. The eyebrows animate upward and downward using D3 transitions over two-second intervals. The code uses D3 v5 selection methods like `select` and `append`, along with the `arc` generator, to build the static and animated SVG elements within a React framework.

Mar 1, 2020