Gist 062e2198aa30fcbc94657e1e50de22e5

Stacked-to-Grouped d3 v4

This interactive chart visualizes foreign investment data from the Government of British Columbia’s data catalogue, displaying the number of transactions across three categories over time. Users can toggle between stacked and grouped bar chart layouts via radio buttons, with each bar segment representing a different investment column. The visualization uses d3.v4’s scaleBand, scaleLinear, and stack functions for positioning and aggregation, while the data is fetched asynchronously via ajax from the catalogue’s API. SVG rectangles animate their height and y-position when switching modes, and a tooltip, built with d3.select, shows the precise value on mouseover.

73% match

DynamicChart_Animated

Five student records switch between math and science scores with a simple bar chart built from div elements. Clicking the Math or Science buttons triggers a transition that smoothly resizes each bar’s width to match the selected subject’s value. The chart uses D3 v4’s data join with a key function on student names, merging enter and update selections for animated width changes via `selection.transition()`. Styled with teal CSS bars, the visualization demonstrates basic data binding and animated updates without axes or scales.

JJoelGallagher

72% match

map and bar charts

This visualization combines an interactive choropleth map of British Columbia’s regional districts with an animated bar chart. The map’s fill color encodes each district’s 2014 municipal solid waste disposal rate (kg per capita), using a threshold scale. Clicking a district updates the adjacent bar chart to display that region’s disposal rates and population trends over time. Built with D3.js, it uses `d3.geo.path` and TopoJSON for the map, while the chart is rendered with SVG bars and lines from CSV data.

72% match

D3: Linked charts

A bar chart displays student grades from a dataset of student IDs and numeric grade values, with each bar representing a student. The visualization uses linked charts to show grades and allows sorting by ascending or descending order. Built with D3.js, it uses SVG rendering with animated bar transitions and axes. The bars are color-coded using hue and saturation, and hovering highlights individual bars to reveal exact grade labels. The data appears to be sample grade records with student IDs, and the chart is designed to compare grade distributions across students.

AAdlopez2016

Gist 206fe25c8c762e30421c93a23e8a5d01

This visualization charts the share of income held by different income groups across British Columbia and Vancouver from 1982 onward, comparing measures like market, total, and after-tax income. The display uses d3.scaleOrdinal for color encoding and d3.axisLeft/axisBottom for scaling, rendering lines or paths with d3.line to trace trends across years. Income groups are distinguished by hue, while the y-axis shows percentage shares, making it easy to compare the relative earnings of top, bottom, and middle percentiles over time.

BC School Districts

This interactive map of British Columbia school districts displays district boundaries as SVG paths within a React application. Each district is rendered as a clickable region, with a mouseover effect that highlights the area using CSS transitions. The visualization uses raw SVG path data from a locator map of the Bulkley-Nechako regional district, styled with a custom stylesheet that sets a blue background and white district fills with dark strokes. The page links to a separate chart (chart03.html) for additional district information.

MMohammad Shakirul Islam

Gist 40ca15ac0d6b9529e05fcfa15e22928d

This interactive map of British Columbia’s regional districts shows municipal solid waste disposal rates in kilograms per capita for 2014, with districts colored by a threshold scale. Hovering over a district reveals its exact rate, while a bar chart displays historical disposal trends for the selected region. The visualization uses D3.js with `d3.geo.path` and TopoJSON to render the map, and it dynamically updates a bar chart and line graph from the CSV dataset. Tooltips provide contextual population and tonnage figures on demand.

Reusable Scatter plot Activity 8

This animated scatter plot uses D3.js to visualize high school student data, cycling through four different variable pairs on the x-axis every few seconds. Colored circles represent individual students, with sky blue, light green, and orange indicating grade categories (A, B, and D). The visualization employs the custom `scatterPlot` module, which utilizes D3 scales, axes, and SVG rendering to create the animated chart. Data is loaded from a CSV file hosted on GitHub, and the animation is driven by `setInterval`.

Lleftymadi