S

sucotton9

@sucotton9·37 public vizzes

Loading thumbnail…

world map

This world map visualization displays global migration data for the year 2019, with each country’s migrant population represented by a white circle whose radius is scaled to the data value. The map uses a Natural Earth projection with graticules, country boundaries, and interior mesh lines. The visualization is built with React, D3 v5, and the topojson library, rendering SVG paths for the geographic features and circles for the data points. The geographic data comes from the world-atlas GeoJSON dataset, while migration figures are loaded from a CSV file.

Loading thumbnail…

Fork of world map

This visualization displays global immigration numbers across multiple years, with proportional circles overlaid on a natural Earth projection map. Users can select different years from a dropdown menu to update the circle sizes. The React app uses d3.geoNaturalEarth1 with d3.geoPath to render country boundaries, graticules, and sphere from TopoJSON data, while d3.scaleSqrt scales circle radii for immigrant counts from the Sense Your City dataset.

Loading thumbnail…

Final: migration bar chart with dropdown

A bar chart displays immigration numbers for ten countries across selectable years using a dropdown menu. The visualization updates the bar heights based on the chosen year from 2008 to 2019, with country names on the x-axis and population counts formatted in billions on the y-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, and renders SVG rectangles. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`.

Loading thumbnail…

Fork of Fork of styling dropdown and working...Fork 999 of Stylized Bar Chart

This interactive bar chart displays the top 10 most populous countries based on immigration numbers for a selected year from 2008 to 2019. A dropdown menu allows users to switch between years, updating the bar heights accordingly. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and SVG `<rect>` elements for the bars. Data is loaded as CSV from a GitHub gist and formatted using D3’s `format` API, with axis labels and tooltips providing context.

Loading thumbnail…

Fork of Bar Chart

This bar chart visualizes global sales for different video game genres, sourced from a CSV file, with a D3 v6 rendering. It uses `csv`, `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to map genres to bars and provide axes. On mouseover, the chart changes a bar’s fill to orange and back to steelblue on mouseout via D3’s selection and transition methods. The SVG output includes data labels for axes and a rotated genre title.

Loading thumbnail…

Fork of Fork of Fork of Gender Distribution Chart

A stacked bar chart displays the gender distribution of students across university modules. The chart can toggle between absolute counts and percentages. The visualization uses the D3.js library to render SVG graphics. It reads CSV data and uses d3.layout.stack for stacking and d3.scale.ordinal for the x-axis. Radio buttons trigger transitions that animate the bars between count and percent modes.

Loading thumbnail…

Fork of styling dropdown and working...Fork 999 of Stylized Bar Chart

This bar chart displays the top 10 most populous countries, with a dropdown menu to select the year. Built with React and D3 v5, it renders SVG rectangles scaled by population. The chart uses `scaleBand` for the countries and `scaleLinear` for the y-axis, with data sourced from the UN World Population Prospects.

Loading thumbnail…

Fork of Adding Dropdowns Almost there fork of working...Fork 999 of Stylized Bar Chart

This visualization displays the top 10 most populous countries as a bar chart, with immigration numbers for a selectable year. A dropdown menu, built with ReactDropdown, lets users choose from years 2008 to 2019. The chart uses React with D3 v5 for scales and axes, rendering SVG rectangles via the Marks component. Data comes from the United Nations World Population Prospects 2019, loaded as CSV and parsed with d3.csv.

Loading thumbnail…

styling dropdown and working...Fork 999 of Stylized Bar Chart

This fork of a stylized bar chart presents the top 10 most populous countries, with a dropdown menu to select the year (2008–2019) and update the displayed values. Built with React and D3 v5, it renders SVG bars and axes. The chart uses `scaleBand` for the categorical country axis and `scaleLinear` for the population values, with formatting via `format('.2s')`. The data is loaded from a GitHub-hosted CSV file using D3's `csv` function, and the code includes commented-out experiments with axis rotation and bar heights.

Loading thumbnail…

Fork of A Bar Chart(Platform)

This interactive bar chart displays global video game sales across different platforms, with a dropdown menu allowing users to switch between regional sales metrics (Global, EU, JP, NA, and Other). Built with React and D3 v5, the visualization uses `scaleBand` for the categorical platform axis and `scaleLinear` for the sales values. SVG rectangles render the bars, with tooltips formatted using D3's `format` function for compact notation. The data comes from a Kaggle dataset on top 500 video games, loaded via `d3.csv`.

Loading thumbnail…

Adding Dropdowns Almost there fork of working...Fork 999 of Stylized Bar Chart

This visualization displays the top 10 most populous countries as a horizontal bar chart, drawn with React and SVG. The code uses d3.scaleBand, d3.scaleLinear, and d3.format to map country names and migrant counts to visual bars, with axis components rendering tick marks and labels. A dropdown menu (built with React’s select element) is included to let users select a pet option, though its selected value does not affect the chart. Data comes from a CSV file loaded via d3.csv, based on the UN World Population Prospects 2019.

Loading thumbnail…

menus

This example demonstrates a simple pet-selection menu built with React and D3 v7. It shows a labeled dropdown that lets users choose from a list of six pets, with the selected value displayed in the console. The `Dropdown` component manages the `<select>` element, while React’s `useState` hook tracks the current choice. The code uses D3’s `arc` function, though it is not applied in the visible interface. The options are defined as static objects with distinct values and labels.

Loading thumbnail…

Fork of working Fork of Fork of Fork of Fork of Fork 999 of Stylized Bar Chart

This fork of a stylized bar chart displays the top 10 most populous countries. Built with React and D3 v5, the visualization uses `scaleBand` for the x-axis and `scaleLinear` for the y-axis, with SVG rectangles for bars. The data comes from the United Nations World Population Prospects 2019. The code includes commented-out attempts at rotating axis labels and adjusting bar heights, reflecting an iterative development process. The y-axis uses a custom tick format converting G to B for billions.

Loading thumbnail…

Fork of Bar Chart

This bar chart visualizes the number of migrants per country, with bar heights encoding the values on a linear scale. The chart uses D3 v6 to load CSV data, create band and linear scales, and render SVG axes and rectangles. Interactive mouseover events change bar colors from steel blue to orange, with a smooth transition on mouseout. The data originates from a remote CSV file, and the visualization is built entirely with D3’s selection, scale, and axis APIs.

Loading thumbnail…

working Fork of Fork of Fork of Fork of Fork 999 of Stylized Bar Chart

This bar chart visualizes the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, displaying each country's migrant population. Using React and D3 v5, the visualization employs `scaleBand` and `scaleLinear` for axes, with SVG rendering through custom components for axes and rectangular marks. The chart uses a Poppins font with a teal color scheme and includes formatted tooltips for data inspection.

Loading thumbnail…

Fork of Fork of Fork of Fork 999 of Stylized Bar Chart

This example visualizes the top 10 most populous countries using a stylized bar chart, with countries on the x-axis and migrant counts on the y-axis. The chart loads CSV data from a GitHub gist containing United Nations World Population Prospects 2019 data. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and SVG `<rect>` elements via the `Marks` component. Axes are rendered using custom `AxisBottom` and `AxisLeft` components, with data formatting applied through `d3.format`.

Loading thumbnail…

Fork of Fork of Fork 999 of Stylized Bar Chart

This fork of a stylized bar chart visualizes the top 10 most populous countries, with a second dataset representing migrants. It uses React and D3 v5 via `scaleBand` and `scaleLinear` to map country names and migrant values to SVG rectangles, with custom axes for tick labels. The horizontal bars display data from the United Nations World Population Prospects 2019, loaded through D3’s `csv` function.

Loading thumbnail…

Fork of Fork 999 of Stylized Bar Chart

A horizontal stylized bar chart depicts the top 10 most populous countries, with bar lengths representing each country's migrant population in millions. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear handling the x and y position scales. Data comes from a CSV file loaded via d3.csv, and the y-axis labels are formatted using d3.format with 'G' replaced by 'B'.

Loading thumbnail…

Fork of Victory!

A bar chart displays migrant counts across fourteen countries, with migrants on the vertical axis and country names along the horizontal. The visualization uses VictoryBar and VictoryChart within a React component, loading CSV data asynchronously via d3.csv and React hooks. Data is parsed with a row function that converts the Migrants field to numbers, while the chart applies custom styling, padding, and domain padding for readability.

Loading thumbnail…

Fork 999 of Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the y-axis and population values on the x-axis. The chart uses a teal color for the bars, gray for the axes and labels, and the Poppins font, with a hover tooltip showing the exact population format. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data from the UN World Population Prospects 2019, loaded via `csv`. The SVG rendering separates axes and marks into modular components for clarity.

Loading thumbnail…

Fork of Fffork of Stylized Bar Chart

This stylized bar chart displays the top 14 countries by migrant population in 2020, ranked on the y-axis with horizontal bars extending along the x-axis. Built with React and rendered as SVG, it uses D3 v5 scales and formatters: `scaleBand` for categorical y-axis positioning, `scaleLinear` for the numeric x-axis, and `format` to abbreviate large numbers with a custom tick formatter that converts gigabytes to billions. Data is fetched from a CSV file using the `fetch` API and parsed via `d3.csvParse`, with a Poppins font and custom axis colors.

Loading thumbnail…

Fffork of Stylized Bar Chart

This example shows the top 14 countries by migrant population in 2020, rendered as a horizontal bar chart using React and D3 v5. The visualization uses `scaleBand` for the y-axis categories, `scaleLinear` for the x-axis values, and SVG `rect` elements with native tooltips via `<title>`. Axes are built with custom React components, and tick labels are formatted with `d3.format`. Data comes from a CSV hosted in a GitHub gist, fetched with the Fetch API and parsed with `d3.csvParse`. The chart uses a Poppins font and a teal color scheme.

Loading thumbnail…

Fork 5 of Stylized Bar Chart

This bar chart displays the top 14 countries by migration to the U.S., using data from the United Nations World Population Prospects 2019. The visualization uses React with SVG rendering, employing `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. Axis components are custom-built, with tick formatting via `d3.format` to convert raw values into abbreviated labels like "1.5B". Native SVG `<title>` elements provide tooltips on hover, while the Poppins font and custom styling give the chart its distinctive appearance.

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This bar chart displays the top 14 countries by migrant population, with horizontal bars proportional to the values. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The SVG rendering includes custom `AxisBottom`, `AxisLeft`, and `Marks` components, with tick formatting via `format('.2s')`. Data comes from a CSV sourced from the United Nations World Population Prospects 2019.

Loading thumbnail…

Migrant Chart try3

This example displays migration to the United States from 14 countries as a bar chart, with each bar's height representing the number of migrants. The visualization is built using React and D3 v7, leveraging `d3.csvParse` to load data from a remote CSV file and `d3.scaleBand` and `d3.scaleLinear` to map country names and migrant counts to SVG rectangle coordinates. The chart renders bars as SVG `<rect>` elements, with axes implied by the scales but not explicitly drawn. Data loading is handled via a fetch promise, though the code currently logs parsed results instead of fully wiring them into the state.

Loading thumbnail…

Load Data w/ react and d3 Mouse Follower

This example displays the number of rows and columns in a CSV dataset as large text, initially showing “loading…” before updating once data arrives. It uses React’s `useState` hook to hold the parsed data and `d3.csv` for loading from a remote GitHub gist URL. The app also fetches the same URL with `fetch` and parses the text via `d3.csvParse` for logging. The `message` helper computes the row and column counts displayed in a `<pre>` element.

Loading thumbnail…

Migration to US chart

This example attempts to visualize migration to the US using a bar chart built with Chart.js. It loads CSV data via a fetch request and parses it with `d3.csvParse`, though the data is not explicitly bound to the chart. The chart configuration includes placeholders for two datasets, axes for countries and migrant counts, and renders on a canvas element. The code references d3.v7 but relies primarily on Chart.js for the visualization.

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the number of migrants from 14 countries, using data from a 2018 United Nations population estimate. The visualization sorts countries along the y-axis and represents migrant counts with horizontal bars on an SVG canvas. The code employs D3 v5’s `csv` loader to parse the dataset, `scaleLinear` and `scaleBand` for axes, and `axisLeft`/`axisBottom` for tick generation. Rects are appended to the SVG group, with axes stripped of domain lines for a cleaner presentation.

Loading thumbnail…

Fork of Stylized Line Chart

This example shows a stylized line chart of temperature readings over one week, drawn as a smooth curve using React and SVG. The data comes from the Data Canvas Sense Your City dataset, loaded as CSV with d3.csv. The chart uses d3.scaleTime and d3.scaleLinear for the axes, while d3.line with curveNatural generates the curved path. Axes and tick labels are rendered as React components, with custom styling for ticks, labels, and the teal-colored line.

Loading thumbnail…

Fork of Monoliths Delaunay Triangulation

This visualization plots the locations of reported monoliths on a rotating globe using an orthographic projection. It displays the sites as points, with Delaunay triangulation links connecting them, overlaid on country outlines from the World Atlas TopoJSON. The code uses `d3.geoOrthographic` and `d3.geoPath` for geographic rendering, `d3.geoVoronoi` for triangulation, and `d3.hexbin` to aggregate nearby coordinates. Drag and zoom interactions are enabled via `d3.drag` and `d3.zoom`, with the monolith data loaded from `monoliths.csv`.

Loading thumbnail…

ACE - Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle fuel efficiency (mpg) against horsepower. Each circle’s size encodes weight, while color distinguishes the origin of the vehicle, and hovering reveals the car’s name. Built with the Vega-Lite API and D3’s `csv` loader, the chart uses `vl.x()`, `vl.y()`, `vl.color()`, and `vl.size()` for encoding, with a fixed circle size and opacity. The visualization is configured to fit the window dimensions and uses a custom dark theme via `config.js`.

Loading thumbnail…

ACE - CSV colors

This example displays a message about the number of rows and columns in a CSV file using D3 v7. It fetches data from a GitHub gist containing color values and parses it with `d3.csv`. The visualization shows basic data summary information in an HTML `<pre>` element with large font size, while also logging the parsed data to the console via `d3.csvParse`. The page is styled with CSS and runs in a plain HTML/JavaScript environment without React.

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time. The visualization uses React state to track mouse coordinates via the `onMouseMove` event listener, then renders the circle’s `cx` and `cy` attributes accordingly. It relies on React 16.9, ReactDOM, and the SVG renderer within a fixed 960×500 viewport, with no external data source.

Loading thumbnail…

Smiley face pt. 2

This example renders a yellow smiley face as an SVG using React components and D3’s `arc` generator for the mouth. The face is centered via a `transform` translation, with eyes positioned using fixed offsets and drawn as simple circles. Additional red paths and thick polylines appear outside the face, adding decorative elements. The code uses ReactDOM to mount the app and D3 v7 for the mouth’s arc path, with all shapes hardcoded rather than data-driven.

Loading thumbnail…

ACE - Rank Choice Voting

This interactive example demonstrates ranked-choice voting by simulating 1000 random voters ranking four candidates and sequentially eliminating the lowest vote-getter until a majority winner emerges. The visualization uses plain JavaScript with array methods like `forEach` and `Math.min`/`Math.max` to tally first-choice votes, redistribute ballots from eliminated candidates, and detect ties resolved by random outcome. Built with the React starter template, it logs round-by-round counts and winner status to the console, illustrating the core mechanics of instant-runoff voting without a graphical display yet.

Loading thumbnail…

Untitled

This example demonstrates how to use a React-based setup with JavaScript logic to answer three problems. It does not produce a data visualization, but instead logs text responses to the console based on functions like `AceStudent` and `whatIs`, which provide descriptions of Islamic landmarks such as the Ka'bah and Al Aqsa Mosque. The code also randomly determines and logs either "X" or "O" into an array. The page uses React 17.0.2 and relies on the browser’s JavaScript console for viewing outputs, with minimal HTML markup.

Loading thumbnail…

ACE10 CS - Fork of HTML Starter

This example displays the text “Hello HTML” centered on a white canvas, with the page’s CSS setting the font size to an extremely large 13em. The underlying HTML file uses a minimal structure with inline `<style>` and `<script>` tags, demonstrating a basic static visualization. JavaScript outputs the message “Hello JavaScript!” to the browser console, but no dynamic data or rendering API is used. The piece serves as a plain, static HTML/CSS/JS starter template.