Nicholas Smith

@nasmith2·12 public vizzes

What People Think of Technology Change in the next 50 Years

A survey visualization displays public opinion on technology changes over the next 50 years, comparing responses across eight different scenarios and four US census regions. The main pie chart shows overall sentiment on whether technology will improve or worsen life, with surrounding circles representing specific technologies like driverless cars and lab-grown meat. Users can click pie segments to filter all circles by response category, or switch between default and map views showing regional breakdowns. The visualization uses React with d3.arc, d3.pie, d3.geoPath, and d3.geoAlbers for SVG rendering, pulling data from a CSV file and US Atlas TopoJSON.

Oct 26, 2019

Loading thumbnail…

Base US Map

This example displays a base map of the United States with its state boundaries rendered as semi-transparent white polygons with black strokes. The visualization uses a React component that fetches TopoJSON data from the us-atlas CDN and converts it to GeoJSON features using the `feature` and `mesh` functions from the TopoJSON library. The map is drawn with SVG paths created by `d3.geoPath` and the `geoAlbers` projection, which is applied to each state feature in the `Marks` component.

Oct 15, 2019

Loading thumbnail…

React Starter

This React starter displays a large, centered “Hello React!” message. It uses React and ReactDOM to render a simple component into a div element with the ID `root`. The page loads React and ReactDOM from unpkg CDN links and renders the message using `ReactDOM.render`. The styling is applied via a CSS class within the HTML file, and the rendering approach uses a JavaScript file `bundle.js` that contains the application logic.

Oct 15, 2019

Loading thumbnail…

Etch-A-Sketch

An interactive drawing application that recreates the classic Etch-A-Sketch toy in the browser. Users navigate a drawing cursor with arrow keys or WASD controls, while additional keyboard shortcuts adjust line thickness, cycle through six draw colors, and toggle drawing on and off. The application renders an SVG line path using React state management, with the drawing path constructed incrementally as the cursor moves across a 960 by 500 pixel canvas.

Sep 25, 2019

Loading thumbnail…

Demographics of Social Media

This example displays a simple text summary of the loaded social media dataset, reporting its size in kilobytes, row count, and column count. The visualization uses d3.csv to fetch and parse the CSV file from a GitHub gist, then formats the resulting data with d3.csvFormat to calculate the file size. The final message is rendered into a pre element using standard DOM textContent, with no charts or graphics. The code also includes commented-out alternatives using fetch, async/await, and a nested promise “pyramid of doom” to demonstrate different parsing workflows.

Sep 24, 2019

Loading thumbnail…

How Often People that use Interent know the safety of Interent use

This visualization examines the relationship between internet usage frequency and users’ knowledge of cybersecurity, specifically whether WiFi traffic is encrypted by default. It displays a bar chart comparing responses to a cybersecurity question across different usage frequency levels. The chart is built using Vega-Lite API with D3.js for data loading via `d3.csv`. The dataset is sourced from a GitHub gist containing survey responses on internet safety awareness. The visualization uses `vl.markBar()` with encoding for categorical responses and count aggregation, styled with custom configuration for readability.

Sep 24, 2019

Loading thumbnail…

Wether or not People would Ride in a Driverless Car

This visualization shows survey responses on whether people would ride in a driverless car, with counts split evenly between yes and no. It uses a bar chart where the x-axis lists the response options and the y-axis shows the count of respondents, with bars colored by participant sex. The chart is built using Vega-Lite through the vega-lite-api, with data loaded via d3.csv from a gist-hosted CSV file. The visualization is rendered with SVG output and configured with custom axis and label styling for readability.

Sep 18, 2019

Loading thumbnail…

Technology Change in the next 50 Years

This example displays a text summary of a CSV dataset about people’s views on future technology, showing the file size, row count, and column count. The visualization loads the remote CSV using `d3.csv`, then formats and displays the metrics via `d3.csvFormat` in a large `<pre>` element. It relies on D3 v5’s asynchronous data parsing API, with commented alternatives using `fetch` and `d3.csvParse`. The data comes from a gist-hosted CSV file.

Sep 18, 2019

Loading thumbnail…

How Difficult it is for Internet Users to give it up

This visualization shows how internet users’ difficulty in giving up the internet varies by age, broken down by whether they use social media. A bar chart displays the count of survey respondents by age, with bars colored according to social media usage, and tooltips revealing exact counts. The code uses the Vega-Lite API (`vl.markBar`) with D3’s `csv` loader to fetch data from a GitHub-hosted dataset. The visualization leverages vega-lite’s `vl.x().fieldN()`, `vl.y().fieldQ()`, and `vl.color().fieldN()` for encoding, while the custom `config.js` adjusts axis and label styling for readability.

Sep 17, 2019

Loading thumbnail…

Knowledge of users internet safety

This example displays the file size, row count, and column count of a CSV dataset on internet users’ knowledge of cybersecurity, loading the data with `d3.csv` and formatting the summary into a large-text `pre` element. It uses D3 v5’s `d3.csvFormat` to compute the data’s size in kilobytes, then updates the page’s text content directly. The dataset is sourced from a GitHub gist, and the code also includes commented-out alternatives using `fetch`, `async/await`, and `d3.csvParse` to demonstrate different parsing methods.

Sep 17, 2019

Loading thumbnail…

What People Think if Robots Became Primary Caregivers for Elderly/Disabled

This visualization shows survey responses on whether lifelike robots should become primary caregivers for elderly or disabled people, alongside an analysis of sex-based differences. It uses a bar chart with counts of responses per category, colored by respondent sex, and includes tooltips for detailed values. Built with Vega-Lite and D3, it loads CSV data from a GitHub raw URL and renders the chart using the Vega-Lite API with D3’s CSV parser.

Sep 17, 2019

Loading thumbnail…

Smiley Face With Glasses

A smiling face with glasses is rendered as a single SVG graphic. The face is drawn using React components, with the D3.js `arc` API generating the mouth path. The visualization uses coordinate-based positioning to place the eyes, nose, glasses, and a yellow background circle with a black stroke. React and D3 work together to construct the composite shape, with React handling the SVG elements and D3 providing geometric path generation for the curved mouth. The code explicitly sets dimensions, offsets, and radii for each facial feature.

Sep 17, 2019