bcwein

@bcwein·8 public vizzes

Temperature san francisco

This scatterplot displays the relationship between horsepower and weight for a dataset of cars, with each vehicle represented by a semi-transparent red circle. The visualization uses D3 v5 to scale and plot the data points, with axis labels and tick marks rendered via SVG. The chart includes a title and labeled axes, and the data is loaded from a remote CSV file fetched using D3's `csv` function. The implementation relies on D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` utilities to construct the plot.

Mar 29, 2020

Loading thumbnail…

Cars Scatterplot

This scatterplot shows the relationship between horsepower and weight for a collection of cars, with each car represented as a red, semi-transparent circle. The visualization uses D3 v5 to load the auto-mpg dataset from a CSV file, parse its numeric fields, and render the plot as SVG. The `d3.scaleLinear` and `d3.extent` functions map the data to a 960×500 canvas, with gridlines and labeled axes drawn via `d3.axisLeft` and `d3.axisBottom`. Styling is applied through CSS, including circle opacity and tick label formatting.

Mar 29, 2020

Loading thumbnail…

Scatterplot

This scatterplot displays the populations of the top 10 most populous countries, plotting each country's population on the horizontal axis against its name on the vertical axis. The visualization uses D3 v5’s `scaleLinear` and `scalePoint` to map data, with axes generated via `axisBottom` and `axisLeft`. Circle marks are rendered in SVG, with a formatted x-axis that abbreviates numbers (e.g., "1.42B"). Data is loaded from a CSV file, where population values are multiplied by 1000 to reflect actual counts.

Mar 29, 2020

Loading thumbnail…

Customizing axis

This example shows a horizontal bar chart of the top 10 most populous countries, with the x-axis customized to display population values in billions using the `d3.format` function with a `.3s` specifier and a text replacement of 'G' to 'B'. The chart uses `d3.scaleLinear` for the population scale and `d3.scaleBand` for the country categories, rendered as SVG rectangles. The y-axis grid lines and domain are removed, while the x-axis includes custom tick formatting and a labeled axis using `d3.axisBottom`. Data is loaded from a CSV file and multiplied by 1000 to convert values to actual population figures.

Mar 29, 2020

Loading thumbnail…

Lets make a face!

This example shows a horizontal bar chart of population data for ten countries, encoded as SVG rectangles scaled by each country’s population value. The code loads data from `data.csv` and builds the visualization using D3 v5 APIs, including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The bars are appended to a translated `<g>` element, with the y-axis labeling countries and the x-axis scaled to the maximum population.

Mar 29, 2020

Loading thumbnail…

Lets make a face!

A yellow circle forms a cartoon face, with two black eyes positioned symmetrically and a semi-circular mouth drawn as an SVG path. The face is rendered using D3 v5, with circles positioned via the `attr` method and geometric properties like `cx`, `cy`, and `r`. The mouth uses the D3 `arc` generator to create a path with specified inner and outer radii and angular range, all within an SVG canvas of 960 by 500 pixels.

Mar 28, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes can be styled and grouped using CSS and SVG attributes. It shows circles, rectangles, a line, and a path rendered on an SVG canvas, with fills and strokes applied directly or inherited from a `<g>` group. The code uses React to render the SVG elements, with styles defined in an external CSS file, and showcases SVG transforms for positioning shapes without repeated coordinates.

Mar 28, 2020

Loading thumbnail…

Cars Report

This example renders the text “Hello World!” from a single JavaScript file into a preformatted HTML element. It uses React as the framework, with the starter code provided in the README, and the message is set via `document.getElementByID('message').textContent`. The visualization is a minimal, static report that demonstrates the basic integration of a React component with the DOM, relying on the bundled `bundle.js` to execute the logic in the browser. No data source is loaded, and no interactive or animated behavior is shown.

Mar 28, 2020