Michael Biancardi

@Silamoth·33 public vizzes

Project Task 6

This scatterplot compares PM2.5 and NO2 AQI values from a pollution dataset, with each blue circle representing a data point. The visualization uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map values to SVG coordinates and render axes. Data is loaded via `d3.csv` from a GitHub gist, and circles are drawn with `selectAll().join()`. Green axis labels and a red title style the chart, which fills the browser window.

Jul 23, 2023

Loading thumbnail…

Project Task 5

This scatterplot compares PM2.5 and CO AQI values from a pollution population dataset, plotting each data point as a blue circle. The chart reveals the relationship between these two air quality metrics. The visualization is rendered as an SVG using D3 v5, loading data via `d3.csv` and scaling axes with `d3.scaleLinear`. It uses `d3.extent` for domain calculation and `d3.axisLeft` and `d3.axisBottom` to draw the axes, with custom text labels for each axis.

Jul 23, 2023

Loading thumbnail…

Project Task 4

This scatterplot visualizes the relationship between PM2.5 and Ozone AQI values from a pollution population dataset. It renders blue circles for each data point, with axes labeled and styled using D3's `select`, `append`, `scaleLinear`, `axisLeft`, and `axisBottom`. The SVG is sized to the window dimensions, and the chart displays axis labels rotated for the vertical orientation. The code loads data via `d3.csv` from a GitHub gist, then maps the parsed values to x and y coordinates using linear scales.

Jul 23, 2023

Loading thumbnail…

Project Task 1

This example shows average PM2.5 AQI values for various countries as a horizontal bar chart, with each country’s bar length proportional to its pollution level. The visualization uses React for component structure and D3 v5’s `scaleBand` and `scaleLinear` for positioning, while `csv` loads pollution data from a GitHub-hosted CSV. The SVG bars are rendered as `rect` elements, with axes built from `AxisBottom` and `AxisLeft` components that call `xScale.ticks()` and map over `yScale.domain()`. Tooltips are provided via SVG `<title>` elements.

Jul 23, 2023

Loading thumbnail…

Assignment 2 Question 7 Part 2

This interactive social network graph visualizes a friendship network of 11 people using data from graph.json. It renders the network as blue circular nodes with black borders and directed green arrow markers on blue links, using a physics-based D3 force simulation with d3.forceSimulation, forceLink, forceManyBody, forceCollide, and forceCenter. The visualization loads D3 v6 via UNPKG, uses SVG rendering, and supports drag-and-drop repositioning of nodes through d3.drag, with mouseover highlighting via the nodeHover CSS class.

Jul 22, 2023

Loading thumbnail…

Assignment 2 Question 7 Part 1

This interactive tree diagram visualizes a hierarchical classification of organisms, from the root “Organisms” down to categories like Eukaryotes, Prokaryotes, and their children. Built with D3 v3, it renders nodes and links as SVG elements with collapsible branches, color-coded types, and tooltips on hover. The layout uses `d3.layout.tree` for positioning, while drag, zoom, and click behaviors support navigation. Data comes from a static `Tree.json` file, and animation transitions nodes when the tree updates.

Jul 21, 2023

Loading thumbnail…

Assignment 2 Question 6 Part 2

This example displays a map of the United States using a natural Earth projection fitted to the country’s geometry. It loads world atlas data from a CDN, extracts the U.S. feature via TopoJSON, and renders it as an SVG path with d3.geoPath. The code uses d3.json and d3.geoNaturalEarth1 to project and size the map to 960 by 500 pixels.

Jul 21, 2023

Loading thumbnail…

Assignment 2 Question 6 Part 1

This example displays a world map using a natural Earth projection, with countries rendered as light green polygons outlined in indigo on a sky-blue sphere background. It demonstrates zoom and pan interactions via d3.zoom, applying transform events to the SVG group. The map is generated from TopoJSON data loaded from the world-atlas dataset, with geographic paths computed using d3.geoPath and the d3.geoNaturalEarth1 projection. Hovering over a country changes its fill color to maroon.

Jul 21, 2023

Loading thumbnail…

Activity 8 Question 5

This example displays an interactive world map rendered as SVG using D3 v5 and TopoJSON. It loads country boundaries from the world-atlas dataset and projects them with a D3 geoEquirectangular projection and geoPath generator. The map supports pan and zoom through a D3 zoom behavior applied to the SVG element. Countries appear in light green with an indigo stroke, and hover states change their fill to maroon via CSS.

Jul 21, 2023

Loading thumbnail…

Assignment 2 Question 5

This visualization shows how insurance charges relate to age, BMI, and sex using a scatter plot. The chart animates every 5 seconds, cycling its x-axis between patient age, insurance charges, and BMI, while the y-axis consistently displays insurance charges. Data points are color-coded blue for males and red for females. Built with D3 version 6.7.0, it uses `scaleLinear`, `axisLeft`, and `axisBottom` from the library and loads data from a local CSV file, rendering as an animated SVG.

Jul 21, 2023

Loading thumbnail…

Assignment 2 Question 4

A bubble chart maps video game genres by their average user and critic scores, with bubble size representing global sales in millions. Genres are color-coded via a scale inferred from the data, and hovering reveals a tooltip with the genre name. A legend shows reference sales values and a color key for genre identification. The visualization uses D3 v7 with SVG and CSS styling, employing scales like `d3.scaleLinear` and `d3.scaleOrdinal` with `d3.interpolateTurbo`, and includes animation through CSS transitions on opacity and stroke width.

Jul 21, 2023

Loading thumbnail…

Activity 7 Task 5

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position reflects horsepower on the x-axis and torque on the y-axis, while its radius encodes highway MPG, with color distinguishing car brands. Hovering reveals a tooltip showing the make. The visualization uses D3 v7’s `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.csv` to load data, with a legend for MPG values and a categorical color scale. SVG rendering and CSS transitions enhance interactivity.

Jul 21, 2023

Loading thumbnail…

Assignment 2 Question 3

This scatterplot displays the relationship between age and insurance charges, with points colored by sex (red for male, blue for female) to reveal patterns in medical costs across age groups. The visualization loads CSV data from a Kaggle insurance dataset using d3.csv, maps age to the x-axis and charges to the y-axis via d3.scaleLinear, and renders points as SVG circles. Axes are generated with d3.axisLeft and d3.axisBottom, while the full layout adapts to the browser window dimensions.

Jul 21, 2023

Loading thumbnail…

Activity 7 Task 3

This scatter plot visualizes the Iris dataset, showing petal length against petal width for three iris species. Each point is color-coded by species: sky blue for setosa, light green for versicolor, and orange for virginica. The visualization uses D3 v5, loading data via `d3.csv`, scaling axes with `d3.scaleLinear`, and rendering SVG circles with `d3.select`. Axis labels are added using D3's `axisLeft` and `axisBottom` functions, with colored text labels for clarity.

Jul 21, 2023

Loading thumbnail…

Assignment 2 Question 2

This example displays a stacked bar chart comparing average user and critic video game ratings across twelve genres, based on data from a Kaggle dataset. It uses D3 v7 with an SVG rendering approach, leveraging `d3.stack()` to compose the two rating series per genre and `d3.scaleOrdinal` for color assignment. A custom tooltip, implemented with D3 event handlers, reveals exact scores on mouseover, while the chart includes labeled axes, a legend, and gridlines created via `d3.axisBottom`.

Jul 21, 2023

Loading thumbnail…

Assignment 2 Question 1

This example visualizes the average salary by age using a histogram created from a CSV dataset. It loads D3 v7 from UNPKG and employs d3.select, d3.csv, d3.scaleLinear, d3.scaleTime, d3.axisLeft, d3.axisBottom, d3.extent, d3.bin, and d3.sum to bin the data by age, compute average salaries, and render an SVG chart with labeled axes and orange rectangles.

Jul 19, 2023

Loading thumbnail…

BMI By Age

This example visualizes the average body mass index (BMI) across different ages using a bin-based bar chart. The chart aggregates individual BMI values into age bins and displays the mean BMI per bin, with axes labeled "Age" and "Average Body Mass Index." The code loads data from a CSV file and uses d3.bin to create the histogram bins, along with d3.scaleLinear, d3.axisBottom, and d3.axisLeft to construct the scales and axes. SVG rectangles render the bars, with orange fills and white strokes as defined in the stylesheet.

Jul 19, 2023

Loading thumbnail…

Activity 7 Task 1.3

A horizontal bar chart displays the top 20 countries by 2020 population, using a linear scale for population values and a band scale for country names. The visualization is built with React and D3 v5, loading CSV data via `d3.csv` and rendering SVG rectangles. Axes are generated with custom components using `scaleBand` and `scaleLinear` ticks, while tooltips are provided through SVG `<title>` elements.

Jul 17, 2023

Loading thumbnail…

Activity 8 Question 6

This example presents a collapsible tree visualization of muscle car models, showing a hierarchy from “Muscle Cars” down to specific variants like the Hellcat and SRT. It uses D3 v3’s `d3.layout.tree` to compute node positions, with SVG shapes for nodes and links, and includes animations for expanding and collapsing branches on click. The code also implements tooltips and color-coded node types, with zoom and drag behavior via `d3.behavior.zoom`. Data is loaded from a static JSON file, and the rendering leverages SVG elements and jQuery for tooltip visibility.

Jul 17, 2023

Loading thumbnail…

Activity 8 Question 4

This example visualizes the cost of sales over time from 2000 to 2013, combining a smooth line chart with a filled area chart beneath it. The SVG rendering uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to draw the paths, while `axisBottom` and `axisLeft` generate gridlines with red tick labels. The data is loaded as CSV from a GitHub gist, with the year parsed into a Date object and cost coerced to a number.

Jul 17, 2023

Loading thumbnail…

Activity 8 Question 3

This example shows the cost of sales from 2000 to 2013 as a single line chart, with red axis labels for “Year” and “Cost” and a thick light-green stroke. It loads data from a CSV file and renders an SVG using D3 v7, applying `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The line is drawn with `d3.line`, while axes are generated via `d3.axisBottom` and `d3.axisLeft`.

Jul 17, 2023

Loading thumbnail…

Activvity 8 Question 6 Part 2

This example visualizes a social network as an interactive force-directed graph, showing friend connections between ten people. Each person appears as a green circle with their name, and blue lines with arrowheads represent relationships, with line thickness indicating connection strength. Users can drag nodes to explore the network layout. The visualization uses D3 v6’s `forceSimulation` with link, charge, collision, and center forces, and renders all elements as SVG with mouseover highlight effects.

Jul 17, 2023

Loading thumbnail…

Activity 8 Question 5 Part 2

This example visualizes India as a single highlighted geographic region, rendered on an SVG canvas using a Mercator projection fitted to the country’s boundaries. The code loads world country data from the world-atlas TopoJSON dataset via `d3.json`, extracts India’s geometry using `topojson.feature`, and draws it with `d3.geoPath` and `d3.geoMercator`. D3 v5 and the TopoJSON client library are loaded from CDNs, and the map is statically displayed without interaction or additional styling.

Jul 10, 2023

Loading thumbnail…

Activity 8 Question 2

A pie chart displays the count of students from each major at UNT, with the data loaded from a remote CSV file and rendered as SVG paths using D3 v5. Each slice is colored via `d3.scaleOrdinal`, and labels show values in thousands formatted with `d3.format` through the `.4~g` specifier. Legends, rendered as appended rectangles and text, map majors to their corresponding colors and totals. The chart uses `d3.pie` for arc generation and `d3.arc` for path construction, with a fixed outer radius of 175 pixels.

Jul 5, 2023

Loading thumbnail…

Activity 8 Question 1

This animated scatterplot displays the Iris dataset, showing petal and sepal measurements as colored circles representing species. Using D3 version 6.7.0 loaded via UNPKG, the visualization cycles through four different axis assignments every five seconds, alternating which flower dimensions are plotted. The code imports `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from D3, along with a custom `scatterPlot` module. Rendered as an SVG animation, it includes a color legend and dynamically updates axis labels to reflect the current measurement pair.

Jul 5, 2023

Loading thumbnail…

Activity 7 Task 4

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with each species distinguished by a unique symbol shape and a corresponding legend. The code uses D3 v7 modules including `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, `symbolsFill`, and `symbol` to render marks. Axes are constructed via modular `axisLeft` and `axisBottom` functions, while data is loaded asynchronously with `csvParse` from a GitHub-hosted CSV file.

Jul 3, 2023

Loading thumbnail…

Activity 7 Task 2

This example visualizes the distribution of movie ratings across six genres using a stacked horizontal bar chart. Each bar represents a genre, divided into five rating categories from "below 5.0" to "above 8.5," with segment lengths proportional to the percentage of movies in each category. The chart includes a color-coded legend, axis labels, and hover tooltips that display the exact percentage for each rating segment. The visualization is built with D3 v7, using `d3.csv` to load the data, `d3.stack` to process the rating categories, and `d3.scaleBand` and `d3.scaleLinear` for the axes. SVG rendering is used, with interactive mouse events for tooltips.

Jun 28, 2023

Loading thumbnail…

Activity 7 Task 1

This bar chart visualizes the population of 30 countries in 2020, with countries listed along the vertical axis and horizontal bars representing population values. The visualization uses React components to render SVG elements, with D3 v5 utilities such as `scaleBand` and `scaleLinear` for positioning, and `d3.csv` for loading data from a GitHub-hosted dataset. Custom reusable axis and mark components generate tick marks and rectangles with tooltips, while a formatted axis converts values from billions to abbreviations.

Jun 28, 2023

Loading thumbnail…

Activity 7 Task 1.2

This bar chart visualizes the population of ten countries in 2010, using a horizontal layout where encoded bars extend rightward from a common baseline. Built with React and D3 v5, it renders vector graphics as SVG components, importing separate ES6 modules for axes and marks. The chart reads data from a remote CSV file, uses a linear scale for the x-axis with a custom tick formatter that converts gigabytes to billions, and a band scale for categorical country labels. Each bar includes a native SVG tooltip displaying the formatted population value on hover.

Jun 28, 2023

Loading thumbnail…

Assignment 1

This example loads a CSV dataset of best-selling PS4 games and displays the first ten rows as JSON, then appends summary statistics about the total number of games, unique developers, publishers, and genre combinations to the page. The code uses D3 v7's `select` and `csv` to fetch and parse the data, then manipulates the DOM by appending `pre` and `p` elements to the body and a summary section. The visualization renders as static text in an SVG-backed HTML page styled with a CornflowerBlue background.

Jun 26, 2023

Loading thumbnail…

ICE 6

This example demonstrates a full-bleed, static SVG visualization of a large encoded raster image, likely generated from a data-driven process. The page loads D3 from a CDN and imports both D3 utilities and a custom ES6 module to display a message. It fetches a CSV file from a GitHub gist and prints the first ten rows to the body. The final output is a high-resolution SVG pattern that embeds the raster as a base64-encoded JPEG, combining WebGL-based rendering output with Vue framework integration.

Jun 14, 2023

Loading thumbnail…

Transforming Data

This example loads the Iris flower dataset from a local CSV file and computes the average sepal length for each species using D3’s `flatRollup` and `sum` functions. The resulting summary is displayed as a JSON string inside a `pre` element. The code demonstrates local ES6 module imports, fetching and parsing data with `csvParse`, and state management through a `setState` callback that triggers re-rendering. D3 v7 is loaded via UNPKG.

Jun 14, 2023

Loading thumbnail…

5 Buddhas

A field of small ellipses scatters across a black background, while a white line-drawn Buddha portrait dominates the frame, repeated five times. The React app generates hundreds of overlapping ellipses with randomized positions, sizes, colors, and rotations using nested `A.map` loops and `Math.random()`. The Buddha image is rendered as SVG paths, imported directly as path data within the component, and transformed via SVG `translate` and `scale` attributes.

Jun 7, 2023