ktvgs25@gmail.com

@ktvgs·10 public vizzes

7q2

This example visualizes internet user percentages by country as a pie chart, using a dataset loaded from a CSV file. The chart encodes each country’s share of users as an arc slice, with a legend mapping country names to their corresponding percentages. Built with D3.js v7, it uses the `d3.pie` and `d3.arc` functions to compute and draw the arcs, while `d3.scaleOrdinal` assigns categorical colors from `schemeCategory10`. The data is fetched via `d3.csv` and rendered as SVG, with a dynamically generated HTML legend styled with flexbox.

Mar 28, 2024

Loading thumbnail…

7q4

This area chart visualizes life expectancy across countries using the Iris Dataset. The chart employs d3.area() to create a filled region, with a band scale for categorical x-axis positioning and a linear scale for the y-axis. Data is loaded from a CSV file via fetch() and parsed with d3.csvParse(). The SVG rendering uses axis generators d3.axisBottom and d3.axisLeft, with rotated tick labels for readability. The green-filled area emphasizes trends while the fixed y-domain [60, 90] highlights variation.

Mar 28, 2024

Loading thumbnail…

7q3

This example visualizes life expectancy across countries as a line chart, with each country plotted along the horizontal axis and life expectancy on the vertical axis, which is fixed between 60 and 90 years. The chart is rendered as an SVG using D3 v7, fetching CSV data from a GitHub gist. The code uses `d3.csvParse` to load the data, `d3.scaleBand` and `d3.scaleLinear` for positioning, and `d3.line` to draw the path. Axis labels are rotated for readability, and the line is styled in steelblue.

Mar 28, 2024

Loading thumbnail…

i7q1

This interactive scatter plot visualizes country demographics, plotting population against economic, health, and internet-usage metrics from a CSV dataset. The visualization cycles through three x-axis variables—GDP, life expectancy, and internet users—every two seconds, creating an animated comparison of development indicators. Built with a reusable D3.js scatter plot module, the SVG chart uses `scaleLinear`, `axisLeft`, and `axisBottom` APIs to render axes and circles that update dynamically. The code employs the `join` pattern for idempotent updates, and the animation is driven by `setInterval` in the main script, which loads data via `d3.csv` and appends axis labels dynamically.

Mar 28, 2024

Loading thumbnail…

inc7_q1

This example shows seven overlapping circles scattered across a light green background. Each circle has a distinct neon color and varying size and position, with a semi-transparent opacity that creates visual blending where they intersect. The code uses D3's `select` and data join pattern to bind the array of circle objects to SVG elements, setting their `cx`, `cy`, `r`, and `fill` attributes via method chaining. Dimensions are taken from the container's client width and height to make the visualization responsive.

Mar 28, 2024

Loading thumbnail…

Fork of ice5.2

This example visualizes a scatter plot of housing data, with house size on the x-axis and price on the y-axis. Each circle represents a property. The visualization uses the D3.js library, specifically `d3.csv` for data loading, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` for axis rendering. The CSV data is fetched from a remote gist URL. The SVG rendering approach is employed, with circles appended to the SVG container. The code also applies margin conventions to structure the chart layout.

Mar 21, 2024

Loading thumbnail…

ice5.1

This bar chart compares house prices across different house sizes, with teal bars representing each category and rotated labels on the x-axis for readability. The visualization uses D3 v7 to load CSV data from a GitHub gist, scales the data with `d3.scaleBand` and `d3.scaleLinear`, and renders the chart as SVG. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while the plot area measures 900 by 380 pixels with margins. The code directly binds the data to rectangle elements for each bar.

Mar 21, 2024

Loading thumbnail…

ice5.1

This bar chart shows how long it takes to beat various video games, with each game represented by a steelblue bar that turns orange on hover. The chart uses d3.csv to load external game data, then d3.scaleBand and d3.scaleLinear to map game names and hours onto the SVG canvas. Axes are generated with d3.axisBottom and d3.axisLeft, while rotated labels and explicit axis titles clarify the game names and the “HoursToBeat” measurement. The visualization is built entirely with D3 v7 and rendered as SVG using a custom HTML/CSS layout.

Mar 21, 2024

Loading thumbnail…

Fork of HTML Starter

This example demonstrates loading and parsing a CSV dataset using D3 v7, displaying summary statistics about the data in a styled HTML page. It shows how to fetch external data with `d3.csv` and present metadata such as file size, row count, and column count in a `<pre>` element. The visualization also embeds an SVG illustration of a simple house, rendered with basic shapes like rectangles and a polygon. The code uses D3's promise-based loading API and dynamically updates the DOM via `textContent`, while the accompanying CSS styles the header and metadata block.

Mar 6, 2024

Loading thumbnail…

Fork of Fork of Create a face with d3.js!

This example creates a simple yellow chick face using SVG shapes, including circles for the head and eyes and a polygon for the beak. Built with d3.v7, it imports `select` and `arc` from the D3 library to manipulate the SVG elements and generate an arc path for the mouth. The code loads D3 via UNPKG and uses local ES6 modules, with all geometry positioned relative to the center of a 960x500 canvas.

Feb 28, 2024