kwmcclintick

@kwmcclintick·9 public vizzes

Untitled

This interactive visualization explores the U.S. data science job market by comparing the semantic similarity of job descriptions and positions. It presents two t-SNE scatter plots—one for raw position titles and one for job descriptions—where each point represents a job posting, colored by job category (e.g., Data Analyst, Data Scientist). A confusion matrix shows classification accuracy from a bagging ensemble of linear SVM classifiers, with cell color intensity indicating the proportion of predictions. The React-based interface uses D3.js (`scaleLinear`, `scaleOrdinal`) for scales and rendering, with SVG circles. Hovering over a legend category highlights that class's points across all views and fades others (opacity 0.2), enabling cross-referencing of how descriptions map to titles. Data originates from a Kaggle dataset of 7,000 Indeed job postings.

Dec 10, 2021

Loading thumbnail…

Brush Example of Students Performance in Exams Scatter Plot

This scatter plot visualizes the relationship between reading and math scores from the Students Performance in Exams dataset, sourced from Kaggle. It uses d3.csv to load data and d3.scaleLinear for axes, rendering circles as SVG marks. Points are colored by test preparation status via d3.scaleOrdinal, with cyan for completed and purple for none. A d3.brush() interaction lets users select a region, recoloring enclosed points red to highlight subsets.

Oct 26, 2021

Loading thumbnail…

Final Project

A scatter plot maps thousands of U.S. data scientist job postings onto a two-dimensional plane using t-SNE coordinates. Each point represents a job, colored by its aggregated position category, with tooltips revealing the raw job title. The visualization uses React with D3.js v5 to load CSV data from a GitHub gist, and Vega-Lite API to render the chart, applying a custom configuration for axis styling and tooltips.

Oct 25, 2021

Loading thumbnail…

Interactive Amazon Top 50 Bestselling Books 2009 - 2019

This interactive scatter plot visualizes Amazon’s top 50 bestselling books from 2009 to 2019, plotting variables like average user rating, number of reviews, year published, and price against each other. Dropdown menus let users select which quantitative attributes appear on the x- and y-axes, with animated transitions between selections. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` to render SVG circles and update axes smoothly. Data comes from a Kaggle dataset loaded via a gist.

Oct 4, 2021

Loading thumbnail…

Amazon Top 50 Bestselling Books 2009 - 2019 Example Bar Chart

This bar chart displays the highest price among Amazon’s top 50 bestselling books for each year from 2009 to 2019. The x-axis represents book price in dollars, while the y-axis lists years. The data comes from a CSV file sourced from Kaggle. The visualization is built with D3 v5, using `scaleLinear` and `scaleBand` for axes and `axisBottom` and `axisLeft` for rendering ticks. Bars are drawn as SVG rectangles, with a title and axis label added as SVG text elements.

Sep 24, 2021

Loading thumbnail…

Amazon Top 50 Bestselling Books 2009 - 2019 Example Scatter Plot

This scatter plot visualizes the relationship between book price and publication year for Amazon’s Top 50 Bestselling Books from 2009 to 2019, using a dataset loaded from a gist and Kaggle. It displays each book as a circle, with the year on the x-axis and price on the y-axis. Built with D3 v6, the visualization uses `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG circles and axes. The chart includes a title and axis labels, with point radius fixed at 3 pixels.

Sep 24, 2021

Loading thumbnail…

Data Scientist Job Market in the U.S. Example Scatter Plot

This example shows the number of reviews per job posting for data scientist positions in Boston, plotting the same continuous value on both axes to create a scatter plot of the dataset’s sole numeric field. The visualization loads CSV data from the author’s GitHub gist (sourced from Kaggle) and renders it as SVG circles. The code uses D3 v6 APIs such as `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to parse the data, compute scales, and draw the axes, with circles positioned using the `x` and `y` scales.

Sep 24, 2021

Loading thumbnail…

SVG Fundamentals Demonstration

This demo shows raw SVG path commands and gradient fills without a data source, using only the SVG element and its built-in path syntax. Three stroked paths use relative and absolute coordinates (M, L, l) to draw diagonal lines with varying thickness and color. A nested `<svg>` contains a linearGradient definition applied to an ellipse, demonstrating how gradients can be referenced via `url(#grad1)`. The example serves purely as a technical reference for SVG shape construction and styling.

Sep 24, 2021

Loading thumbnail…

Students Performance in Exams Example Scatter Plot

This example visualizes the relationship between reading and math scores for students, using a scatter plot where each point represents an individual student's performance. The SVG markup is rendered with D3 v6, employing `scaleLinear` and `extent` to map data values to pixel coordinates, with `axisLeft` and `axisBottom` providing labeled scales. Data loads asynchronously from a CSV file sourced from Kaggle, and the plot includes custom text labels for axes and a title. Point radius is fixed at three pixels, and axes display scores from zero to one hundred.

Sep 24, 2021