T

Taylor

@TaylorW43·27 public vizzes

Loading thumbnail…

Test2 answer for Big Data Management Final Project

This scatterplot visualizes the results of a local outlier factor (LOF) analysis, with each point colored dark green and its opacity scaled by the LOF value—higher LOF points appear darker, indicating greater outlierness. Hovering over a point reveals a tooltip showing the exact LOF score. The visualization uses React with D3 v5 modules including `scaleLinear` for axes and `csv` for data loading from a GitHub-hosted CSV file. The example is built with SVG rendering and custom React components for axes and marks.

Loading thumbnail…

Test answer for Big Data Management Final Project

This scatterplot displays the Local Outlier Factor (LOF) values from a CSV dataset, with each point’s opacity reflecting its anomaly score. The visualization uses React with D3’s `scaleLinear` for axes and `.ticks()` for grid lines, rendering points as SVG circles. Hovering reveals a tooltip showing the exact LOF value. The project imports data asynchronously via D3’s `csv` method and manually sets fixed x- and y-axis domains rather than computing extents.

Loading thumbnail…

[3]Pie Hunt

This interactive visualization maps global space-launch sites as green triangles, sized by launch count, overlaid on a natural Earth projection. Selecting a country dims other regions and reveals two hidden pie charts showing the ratio of private versus state-run launches and mission success versus failure for that nation. Built with React and D3 v5, it uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.zoom`, and `d3.arc` for rendering, with data from the Privatization of Space dataset.

Loading thumbnail…

[2]Plot launch year/month with menus

This interactive scatterplot visualizes space launch records, plotting each launch's month against its year. A dropdown menu filters the x-axis by time period, grouping years into ranges like 1957–1970 or 2009–2020. The y-axis remains fixed to months, with points rendered as small circles. Built with React and D3 v5, the chart uses `scaleLinear` and `scaleBand` for axes, `csv` to load data from a GitHub gist, and React Dropdown for menu controls. Each circle’s tooltip displays the launch year.

Loading thumbnail…

[1]Total Number of Rockets Throughout The Years

This visualization displays the total number of rocket launches per year, with a bar chart where the x-axis represents the year and the y-axis shows the launch count. Built with React and D3 v5, it uses SVG rendering and scales from `d3.scaleLinear` to map data values. The underlying data comes from a CSV file on privatization of space, and each bar includes a tooltip showing the specific year and count.

Loading thumbnail…

map with pie

This interactive map visualizes global space launch activity, with triangular markers sized by launch count at each location. Clicking a country dims all map features and displays a pie chart showing the ratio of state-run to private launches for that nation. The visualization uses React for rendering, D3 v5 for geographic projections and zoom behavior, and TopoJSON data. Launch site data comes from a CSV file about privatization of space, with tooltips revealing site names and launch frequencies.

Loading thumbnail…

try2

This interactive map visualizes global space launch data, showing the locations of rocket launches as green triangular markers overlaid on a world map. Users can zoom, pan, and click on countries to select them, which dims non-selected regions and highlights the chosen nation. The map is rendered using SVG with D3’s geographic projections and React for interactivity, while country selection logic and tooltips are implemented via D3 event handlers. Data is sourced from a CSV file containing launch locations and counts, combined with world atlas shapefiles.

Loading thumbnail…

try

This visualization combines a world map with data on space launches, using scaled triangles to represent the number of launches at each location. The geoNaturalEarth1 projection and geoPath render country boundaries and graticules, while d3.scaleLinear sizes the triangular markers based on launch counts. Built with React and D3 v5, the map supports zooming via d3.zoom and highlights selected countries on click, with a tooltip showing launch count and location. The data comes from a CSV about privatization of space, with country names joined from world-atlas TSV data.

Loading thumbnail…

zoom in/out, reverse triangle,tooltip country name

This visualization maps global launch sites, representing the number of launches at each location with an inverted triangular marker. The marker’s height encodes the launch count via a linear scale, while the world map and graticule are rendered using d3.geoPath with a d3.geoNaturalEarth1 projection. Users can zoom and pan the SVG using d3.zoom, and hover over countries to reveal their names or over triangles to see tooltips with launch counts and location details. The map data comes from a TopoJSON world atlas, with launch data loaded via d3.csv.

Loading thumbnail…

points

This visualization maps the global distribution of space launches, with circles sized by the number of launches at each location. It uses a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with graticules and country borders from the world-atlas TopoJSON dataset. The data comes from a CSV of privatization of space launches. React manages the component structure, while `d3.scaleSqrt` maps launch counts to circle radii, and SVG `<title>` elements provide hover tooltips.

Loading thumbnail…

zoom in/out and drag

This interactive world map visualizes the number of space launches at each location, with circle radius scaled by launch count. Users can drag to pan and zoom the map freely, while hovering over a circle reveals its exact launch count and location. Built with React and d3.v5, the visualization loads world topology data from a JSON file and launch statistics from a CSV source. It uses d3's `geoNaturalEarth1` projection, `geoPath` for map rendering, `scaleSqrt` for circle sizing, and a custom zoom interaction that transforms the SVG element. The map displays landmasses, graticules, and interiors as separate styled paths.

Loading thumbnail…

reverse triangle points

This visualization displays the geographic distribution of space privatisation launches on a world map. Each data point is rendered as an inverted, triangular marker whose height encodes the number of launches via a linear scale built with `d3.scaleLinear`. The map uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for drawing land and graticules from TopoJSON, and is constructed within a React component. Data comes from TaylorW43’s CSV of space launch records, with markers positioned using longitude and latitude projected through D3. SVG paths are used for all rendering.

Loading thumbnail…

[using triangle]reverse polygon points

This example visualizes the global distribution of space privatization launches using a natural Earth projection, with each data point rendered as an inverted triangle whose height encodes the number of launches. The map combines D3 geographic paths for land, graticules, and country borders with React-managed SVG polygons positioned via the `geoNaturalEarth1` projection. Tooltips display launch counts and locations. The data comes from a CSV file linked in the README, and the visualization uses `geoPath`, `geoGraticule`, and `scaleLinear` for proportional sizing.

Loading thumbnail…

zoom in/out and reverse triangle

This visualization maps launch sites as green triangles on a world map, with triangle height encoding the number of launches at each location. Users can drag and zoom the map, and hover over a triangle to see the exact launch count and place. Built with React and d3, it uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` for rendering the world and graticules, and a custom zoom interaction. The data comes from a CSV of launch records, and the map layers are derived from the world-atlas TopoJSON source.

Loading thumbnail…

Plot launch year/month

This scatterplot visualizes space launch activity by year and month, with each dot representing at least one launch occurring in that month. The x-axis groups years into five sequential ranges between 1957 and 2020, while the y-axis orders months from 12 down to 1. The visualization uses React and D3 v5, employing `scaleBand` for both axes, SVG circles for marks, and data sourced from a CSV file on TaylorW43’s GitHub gist. Custom `AxisBottom` and `AxisLeft` components render the tick marks.

Loading thumbnail…

Zoom in/out and drag

This example demonstrates pan and zoom interaction on the map of the Skeld ship from Among Us. Users can drag the image to move it and use the scroll wheel to zoom in and out. The visualization uses React with D3 v4’s zoom behavior, applied to an SVG group containing an image element. The image is loaded from the Among Us Wiki and displayed at a fixed 500 by 400 pixel size.

Loading thumbnail…

World map

This example shows a world map rendered as an SVG with countries filled in green, oceans in light blue, graticules as light gray lines, and interior borders in dark gray. The visualization uses the D3 geoNaturalEarth1 projection with d3.geoPath to draw the sphere, graticule, land, and country boundaries from TopoJSON data sourced from the world-atlas package. The React component fetches the TopoJSON with d3.json and converts it using the topojson feature and mesh functions.

Loading thumbnail…

Plot launch year/month with menus

This interactive scatterplot displays rocket launch years and months, with each circle marking at least one launch. A dropdown menu lets viewers filter the x-axis to show all years or specific date ranges. The visualization uses React for the interface and D3 scales for positioning, rendering marks as SVG circles. The y-axis is fixed to months, while the x-axis domain varies based on the selected range. Data comes from a CSV file detailing space privatization efforts.

Loading thumbnail…

Ratio of Launches

This visualization compares the ratio of state-run versus private space launches across countries using a grouped bar chart. The display uses colored bars—one hue for state-run launches and another for private—for each country of origin, with tooltips showing counts. Built with Vega-Lite and the vega-lite-api wrapper, the chart is rendered as SVG via the vega view. Data is loaded asynchronously with d3.csv from a GitHub-hosted dataset, with custom styling defined in a separate config file.

Loading thumbnail…

Kepler Exoplanet Search Results

This example displays basic file metadata from the NASA Kepler Exoplanet Search Results dataset, showing the CSV’s size in kilobytes, row count, and column count in large text. It uses the `d3.csv` method to load and parse the remote CSV file from a GitHub gist, then accesses the parsed data’s `length` and `columns` properties. The code also includes commented alternatives using `fetch` with `async`/`await` and a nested promise “pyramid of doom,” illustrating different asynchronous loading patterns with D3 v5.

Loading thumbnail…

Kaggle-Privatization of Space-csv

This example loads a CSV file of global space launches from a GitHub gist and displays basic file statistics. It shows the dataset’s size in kilobytes, its row count, and its column count as large text. The code uses the d3.csv function to fetch and parse the data, then accesses the results through d3.csvFormat to compute the byte length. It also demonstrates an alternative approach using fetch with async and await in commented-out sections.

Loading thumbnail…

Possible Asteroid Impacts with Earth

This visualization presents basic metadata about a Kaggle dataset of possible asteroid impacts with Earth, displaying the file size, row count, and column count in large text. It loads the CSV data from a GitHub gist using D3 version 5’s `d3.csv` method, which parses the remote file and reports its dimensions. A second, commented-out approach demonstrates fetching the same data with the Fetch API and async/await, then parsing it with `d3.csvParse`. The example highlights the difference between these two D3 data-loading techniques.

Loading thumbnail…

How often are exoplanets confirmed in the existing literature disconfirmed by measurements from Kepler?

This visualization shows exoplanet candidates from NASA’s Kepler mission, plotting each object along a vertical axis of its disposition (e.g., “CONFIRMED” or “FALSE POSITIVE”). The horizontal axis is arbitrary, used only to spread points without overlap, while the large blue dot highlights exoplanets disconfirmed by Kepler despite prior literature confirmation. The chart demonstrates that such disconfirmations are rare relative to the total dataset. Built with the vega-lite-api and d3.csv, it encodes the disposition as a nominal field on the Y-axis and uses circle size to represent the KOI disposition.

Loading thumbnail…

What is the distribution of confidence scores?

This visualization answers “What is the distribution of confidence scores?” by plotting each Kepler exoplanet candidate as a circle, with the exoplanet disposition on the x-axis and its koi_score confidence value on the y-axis. The chart uses a strip plot to reveal the range and density of scores for each disposition category. Built with vega-lite-api and d3.v5, it loads data from a CSV of Kepler Exoplanet Search Results, encodes the fields via vl.x and vl.y, and applies custom axis styling from a separate config file. Tooltips display the kepoi_name for each point.

Loading thumbnail…

During which year is Earth at the highest risk of an asteroid impact?

The chart identifies 2017 as the year Earth faces the highest risk of an asteroid impact, plotting each object’s possible impact count against its period start date as a scatterplot of circles. It uses vega-lite-api to define the marks and encodings, with d3.csv loading NASA asteroid impact data from a GitHub gist. The visualization is rendered via vega and vega-lite, with a dark-themed config for axis styling and custom tooltips provided by vega-tooltip.

Loading thumbnail…

Total Number of Rockets Throughout The Years

A bar chart shows the total number of rockets launched per year, with the Y-axis representing count and the X-axis showing years. The visualization aggregates the global space launch dataset by grouping records on the Year field and counting entries. Built with the vega-lite-api library, it uses `vl.groupby` and `vl.count().as('Count')` for aggregation, then renders with `vl.markBar()`. The code configures axes with custom styling and applies an SVG renderer, with data loaded asynchronously via `d3.csv` from a GitHub gist. Counts appear as tooltips on hover.

Loading thumbnail…

First Assignment: Tweak a face

A cartoon egg face rendered in SVG takes an oval head with a light tan fill, two star-shaped eyes, and a small triangle nose. The mouth appears as a black arc, and a single line with a curved tick sits on the right cheek. The example uses React to output SVG elements, with D3's `arc` generating the mouth shape from a set radius and angular spans. All facial features are drawn as fixed geometric primitives, including `ellipse`, `polygon`, and `line` elements.