kenny-wq

@kenny-wq·17 public vizzes

avg_traffic_county_roadstype

This stacked bar chart shows the average annual traffic count for Allegany County, New York, broken down by road type from 1977 onward. Using D3 v6 within a React framework, the visualization renders as SVG rectangles, with the `d3.stack` API grouping data by year and road type (0, 1, 2). The chart employs `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` for axes and color encoding, with data loaded from a CSV file via `d3.csv`.

Dec 20, 2023

Loading thumbnail…

hw6_me

This visualization shows a ThemeRiver chart tracking median house sale prices over time, segmented by property type and bedroom count. Seven categories—ranging from two-bedroom houses to three-bedroom units—are displayed as colored streams that flow and stack vertically. The chart uses D3 v6 with `d3.stack` and `stackOffsetSilhouette` to create the silhouette layout, while `d3.scalePoint` and `d3.area` handle the temporal axis and stream paths. Data comes from a CSV file containing quarterly sale prices, with each category assigned a distinct color from a ordinal scale.

Dec 20, 2023

Loading thumbnail…

NewYorkCounty

This example shows a choropleth-style interactive map of New York County and its surrounding counties, rendered with SVG paths. Users select a US state from a dropdown menu, which triggers an animation as the map re-centers and re-scales to fit the selected state using `d3.geoIdentity` and `d3.geoPath`. Hovering over a county highlights it in orange and displays its name in a tooltip. The visualization uses `topojson.feature` to parse US county and state boundaries from the `us-10m.v2` TopoJSON file, with data from `county_data.tsv`.

Dec 3, 2023

Loading thumbnail…

Spotify

This interactive scatterplot explores correlations among numeric audio features and metadata for Spotify tracks. Users select any two variables from dropdown menus to compare, with the Spearman correlation coefficient calculated from a sampled subset and displayed below the chart. The visualization is built with D3 v5, using `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll('circle')`, rendering as SVG. Data comes from a CSV of Spotify tracks, with points styled in translucent blue to reveal density.

Nov 29, 2023

Loading thumbnail…

hw3

This visualization shows a correlation matrix for abalone measurements, split by sex (male, female, or infant) via clickable buttons. The upper triangle displays correlation coefficients as colored text, while the lower triangle uses scaled circles, with diagonal labels identifying each variable. The code uses d3.csvParse, d3.scalePoint, d3.scaleSqrt, and d3.scaleLinear, along with the jeezy library’s jz.arr.correlationMatrix to compute correlations. Data is loaded asynchronously via d3.text from a remote CSV, and the SVG is rendered in React with Bootstrap-styled controls.

Nov 18, 2023

Loading thumbnail…

myfirstd3

This example visualizes the Iris dataset as an interactive scatter plot, allowing users to select which quantitative columns appear on the X and Y axes via two dropdown menus. The chart updates dynamically, with each point colored by the iris species (setosa, versicolor, or virginica) and axis labels reflecting the chosen variables. The visualization uses D3 v5 APIs such as `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.extent` to build the axes and scales, while data is loaded from a CSV file using `d3.csv`.

Nov 13, 2023

Loading thumbnail…

hw8_again

This example shows a Sankey diagram of car evaluation data, displaying proportional relationships between attributes like buying price, maintenance cost, doors, persons, luggage boot, and safety. The diagram uses a React-based D3 v4 implementation with the custom `d3.sankey` layout, where nodes can be dragged vertically within their columns to explore connections. The code reads a CSV dataset from a remote URL, calculates ratio-based link values between attribute pairs, and renders the visualization as an SVG with draggable nodes and hover tooltips showing node names and values.

Nov 11, 2023

Loading thumbnail…

hw8_sankey

This example creates a Sankey diagram from car evaluation data, showing the proportional relationships between categorical attributes such as buying price, maintenance cost, doors, persons, luggage boot, and safety. Each node represents a specific attribute value, and links between nodes encode the conditional ratio of one value occurring given another across all possible column pairs. The code loads data from a remote CSV, parses it with `d3.csvParse`, and builds nodes and links programmatically before passing them to the `render` function. Although the Sankey layout is not executed, the visualization relies on the D3 v5 library and the external sankey.js plugin.

Nov 2, 2023

Loading thumbnail…

hw7

This visualization presents six horizon charts displaying daily average concentrations of air pollutants (SO2, NO2, O3, CO, PM10, and PM2.5) over time. Using D3.js v6, the chart aggregates the data by day and renders each pollutant as a separate SVG canvas. The horizon chart technique overlays multiple bands with a grayscale color scheme to compactly show data variations. The implementation uses scalePoint for the time axis and scaleLinear for the value axis, with the data loaded from a CSV file containing environmental monitoring measurements.

Nov 1, 2023

Loading thumbnail…

hw7_test

This visualization presents a horizon chart comparing daily air quality measurements across multiple pollutants (SO₂, NO₂, O₃, CO, PM10, PM25) over time for individual monitoring stations. The data comes from a local CSV file, and the chart uses a time-series x-axis with each pollutant group rendered as its own horizon band. Built with D3 v6, the implementation relies on `scaleUtc`, `scaleLinear`, `area`, `clipPath`, and `axisTop` to stack three overlaid area bands per row, using color density to encode magnitude. The SVG output is styled with Bootstrap and custom CSS.

Oct 31, 2023

Loading thumbnail…

hw7

This example shows a horizon chart displaying SO2 measurements over time for multiple monitoring addresses, with each horizontal band representing a different location and the color intensity indicating the measurement magnitude. The visualization uses D3 v6 to build the chart, leveraging d3.area, d3.scalePoint, and custom clipping paths to create the layered horizon effect. Data is loaded from a CSV file and preprocessed in JavaScript before being passed to the chart function. The SVG rendering approach employs reusable clip paths and color bands to show data beyond the base scale.

Oct 27, 2023

Loading thumbnail…

hw6

This visualization shows quarterly median property prices for houses with 2 to 5 bedrooms from 2007 to 2019, using a stacked area chart to compare price trends across these groups. The chart uses D3 v6’s `csv` loader to fetch data from an external URL, `scaleLinear` for the axes, and `stack` with `stackOffsetSilhouette` for layering, though the offset is commented out. Each bedroom category is rendered as a distinct SVG path via `d3.area`, with an ordinal color scale distinguishing the series. The y-axis displays a fixed range of -100,000 to 100,000, and the x-axis uses five ticks for readability.

Oct 24, 2023

Loading thumbnail…

test of hw6_me

This visualization displays the median sale price of houses over time, segmented by the number of bedrooms. The chart uses a silhouette-style stacked area chart to show price trends for each category. The data is loaded from a remote CSV file using the `d3.csv` function, and the `MA` values are parsed as numbers. The visualization uses `d3.scalePoint` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.group` to nest the data by date. The chart is rendered as an SVG using `d3.area` paths.

Oct 24, 2023

Loading thumbnail…

hw2

This interactive visualization displays the Iris dataset using a parallel coordinate plot, with each flower species colored distinctly (red, blue, and yellow). Users can reorder the four coordinate axes—sepal length, sepal width, petal length, and petal width—by entering numbers 1 through 4 and clicking a button, which triggers a re-render of the SVG paths. The code uses d3.csv to load data, d3.scaleLinear for y-axes, d3.scalePoint for the x-axis, and d3.axisLeft to draw the coordinate scales.

Oct 18, 2023

Loading thumbnail…

hw5

This stacked bar chart visualizes the performance of the top 200 universities across five THE World University Ranking criteria: teaching, research, citations, industry income, and international outlook. Interactive buttons allow sorting universities ascending or descending by any metric, reordering the bars accordingly. The visualization uses D3 v6 APIs including `d3.csv`, `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to render SVG rectangles. Data comes from the data.csv file, filtered to the first 200 ranked entries where overall scores are numeric.

Oct 16, 2023

Loading thumbnail…

hw5

This example visualizes a stacked bar chart comparing nitrogen levels across four plant groups under normal and stress conditions. Using D3 v6, it loads CSV data with `d3.csv`, sorts groups by descending nitrogen values, and applies a stacked layout via the `d3.stack` API. Bars are rendered as SVG rectangles with ordinal color scaling, while axes use `scaleBand` and `scaleLinear` with bottom and left axis generators. Data is parsed to numeric values before rendering.

Oct 16, 2023

Loading thumbnail…

hw4

This interactive scatter plot matrix lets users brush rectangular regions across any pair of dimensions to filter the displayed data points. The visualization initially shows all observations as colored circles across every pairwise combination of variables, with histograms along the diagonal for each dimension. Users can drag to create a brush selection in any plot, which immediately highlights matching points in all other plots while dimming non-selected ones. Built with D3 v6, the example uses `d3.brush`, `d3.cross`, `d3.scaleLinear`, and SVG rendering, with colors mapped via `d3.scaleOrdinal` and `schemeCategory10`, using the v3 dataset.

Oct 8, 2023