Q

Qingyang Wang Profolio

@wqygod·21 public vizzes

Loading thumbnail…

Final Project

This interactive NBA visualization compares team winning percentages from 2010 to 2022 using two switchable chart types. A line chart displays seasonal win rates for all teams, highlighting a selected team in black, while a scatter plot shows the relationship between a team’s historical average win rate and its performance in a selected season using team logos as points. Users toggle between charts via buttons, select teams or seasons from dropdown menus, and hover over scatter plot logos for detailed tooltips. The visualization is built with D3 v7, using CSV data parsed and aggregated with `csvParse` and `flatRollup`.

Loading thumbnail…

Week 11 final project

This interactive NBA visualization plots team win rates for road and home games on a scatter plot, with team logos as the data points. A dropdown menu lets users switch between three seasons (2015–2017), updating the dataset and point positions. The visualization is built with D3 v7, using `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `selection.join` for declarative SVG updates. When a logo is clicked, the code references a separate scatter plot function, though that feature remains unfinished. Data is drawn from a hardcoded `dataSet` array containing win-rate percentages for nine teams.

Loading thumbnail…

Fork of Line graph

This interactive line graph visualizes the historical win rates of NBA teams from 2010-11 through 2021-22, with the x-axis representing the season year and the y-axis showing each team’s winning percentage. A dropdown menu lets the viewer highlight one of 30 teams, whose line is drawn in red while the others remain black. Built with D3 v7, the visualization uses `scaleTime` and `scaleLinear` for axes, `line` for path generation, and a `join` pattern for updating SVG elements on state changes. The data is loaded from a CSV file parsed with `csvParse`.

Loading thumbnail…

Fork of Keeling Curve

This fork of the Keeling Curve plots atmospheric CO₂ measurements over time as a line chart, with time on the x-axis and average values on the y-axis. The visualization uses d3.line and d3.timeParse to parse and render the data, which comes from NOAA’s Global Monitoring Laboratory. Axes are drawn with axisLeft and axisBottom, and the chart updates dynamically after fetching and parsing the CSV data.

Loading thumbnail…

Final 2

This example presents an interactive world map built with React and D3, using the geoNaturalEarth1 projection and geoPath to render country boundaries from TopoJSON data loaded from the visionscarto-world-atlas. The map displays graticule lines and outlines, with countries colored according to a custom legend that maps percentage ranges to shades of red from the schemeReds palette. The visualization includes hover effects that change country fill colors, and a color legend component created with D3 selections to explain the color scale.

Loading thumbnail…

New Technique

This choropleth map visualizes global COVID-19 vaccination rates, specifically the percentage of each country’s population that is fully vaccinated, using a red sequential color scale. Hovering over a country highlights its border and displays a tooltip with the country’s name and vaccination percentage. The visualization uses the `d3.geoAzimuthalEqualArea` projection, `d3.geoPath`, and `d3.csvParse` to load and render geographic and CSV data, with a custom ordinal color legend built via `d3.scaleOrdinal`. Data comes from a local CSV file and world atlas TopoJSON.

Loading thumbnail…

New Tech: Point On Map

This interactive map displays COVID-19 vaccination rates for each country, with circle size indicating the percentage of the population vaccinated and color depth representing the percentage fully vaccinated. Hovering over a country reveals its name and full vaccination rate. The visualization offers three geographic projections—geoEqualEarth, geoAzimuthalEqualArea, and geoOrthographic—selectable via a dropdown menu. It uses d3.geoPath with TopoJSON world atlas data, d3.csvParse for vaccination data, and a d3-scaleLinear for circle radius.

Loading thumbnail…

week 8 final project

This interactive dashboard presents the historical win rate of the Boston Celtics NBA team across seasons. The visualization begins with a static logo, and clicking it triggers a line chart that plots the winning percentage (W/L%) against the year, using D3's `scaleTime` and `scaleLinear` to map the data. The chart is rendered with `d3.line` and custom axes created via `axisLeft` and `axisBottom`. Data is loaded from a provided CSV file using `d3.csvParse`.

Loading thumbnail…

Final project week 8

This scatterplot compares recent and historical season win rates for nine teams, with the x-axis showing recent win rate and the y-axis showing historical win rate. Each team appears as a colored circle using D3’s `schemeCategory10` palette, positioned via `d3.scaleLinear` scales. The visualization renders through `d3.select` and `.join()` to bind the hardcoded data array, while `d3.axisBottom` and `d3.axisLeft` generate the labeled axes that divide the plot into four performance quadrants.

Loading thumbnail…

Fork of Line graph

This visualization displays a scatter plot of the Boston Celtics' historical win rate by season, with the x-axis representing years and the y-axis representing the winning percentage. After clicking a team logo icon, the view transitions to a line chart. The chart uses D3's `scaleTime`, `scaleLinear`, and `line` generators to render data parsed via `csvParse` from a local CSV file. Axes and labels are created with custom `axisLeft` and `axisBottom` functions.

Loading thumbnail…

Axes & Labels graph

A scatter plot displays the historical win rate of the NBA team Celtics from 1978 to 2017, with the x-axis representing the year and the y-axis the winning percentage. The visualization, built with D3 v7, uses `scaleLinear` and `extent` to map data, while the custom `axis` function leverages `axisLeft` and `axisBottom` for labeled axes. Clicking a red circle triggers data loading from a CSV file and renders the plot using the `scatterPlot` module.

Loading thumbnail…

Line graph

This line graph displays the historical win rate of the Boston Celtics NBA team from 1978 to 2018, with the x-axis representing the season year and the y-axis showing the winning percentage. The visualization uses `d3.scaleTime` and `d3.scaleLinear` to map data from a CSV file, which includes attributes such as Season and W/L% from a public gist source. The chart is rendered with `d3.line` to create the path, along with `d3.axisBottom` and `d3.axisLeft` for the axes, and includes custom labels for clarity.

Loading thumbnail…

First Viz

A scatter plot displays the historical win rate of the Boston Celtics NBA team per season, with the x-axis representing the year and the y-axis the win percentage. The visualization loads data from a local CSV file and parses it using `d3.csvParse`. It renders circular marks via `d3.select().join()` in a customized scatter plot. The code leverages `d3.scaleLinear` and `d3.extent` for scaling the axes, and states are managed with a simple `setState` mechanism.

Loading thumbnail…

Historical NBA Performance

This example visualizes historical win-loss records for every NBA team, showing winning rates over time. The data is fetched as CSV and parsed with `d3.csvParse`. While loading, the state flag triggers a re-render; the code currently outputs the parsed data as raw JSON text in a `pre` element using `d3.select` and `.text()`. The visualization logic is scaffolded through a `viz` function that manages state transitions via a `setState` callback, with the fetch initiated when `state.data` is undefined.

Loading thumbnail…

Make something

This example demonstrates a simple interactive visualization where a circle follows the mouse cursor across the screen, using a unidirectional data flow pattern. The code uses d3-selection’s `select` and `selectAll` with data joins to create and update an SVG element. Mouse movement events trigger a `setState` function that updates an immutable state object with the cursor’s `x` and `y` coordinates, which then re-renders the circle’s `cx` and `cy` attributes. The rendered circle has a fixed radius of 50 pixels, and the SVG fills the entire viewport.

Loading thumbnail…

Make Something

A minimal SVG visualization displays an empty 1000-pixel-wide canvas with a single horizontal axis drawn using d3.axisBottom. The axis maps a linear scale from 0 to 100 across a range of 100 to 800 pixels, rendered as a static tick-marked line. The code uses d3.scaleLinear and d3.axisBottom within a d3-selected SVG container. No data points, marks, or interactive elements appear; the example focuses solely on demonstrating axis construction and positioning.

Loading thumbnail…

Fork of Marks and Channels

A scatterplot maps four data points along x and y axes, each representing paired win rates between two categories. The visualization uses d3.axisBottom and d3.axisLeft to render scales, while d3.scaleLinear maps the 0–100 data range to pixel coordinates within a fixed 400x150 SVG canvas. The chart demonstrates basic mark placement with spatial position channels, though it does not encode additional visual variables like shape or color.

Loading thumbnail…

Transforming data of Historical NBA Performance

This example displays historical average winning percentages for NBA teams, computed from a CSV dataset and rendered as a JSON array. The visualization uses D3 v7’s `flatRollup` and `sum` functions to aggregate win percentages per team across all seasons. After fetching the data via a URL, `csvParse` converts the CSV string into objects. The computed results are output as formatted text inside a `<pre>` element, demonstrating a straightforward data-transformation pipeline without additional chart rendering.

Loading thumbnail…

Big Game Census data

This example displays the Big Game Census dataset as raw JSON, loading it from a CSV file hosted on GitHub via the `fetch` API and parsing it with `csvParse`. The visualization initially fetches the data asynchronously, updates the state to reflect loading, then renders the parsed array of player records inside a `<pre>` element using D3’s selection and `text` methods. The code relies on D3 v7 for DOM manipulation and data binding, with no additional charting or layout techniques applied.

Loading thumbnail…

video game sales

This example displays the raw contents of the video game sales dataset as a JSON-formatted text dump, showing sales figures across regions and user scores for each title. The visualization initially loads data from a remote CSV file hosted on GitHub using `fetch()` and parses it with D3 v7’s `csvParse`. It uses a simple `pre` element bound to the parsed data array through a data join, with the `select`, `join`, and `text` APIs to render the dataset exactly as structured. The state management via `setState` handles the asynchronous loading sequence from `undefined` to `'LOADING'` to the final parsed array.

Loading thumbnail…

Make something, move and click mouse

A small circle follows the mouse as it moves across an SVG canvas. Clicking the mouse drops a larger, randomly colored circle at the click position, with colors selected from a fixed palette of blue, red, yellow, green, and pink. The example uses D3.js v7 selection and event handling methods, including `svg.on('mousemove')` and `svg.on('click')`, to update circle attributes such as `cx`, `cy`, `r`, and `fill`. The SVG is sized to the full browser window.