BlueT

MapTest

World Map Viz 8

ForkForNetWork_SDV

Fork for plotting tree

pie for 7 SDV

This example visualizes global electric vehicle stock values for 2012 as a pie chart, with each region labeled directly on the arcs and a legend displaying region names alongside their numeric values. The chart is rendered as an SVG using D3 v7, employing `d3.pie`, `d3.arc`, `d3.scaleOrdinal` with `schemeCategory10`, and `d3.csv` to load the data from a GitHub gist. The visualization uses `d3.select` to append the pie paths and text labels, with a light blue background and dark blue title specified in the CSS.

Reusable for Assignment 7

This animated scatter plot uses a reusable D3 function to visualize product data, cycling through three quantitative x-axis variables—discount, unit cost, and unit price—against order quantity. The SVG visualization updates every two seconds, smoothly re-scaling the x-axis as new data is plotted. Built with D3 v6, it leverages `scaleLinear`, `extent`, and `axisBottom` for axes, while circles are rendered via data joins. Data is loaded from a CSV file using `csv` and parsed to convert numeric fields. The scatter plot is fully responsive, filling the entire viewport with configurable margins and point radius.

Fork for area SDV 7

This example visualizes the growth of electric vehicle charging points in Germany over time, using a combination of an area chart and a line overlay to emphasize the upward trend. The visualization loads CSV data from a remote gist, parses years and numeric values, and renders them via D3 v7’s `scaleTime`, `scaleLinear`, `area()`, and `line()` APIs. The SVG output includes axes, labels, and a light blue background styled with CSS. The chart highlights the progression of charging infrastructure, with the area fill and black line both encoding the same quantitative values across the temporal domain.

line for SDV 7

This visualization displays US EV sales over time, using a single line to trace annual values and including projected data points. The chart is rendered with D3 v7, leveraging `d3.line` to construct the path and `d3.scaleLinear` for both axes. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with axes formatted using `d3.axisBottom` and `d3.axisLeft`. The SVG canvas is styled with a light blue background, and axis labels are added to clarify the year and value dimensions.

SDV_assignt_fork

This example shows a static nighttime seascape with a moon, clouds, an island with a tree, a star, and a fish, all composed from basic geometric shapes. Using D3.js v5’s `select` and SVG element constructors like `append` and `attr`, it draws rectangles, circles, ellipses, lines, and paths directly onto an SVG canvas. The scene is built entirely through DOM manipulation with hardcoded coordinates and fill colors, with no data-driven layout or animation.

Fork for SDV assn 6 M&K

This scatter plot visualizes the relationship between how often a character is picked and their total professional wins, with each circle representing a data point. The code loads CSV data from a GitHub gist using `d3.csv` and renders the chart as SVG via d3.v7. It uses `d3.scaleLinear` for both axes, appends circles with a fixed radius of 5 pixels, and styles them with a teal fill. Axis labels, a centered title, and rotated y-axis text are added using `svg.append`, with all margins and dimensions explicitly defined.

Fork for SDV assn 6 M&K

This example visualizes the distribution of hero primary attributes by attack type, using grouped horizontal bars to compare counts of melee and ranged attacks across different attribute categories. The chart is rendered as an SVG via React and D3 v7, with data loaded from a CSV file and processed using `d3.group` to nest attack type counts within each primary attribute. Bars are colored using `d3.scaleOrdinal` with a light blue for melee and dark blue for ranged, while value labels are placed at the end of each bar. The visualization uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis, with hover logging enabled for debugging.

Fork for assignment 5

This example uses D3 v7 to load and summarize a CSV dataset of hero statistics, displaying computed values like row count, column count, file size, and the hero with the highest win rate. It renders a simple trophy icon using SVG shapes appended via `d3.select` and `append`. The visualization pairs text-based data insights with a static, decorative SVG graphic, both contained within a flexbox-styled page.