F

Fedor Sharygin

@Fedor-Sharygin·16 public vizzes

Loading thumbnail…

Graph Design question

Three small multiples display survey ratings and population counts as dot plots, allowing comparison of two related variables side by side. The first two panels compare "Last" versus "This" ratings across ten responses, while the third plots population for ten countries. Each panel uses D3’s `scaleLinear` for the x-axis and `scalePoint` for the categorical y-axis, with circles sized at a fixed radius. The code loads data via `d3.csv`, formats tick labels with `format`, and renders axes with `axisBottom` and `axisLeft` in SVG. Data comes from `quest.csv` and `data.csv`, with populations multiplied by 1,000.

Loading thumbnail…

Project 7 - Ted Sharygin and Will Mielke

This dashboard displays code analysis of the VVVVVV and Overshadow codebases, featuring interactive bar charts that show the number of switch cases at each line location within selected source files. Users can choose files via dropdown menus to compare the two projects, distinguished by blue and pink coloring. Additional bar charts visualize memory usage by component and CPU usage percentages using D3. The interactive filtering, implemented with D3 select elements and transition functions, allows users to dynamically explore the data across different files.

Loading thumbnail…

Project7 Interactable Switch and If bar chart

This horizontal bar chart ranks the ten most populous countries using D3 v6, with population data loaded from a CSV file. Bars are rendered as SVG rectangles whose lengths are scaled linearly by population values, while country names are positioned along a band scale. The visualization clearly shows China and India leading, followed by the United States, and encodes the data through both the `scaleLinear` and `scaleBand` scales. Axes are generated via `axisLeft` and `axisBottom`, and the chart is drawn within an SVG canvas.

Loading thumbnail…

CS599 - Project 6

This example visualizes the distribution of outcomes from a Monte Carlo betting simulation, showing the end result of a $100 starting stake across multiple trials. Users adjust sliders for parameters like number of trials, simulations, bet percentage, win multiplier, blowup chance, and kernel bandwidth, with the chart updating in real time. The visualization combines a density estimate curve, drawn using d3.line with a kernelEpanechnikov estimator and d3.scaleLinear axes, with overlaid scatter circles representing individual simulation results. The code uses D3 v6 to manipulate SVG elements directly.

Loading thumbnail…

CS599 Project 5 - Bar Chart

This bar chart displays the number of game consoles each major publisher has released, using red, semi-transparent bars and a grid of platform labels beneath each publisher. It reads publisher and console data from a CSV file and renders the visualization as SVG using d3.v6. The chart uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `axisBottom` and `axisLeft` for the axes. Additionally, it overlays fixed-position images of game consoles and text labels for Xbox 360, Nintendo Switch, and PlayStation 2.

Loading thumbnail…

CS599 Project - Line Chart

This example shows how video game sales have changed over time for the top 50 best-selling games of all time. A line chart plots sales against release date, with labels and dates shown for the five biggest games. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for scales, and d3.line with curveBasis to generate the path. Axes are created with d3.axisLeft and d3.axisBottom, and the SVG is rendered with d3.select.

Loading thumbnail…

Tutorial Line chart

A line chart tracks temperature over time in San Francisco, using a smooth curve to connect data points across a time-based x-axis and a linear y-axis. The chart includes labeled axes, a title, and grid lines to aid readability. Built with D3 v6, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis`, rendering to SVG. Data is loaded from a remote CSV file via `d3.csv`.

Loading thumbnail…

Tutorial Cars Scatter Plot

This scatter plot displays the relationship between a car’s weight and its acceleration, with each point representing a vehicle from the auto-mpg dataset. The visualization uses a linear scale for both axes, with grid lines and labeled axis titles for clarity. The code leverages D3 v6 functions like `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart, and renders data points as semi-transparent circles loaded from a CSV file via `csv`.

Loading thumbnail…

Tutorial Scatter Plot

This scatter plot visualizes the populations of ten countries, using a linear scale for population on the x-axis and a point scale for country names on the y-axis. Each country is represented by a circle, with the data loaded from a CSV file and processed by scaling values. The visualization uses D3 v6 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`, with SVG rendering. Grid lines are drawn via tick sizes, and axis labels are added manually.

Loading thumbnail…

CS599 Project 5 - Lines

This visualization displays the sales figures of bestselling video games as a horizontal bar chart, with game titles on the Y-axis and sales numbers on the X-axis. It uses D3.js v6 with scaleLinear for the numeric sales axis and scaleBand for categorical game titles, rendering bars as SVG rectangles. Data is loaded from a CSV file using the d3.csv method, and the chart includes formatted axis ticks that abbreviate large numbers (e.g., converting millions to billions) via d3.format.

Loading thumbnail…

D3JS bar chart custom axis

A D3.js v6 bar chart displays population counts for nine countries using an SVG rendering with a custom horizontal axis. The axis converts D3’s default SI-prefix formatting (like “1.4G”) into readable labels using “B” for billions via `axisBottom` and `format('.3s')`. The vertical axis uses a band scale for country names, while bar widths come from a linear scale over population values loaded from a CSV file.

Loading thumbnail…

D3JS bar chart

This D3.js bar chart displays population figures for ten countries, ordered alphabetically along the vertical axis with horizontal bars scaled by population. It uses `d3.csv` to load the data, `d3.scaleLinear` and `d3.scaleBand` for positioning, and `d3.axisLeft` and `d3.axisBottom` to render the axes. The SVG chart appends rectangles with heights based on band width and fills them with steelblue.

Loading thumbnail…

Intro to D3JS - Face

This example demonstrates a simple cartoon face built entirely with SVG shapes using D3.js v6, displaying a yellow circular head, black eyes, rectangular eyebrows, and a curved mouth. The code uses D3 selection methods to append and manipulate SVG elements, including `circle`, `rect`, and `path` nodes, within a centered group. The mouth is created using D3's `arc` generator with specified inner and outer radii and angles. Dimensions are read directly from the SVG attributes and converted to numbers for positioning the face components.

Loading thumbnail…

HTML Tutorial - SVG and CSS Shapes

This example demonstrates basic SVG shapes and CSS styling, showing how circles, rectangles, lines, and paths are positioned and transformed within an SVG canvas. The code uses native SVG elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, with attributes controlling fill color, stroke width, and stroke-linejoin. A `<g>` element applies translations and scaling, while an external stylesheet defines purple and green strokes for line groups. The visualization serves as a tutorial reference for combining SVG geometry with CSS presentation rules.

Loading thumbnail…

HTML Tutorial

This example introduces basic HTML and CSS structure through a simple cars report page. It shows a large monospace list of three used cars with prices, where one car entry appears highlighted in red. The page uses an unordered list `<ul>` with list items, a `link` tag to load an external stylesheet, and CSS class selectors such as `.highlighted` to style the emphasized element. The `index.html` file contains the markup, while `style.css` sets the font size, family, and color properties using plain CSS rules.

Loading thumbnail…

Cars Report

This example displays a text-based report of cars, formatted with year, make, model, and price for vehicles under a specified price threshold. The page initially shows “Loading…” while a simulated asynchronous data source, `getCars`, returns a hardcoded JSON array after a two-second delay. JavaScript functions `formatCar` and `generateReport` filter and format the data, then the resulting multiline string is inserted into a `<pre>` element, rendering with large font size.