Skip to main content
Log in
L

Larry Johnson

@johnsonlarryl·16 public vizzes

Loading thumbnail…

Fork of Activity_7_1_Question_1

This pie chart visualizes the market capitalization of S&P 500 companies as proportional slices, with each slice labeled by ticker symbol and value in billions. The code loads CSV data from a GitHub gist, converts market cap values to numbers, and uses `d3.pie` and `d3.arc` to generate the chart in SVG. A color scale assigns categories from `d3.schemeCategory10`, and a legend lists company names alongside their corresponding colors.

Nov 7, 2024
Loading thumbnail…

Fork of Fork of Activity_7_1_Question_2

This chart displays the historical stock prices of Microsoft and Apple as overlaid semi-transparent area charts, using a time-series x-axis and a linear price y-axis. The visualization loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and renders the chart as SVG via the D3.js v7 library. It uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.area` for path generation, and `d3.axisBottom` and `d3.axisLeft` for ticks. Quarterly date ticks are formatted as month-year, with a legend identifying each company.

Nov 7, 2024
Loading thumbnail…

Activity_7_1

A customizable scatter plot visualizes the Iris dataset, cycling through four variable pairings on the x-axis every few seconds. The animation uses `setInterval` to update the x-scale and re-render the plot. It maps sepal and petal dimensions to coordinates, colored circles represent species, and a legend with labeled points is included. The code uses d3’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, and renders as an animated SVG with custom styling from an external stylesheet.

Nov 7, 2024
Loading thumbnail…

Activity_7_1

This example demonstrates the core workflow of a VizHub project, from importing local ES6 modules to rendering content with D3. It uses D3’s `select` function to target a `<div>` element and set its text content to a message exported from a separate `myMessage.js` module. The code also defines a numeric constant and a regular expression, showcasing basic JavaScript syntax alongside D3 integration. The page includes a CSS file that centers the message and enlarges its font size, with D3 loaded via a CDN script tag in the HTML.

Nov 7, 2024
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

The visualization displays a Buddha silhouette overlaid with colorful, semi-transparent polygons, split between a floral background and a black lower half. The React application uses SVG to render randomly generated triangles, each with randomized coordinates, colors, opacity, and rotations. The shapes are created by mapping over an array of numbers using JavaScript, while the Buddha path is drawn from intricate SVG path data. The visual is embedded within a custom HTML layout that uses CSS flexbox to divide the screen.

Oct 29, 2024
Loading thumbnail…

Activity_6_3_2

This example shows a scatter plot of iris flower measurements, encoding sepal length on the x-axis, petal length on the y-axis, and species as point shapes. It loads the Iris dataset from a CSV file and parses it with `d3.csvParse`. The visualization uses `d3.scaleLinear` for positional scales and `d3.scaleOrdinal` with `d3.symbolsFill` to map species to distinct marker shapes. Axes and a custom shape legend are drawn using D3 selections, with `d3.axisLeft`, `d3.axisBottom`, and `d3.symbol` generators.

Oct 24, 2024
Loading thumbnail…

Fork of Activity_6_Task_4_1

This bubble chart visualizes the correlation between processor speed, RAM, and display size for various smartphone makes. Each circle's x-position maps to processor speed, y-position to RAM, and radius to display size, while color encodes the phone manufacturer. The chart uses D3.js v7 with SVG rendering, incorporating scales for positioning, color, and size, alongside interactive tooltips that display phone make on mouseover. Data comes from the included `phones.csv` file, with axes labeled and a legend explaining the bubble sizing.

Oct 24, 2024
Loading thumbnail…

Activity_6_Task_4

This interactive bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes. Using d3.v7, the chart maps torque to the y-axis, horsepower to the x-axis, and highway MPG to the bubble size and color via a linear scale and ordinal color scale. Built with SVG and animation, it reads from a CSV file, adds axis labels and a legend for MPG values, and includes a tooltip that displays the car make on mouseover.

Oct 24, 2024
Loading thumbnail…

Activity_6_Task_3_2

This scatter plot visualizes the relationship between hours worked per week and monthly salary, with employee department encoded through symbol shapes. The chart uses d3.v7 scaleLinear for axes scaling, scaleOrdinal with symbolsFill to map categorical department values to distinct marker shapes, and displays a custom shape legend. Data is loaded dynamically from a CSV file hosted on GitHub, parsed with csvParse, and rendered using D3 join patterns for marks and axes.

Oct 24, 2024
Loading thumbnail…

Fork of Activity_6_Task_3_2

This example visualizes the Iris dataset as a scatter plot, mapping petal length and petal width to the x- and y-axes while encoding species with color (skyblue, lightgreen, orange). It demonstrates loading data from a remote CSV file using `d3.csv` with a custom parsing function, then applies `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from D3 v6 to build the chart. The SVG rendering includes circles with dynamically set radii and fill colors, along with rotated axis labels. Although the code references employee-related fields in its data parser, the visualization actually plots Iris measurements, with the dataset URL pointing to an employees.csv file.

Oct 24, 2024
Loading thumbnail…

Activity_6_Task_3_1

A scatter plot displays the Iris dataset, encoding petal length and petal width along the x and y axes while coloring each point by species (setosa, versicolor, virginica). The chart includes labeled axes, a green axis title, and a red heading. Built with D3 v6, the visualization loads CSV data via `d3.csv`, scales positions using `d3.scaleLinear` and `d3.extent`, and renders circles as SVG elements with `d3.selectAll` and data joins. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`, with the plot sized to the window.

Oct 24, 2024
Loading thumbnail…

Fork of Activity_6_Task_2_1

A horizontal stacked bar chart shows the caloric distribution percentages across ten food types, with each bar segmented into five calorie bands from "below 2.0" to "above 6.5" calories. The visualization uses D3 v7's `d3.stack()` and `d3.scaleOrdinal()` to create the stacked segments, with a color scale assigning a distinct hue to each calorie category. Rectangles are positioned via `d3.scaleLinear()` for the x-axis and `d3.scaleBand()` for the y-axis, and interactive mouseover events display precise percentage values in a styled tooltip. Data comes from the included `calories.csv` file, rendered as SVG with custom fonts and axis labels.

Oct 24, 2024
Loading thumbnail…

Activity_6_Task_2

This example visualizes IMDb movie ratings across six genres, showing the distribution of ratings in five percentage-based categories using a stacked horizontal bar chart. The chart highlights how genres like Documentary skew toward higher ratings, while Action concentrates in lower ranges. Built with D3 v7, it uses `d3.stack()` to aggregate the categorical data, `d3.scaleBand()` for genre positioning, and `d3.scaleOrdinal()` for color encoding. Interactive tooltips display exact percentages on hover, while axis labels, a title, and a legend clarify the rating breakdown and genre ordering.

Oct 24, 2024
Loading thumbnail…

Fork of Fork of Activity_6_Task_1_Question_1_2

This horizontal bar chart displays the populations of twenty countries in 2010, sorted by country name. Rendered as an SVG using React, the visualization loads data from a GitHub-hosted CSV file via the D3 `csv` function. The chart uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis, with axes and rectangular marks built from custom React components. Population values are formatted with D3’s `format` function to abbreviate large numbers, and tooltips on each bar show the precise formatted value.

Oct 24, 2024
Loading thumbnail…

Fork of Activity_6_Task_1_Question_1_1

This example shows a horizontal bar chart comparing the population of ten countries in the year 2000, sorted by country name. The chart uses React components to render SVG elements, with D3’s `scaleBand` and `scaleLinear` handling the layout, while `AxisBottom` and `AxisLeft` generate the axes. Data is loaded using `d3.csv` from a remote GitHub CSV file, and each bar displays a native tooltip with its formatted population value.

Oct 24, 2024
Loading thumbnail…

Activity_6_Task_1

This visualization displays the population of ten countries in the year 2000 as a horizontal bar chart using SVG rendering within a React application. The chart uses D3.js v5 functions `scaleBand` and `scaleLinear` to map country names and population values to coordinates, with axes rendered by custom components. Population values are formatted using D3's `format` function, abbreviating large numbers with "B" for billions. Data is loaded asynchronously from a remote CSV file using `d3.csv`.

Oct 24, 2024