samwatersw15

@samwatersw15·11 public vizzes

Google Merch Store YTD Sessions

A line chart displays Google Merch Store daily sessions from January to September 2020, revealing weekly seasonality and a notable spike around early August. Using D3 v5 within a React framework, the visualization renders to SVG. The code parses CSV data, applies `scaleTime` and `scaleLinear`, and generates axes with `axisBottom` and `axisLeft`, while the line path is drawn via a `line` generator.

Sep 28, 2020

Loading thumbnail…

Google Merch Store YTD Sessions

This visualization shows daily Google Merch Store session counts from January through September 2020 as a line chart, revealing weekly patterns and a notable spike in early August. The SVG rendering uses D3 v5 within a React framework, employing `scaleTime` and `scaleLinear` for axes, `line()` to generate the path, and `axisBottom`/`axisLeft` with custom tick formatting. Data from `data.csv` is parsed by converting comma-formatted numbers and date strings.

Sep 27, 2020

Loading thumbnail…

Temperature Line Chart

This line chart displays San Francisco temperature readings over time, with a smooth curved line plotted against labeled axes for time and temperature. The visualization is rendered as an SVG using React and D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the scales and axes. Data is loaded via `csv` from an external dataset, and the line is generated with `line` and `curveBasis`. Grid lines are styled using tick marks, with the chart title and axis labels added as SVG text elements.

Sep 27, 2020

Loading thumbnail…

Cars Scatter Chart

A scatter chart displays the relationship between horsepower and weight for cars from the auto-mpg dataset. Each circle represents a vehicle, showing a positive correlation between the two variables. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes and `axisBottom`/`axisLeft` for ticks. Data is loaded via `csv()` and values are parsed as numbers. The chart features custom axis labels, grid lines via tick sizes, and green semi-transparent circles with a title.

Sep 26, 2020

Loading thumbnail…

Making a Scatter Chart

A scatter chart displays the population of the top 10 countries, with each country plotted as a steel-blue circle along a point scale for country names and a linear scale for population values. The code uses d3.csv to load the data, d3.scaleLinear, d3.scalePoint, d3.axisLeft, and d3.axisBottom to construct the axes, and d3.format to abbreviate population numbers. The SVG rendering includes gridlines via tick sizes and styled text for the title and axis labels.

Sep 26, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 countries by population using horizontal bars, with country names on the y-axis and population counts on the x-axis. The visualization uses D3 v5 within a React framework, rendering to SVG. It employs `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with `axisBottom` and `axisLeft` for ticks. Data comes from a CSV file, with population values multiplied by 1,000, and tick labels formatted using D3's `format` with abbreviations replaced from 'G' to 'B'.

Sep 26, 2020

Loading thumbnail…

Making a Bar Chart Fork

This example visualizes the average price of a two-bedroom flat across ten countries, using a horizontal bar chart rendered as SVG. The chart orders countries by price and labels each bar with its value in thousands. The code uses D3 v5 utilities including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with data loaded from a CSV file via `d3.csv`. A `format('.3s')` tick formatter abbreviates axis labels, while the bars themselves are styled with a steelblue fill.

Sep 23, 2020

Loading thumbnail…

D3.js Face

This example uses D3.js and React to render a simple, stylized face in an SVG. It draws a large yellow circle for the head, two black circles for the eyes, and a smiling mouth created with the `d3.arc` path generator, all centered within a 960×500 viewport. The code explicitly sets the head’s radius based on the SVG’s height, while the eyes and mouth use fixed pixel offsets and arc angles. The visualization demonstrates basic SVG shape creation and geometric positioning with D3’s `select` and `attr` methods.

Sep 13, 2020

Loading thumbnail…

Shapes with SVG + CSS

This example shows how to combine SVG shapes with CSS styling to create a simple static composition. It uses React to render the markup, with circles, rectangles, lines, and a path arranged inside a scaled SVG canvas. CSS classes apply stroke, width, and line-join properties to the line and path elements, while inline attributes control fill colors and translations. The code relies on basic SVG APIs and CSS selectors, with no external data sources.

Sep 13, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML cars report listing three vehicles with their model years and prices. It shows static text content styled with a large monospace font from a linked stylesheet. The page uses plain HTML elements including a heading, an unordered list, and inline text, with no JavaScript libraries or data visualization APIs. The rendering relies on basic browser defaults and the external `style.css` file for font and sizing.

Sep 12, 2020

Loading thumbnail…

Cars Report

This example displays a text-based report of cars priced under $2,000, listing each vehicle’s year, make, model, and price. The page initially shows “loading...” while the data is fetched asynchronously. Using React, the code defines a `getCars` function that simulates a delay before returning a JSON array, and a `genReport` function that filters and formats the entries. The report is rendered into a `<pre>` element via vanilla JavaScript DOM manipulation.

Sep 12, 2020