RyanYun0017

@RyanYun0017·21 public vizzes

Multiple Views of Car Selling Details

This visualization presents a multi-panel dashboard of car selling details, combining a donut chart of production year bins, a bar chart of selling price per year, and a pie chart of fuel types. The views are composed using the Vega-Lite API (`vl.vconcat`, `vl.hconcat`) with canvas rendering, and the data is loaded via D3's CSV parser. The bar chart reveals price trends across years, while the arc charts show the distribution of cars by year and fuel type.

Dec 10, 2021

Loading thumbnail…

Fork of Car Selling Details - Vega Lite

This visualization presents the production year of cars from the UCI Auto MPG dataset as a circular donut chart. It uses the Vega-Lite API to map the year field to both the angular position (theta) and color of each arc, with years grouped into five-year bins. The view is rendered to a canvas and supports tooltips via the vega-tooltip handler. The visualization uses a custom configuration to enhance readability, including specific font sizes and colors for labels and titles. The chart dynamically resizes to fit the browser window.

Dec 10, 2021

Loading thumbnail…

Car Selling Details - Vega Lite

This visualization plots car selling prices against kilometers driven, with each circle representing a vehicle and a tooltip revealing its name. Built with the Vega-Lite API and rendered via the Vega runtime, the chart uses a dark, customized axis and label styling for readability. The data is sourced from the UCI Machine Learning Repository’s Auto MPG dataset, fetched as CSV via D3 and displayed interactively with the Vega tooltip handler.

Dec 9, 2021

Loading thumbnail…

Fork of Fork of CarSelling-Bar Chart

This bar chart visualization displays car selling data from a CSV file fetched via d3.csv from a GitHub gist. The chart is rendered as SVG within a React framework, using d3.v5 to parse and process the data. The visualization employs vega-lite and vega-tooltip libraries, registered through vega-lite-api, to enable interactive tooltips on hover. The page integrates vega and vega-lite scripts in the HTML head, with the SVG container set to 960x500 pixels, and the visualization is generated through a bundled JavaScript file that loads the dataset and applies the charting configuration.

Dec 5, 2021

Loading thumbnail…

Fork of Fork of CarSelling-Bar Chart

This bar chart displays the relationship between car selling price in Indian rupees (INR) and manufacturing year, using data from a Kaggle vehicle dataset. The x-axis shows selling price in millions of INR, while the y-axis lists production years sorted in descending order. Built with React 16.9 and D3 v5, the visualization uses `d3.csv` to load data, `scaleLinear` and `scaleBand` for axes, and `d3.legendColor` for the categorical color legend. All marks render as SVG rectangles with light blue fill.

Dec 5, 2021

Loading thumbnail…

Fork of CarSelling-Bar Chart

Cars are ranked by selling price in INR on the x-axis, against their production year on the y-axis, revealing how newer vehicles generally command higher resale values. The chart loads a CSV from a GitHub gist, parses numeric fields, and sorts rows by year descending before rendering. Built with React and D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and a d3-legend color legend, drawing light-blue bars as SVG rects.

Dec 4, 2021

Loading thumbnail…

Practice of D3

This example displays a static green rectangle on an SVG canvas, positioned at coordinates (380, 20) with dimensions 200 by 100 pixels. The visualization loads Amazon Best Selling Books data from a CSV file using D3’s `csv` function, though the data is only logged to the console and not visualized. The SVG is created with `d3.select('body').append('svg')`, using a fixed width of 960 and height of 500, while the script also imports React but does not use it in the rendering process.

Nov 4, 2021

Loading thumbnail…

Scatter Plot: Amazon Books Dataset

This scatter plot shows the relationship between the total number of reviews and the average user rating for Amazon bestselling books from 2009 to 2019. Using D3 v6, the visualization loads data from a CSV file hosted on GitHub, parses the values, and maps them to x and y axes via `d3.scaleLinear`. Circles are rendered as SVG elements, with axis labels added for both the review count and user rating. The dataset originates from a Kaggle collection of Amazon top 50 bestselling books, and the chart uses a simple, uncluttered layout with semi-transparent points to reveal clustering patterns.

Nov 4, 2021

Loading thumbnail…

Car Selling Details with Menu

This interactive scatter plot explores a dataset of car selling details, allowing users to compare quantitative attributes like selling price, mileage, and producing year. Two dropdown menus, built with a reusable `menu` component, control which columns are mapped to the x- and y-axes, triggering animated transitions via `selection.join` and `transition`. The visualization is rendered as SVG using D3 v6 scales, axes, and circles, with data loaded asynchronously from a CSV file.

Nov 4, 2021

Loading thumbnail…

A Bar Chart of the Car Seliing Details

This bar chart displays car selling prices (in millions of INR) against the car’s production year, with each bar’s length representing price and its vertical position corresponding to the year. The visualization uses D3 v5’s `scaleLinear` for the price axis and `scaleBand` for the year categories, with bars sorted by year in descending order. The `axisLeft` and `axisBottom` APIs label the axes, and the chart is rendered as an SVG using React, with data loaded from a CSV via `csv()` and preprocessed to convert prices to millions.

Nov 4, 2021

Loading thumbnail…

Fork of Car Sales Dateset - Adding Brush

This fork of the Car Details dataset adds a brush interaction to a D3 scatter plot, enabling users to filter the x-axis range and dynamically update the visualization. The scatter plot displays mileage (km driven in thousands) against selling price (in million INR), with circles colored by owner category via `d3.scaleOrdinal`. The code uses `d3.brushX` to handle brush selections, which trigger an update function that resets the x-axis domain and transitions circle positions using `transition().duration(1000)`. Data is loaded from a CSV file with `d3.csv`, and the plot is rendered as an SVG.

Oct 24, 2021

Loading thumbnail…

Car Sales Dateset

A D3.js scatter plot visualizes the relationship between mileage and selling price for used cars, with each circle representing a vehicle and its color indicating the number of previous owners. The plot maps kilometers driven on the x-axis and selling price in millions of Indian Rupees on the y-axis. The code uses d3.csv to load car details, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to render tick marks. Circles are appended as SVG elements with fill-opacity to show overlapping points, and the chart fills the browser window.

Oct 13, 2021

Loading thumbnail…

Fork of Scatter Plot with Menus - Heart Disease Dataset

This scatter plot visualizes heart disease patient data from the UCI dataset, mapping age against maximum heart rate achieved. Users can dynamically change both axes via dropdown menus, selecting from quantitative variables like resting blood pressure or categorical options like patient sex. Built with D3 v6, the visualization uses `scaleLinear` and `scalePoint` for axis scaling, with smooth transitions animating circle positions and radii. The plot renders as SVG, with circles colored by patient sex (red for female, blue for male) and axis updates triggered through custom menu components dispatching change events.

Oct 7, 2021

Loading thumbnail…

Reusable Scatter Plot of Heart Disease Dataset

This interactive scatter plot visualizes the Heart Disease UCI dataset from Kaggle, mapping patient age on the x-axis and maximum heart rate achieved on the y-axis, with points colored by sex (red for female, blue for male). Built with D3.js, the visualization uses a reusable scatter plot module that supports dynamic axis updates, animating through different x-axis attributes (age, thalach, restecg) every two seconds using `setInterval` and `transition().duration(1000)`. The SVG renders axes via `axisLeft` and `axisBottom`, with data loaded asynchronously via `csv`.

Oct 7, 2021

Loading thumbnail…

Iterated Work: Heart Disease Scatter Plot

This scatter plot shows the relationship between patient age and maximum heart rate from the Heart Disease UCI dataset, with points colored by gender (crimson for female, dark blue for male). The visualization uses D3 v5 with SVG rendering, employing `d3.axisBottom` and `d3.axisLeft` for gridlined axes, `d3.scaleOrdinal` for the categorical color mapping, and the `d3-legend` library for the color legend. The data is loaded via `d3.csv` from a GitHub gist, with the sex attribute transformed from numeric codes to strings for labeling.

Sep 30, 2021

Loading thumbnail…

Heart Disease Scatter Plot

A scatter plot maps patient age against maximum heart rate achieved, with each circle colored by sex (red for female, blue for male). The visualization uses D3 v6 to load CSV data from a GitHub Gist based on the Heart Disease UCI Kaggle dataset. SVG circles are positioned with d3.scaleLinear scales and axes are rendered via d3.axisLeft and d3.axisBottom. The plot reveals heart rate patterns across age groups and sex differences in the dataset.

Sep 29, 2021

Loading thumbnail…

SVG Animations Using CSS transitions

A single red rectangle with a thick black stroke animates smoothly when hovered. The example uses CSS transitions on the `rect` element, defining a 1000ms transition for all properties. On hover, the fill changes to lightblue and the stroke width increases from 20px to 50px. This demonstrates how SVG elements can leverage standard CSS for declarative animation, with the rectangle placed at (250, 100) within a 960 by 500 viewport.

Sep 27, 2021

Loading thumbnail…

SVG Fundmamentals

This example demonstrates fundamental SVG shapes—a red circle, a blue-stroked light blue rectangle, and a light green triangle—arranged on a 960-by-500 canvas. It functions as a static, hand-coded HTML document using raw SVG elements (`circle`, `rect`, `path`) without external libraries. The path uses the `d` attribute with absolute coordinates (`M`, `L`, `z`) to draw the triangle, and each shape directly specifies its fill, stroke, and stroke-width attributes, showcasing basic vector rendering principles.

Sep 24, 2021

Loading thumbnail…

Car Selling Details Dataset

This example displays basic metadata about a car selling details dataset, showing the file size in kilobytes, the number of rows, and the number of columns. Using d3.csv with D3 v5, it fetches a CSV file from a GitHub gist and reports these statistics on a blue preformatted text element. The code also demonstrates alternative approaches with fetch and async/await, along with a commented-out pyramid-of-doom pattern, all leading to the same summary output.

Sep 9, 2021

Loading thumbnail…

Heart Disease

This visualization displays summary statistics for a heart disease dataset sourced from Kaggle.com, showing the file size in kilobytes, row count, and column count in large blue text. The code uses d3.csv to load the CSV file from a GitHub Gist, then d3.csvFormat to calculate the data size and accesses the data's length and columns properties to extract the metrics. It demonstrates both async/await with fetch and a promise-based d3.csv approach, though only the latter is active in the current version.

Sep 9, 2021

Loading thumbnail…

Netflix Moive and TV shows Dataset

This visualization summarizes the contents of a Netflix movies and TV shows dataset from 2019. It displays the file size in kilobytes, the total number of rows, and the number of columns as plain text in a large blue font. The code uses D3 version 5.11.0 to load the data via `d3.csv` from a remote GitHub Gist URL. After fetching, it calculates the dimensions using `d3.csvFormat` and the dataset’s length and column count, then updates the HTML `pre` element with the results.

Sep 9, 2021