CS 360 final project line chart

100%

CS 360 final project line chart

✓ Published0🌍 Public

Last edited Nov 1, 2022

Created on Oct 31, 2022

This chart displays monthly Wikipedia pageviews for four language editions (English, Polish, Catalan, and Icelandic) from 2016 to 2022, using a log-scaled y-axis to accommodate their vastly different magnitudes. The visualization uses D3 v7 with SVG rendering, employing `d3.line` with basis curves, `d3.scaleLog`, `d3.scaleTime`, and `d3.axisBottom`/`d3.axisLeft`. Hovering over a path highlights it by dimming others, while clicking toggles a line’s opacity. The data comes from a CSV file with monthly view counts.

AI-generated description

This chart shows four language editions (English, Polish, Catalan, Icelandic) of Wikipedia by their number of monthly pageviews. These four languages have very different numbers of native speakers, and are all native to the developed world (so that disparities in Internet access aren't a problem).

The languages with fewer speakers/views have more month-to-month variation in their view counts.

MIT Licensed

Similar vizzes

Loading thumbnail…

CS 360 final project viz 4

This visualization shows the top three most-viewed English Wikipedia articles per month from December 2015 to October 2022, with gold, silver, and bronze bars for first, second, and third place. Each row represents a month, and bar lengths reflect view counts on a linear scale from zero to 150 million. Hovering over a bar reveals a tooltip with the article title, ranking, and exact view count. The code uses d3.scaleLinear, d3.axisTop, d3.axisBottom, and d3.csv to load the data and render the SVG.

EEmperor-Nathan

81% match

Loading thumbnail…

CS 360 final project pie charts

This example presents two interactive pie charts that compare English Wikipedia page views by device type (mobile web, mobile app, and desktop) for two selected months. Users can advance the left chart’s month using arrow buttons or an auto-playing animation, while hovering over any slice displays a tooltip with its precise count. The visualization is built with D3.js v4, using `d3.pie` for slice geometry, `d3.arc` for rendering paths, and an ordinal color scale. Data is loaded from a CSV file containing monthly totals from 2016 to 2022.

EEmperor-Nathan

78% match

Loading thumbnail…

simple line chart from dataset _ Final version

This example shows a monthly time series of twelve data points from a local dataset, with a single black polyline connecting values, labeled x-axis dates, and a large final-value annotation. It also adds light-gray circular markers that turn red on hover, displaying the current value and a dashed vertical guide line. Built with D3 v4, it uses `d3.scaleTime` for the date axis, `d3.scaleLinear` for values, `d3.line` to generate the path, and SVG elements rendered via the code. The dataset is loaded with `d3.json` from a static file, and all interaction logic resides in `mouseover` and `mouseout` event handlers.

EElisaDnr

70% match

Loading thumbnail…

Project: Multiple Line

This interactive visualization displays a year of Last.fm listening habits, tracking play counts per week across various music genres. Users can click legend items to highlight a specific genre’s line. Built with D3 v5, it uses nested data, scales, axes, line generators, and a custom mouse-tracking tooltip to explore the dataset.

OOxfordComma

69% match

Loading thumbnail…

Line chart.js!

This line chart visualizes yearly data from a CSV file, plotting values against years with a blue line on axes labeled "Year" and "Value." It uses D3 v7 to load the data via `d3.csv`, scales the x- and y-axes with `d3.scaleLinear`, and renders the line path using the `d3.line` generator. The chart explicitly appends axes, labels, and the line to an SVG element, with margins set to accommodate tick marks and text. The example demonstrates basic DOM manipulation and data binding in D3.

Vvishnupriya eupuri

69% match

Loading thumbnail…

CS 360 final project choropleth

This choropleth map displays the most popular languages (l1–l5) per country using October 2022 data, with each country colored by its primary language’s share of page views. Hovering over a country highlights it and reveals the top five language names and their proportional bar lengths in a custom axis. The visualization uses d3.geoPath with a geoEquirectangular projection to render the world map, d3.scaleThreshold and d3.schemeBlues for coloring, and d3.axisTop for the interactive bar chart that appears on hover.

EEmperor-Nathan

69% match

Loading thumbnail…

simple line chart from dataset

A simple SVG line chart plots monthly values from an 11-point JSON dataset, with a black polyline, labeled x-axis dates, and a large final-value annotation. The visualization adds interactivity through gray circular markers at each data point; hovering a circle turns it red, reveals its value, and displays a vertical dashed guide line. The chart uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.line`, with mouseover and mouseout events controlling opacity and stroke transitions. Animation effects appear via `transition().duration(300)` when changing marker color and opacity.

GGaret005

69% match

Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden

68% match