Viz Project Line Graph

100%

Viz Project Line Graph

✓ Published0🌍 Public

Last edited Jun 17, 2019

Created on Jun 17, 2019

This interactive line graph charts the cumulative number of Billboard Top 100 features for five artists—Taylor Swift, Kenny Chesney, Tim McGraw, Mariah Carey, and Keith Urban—from 1990 to 2015. Built with D3 v4 and SVG, the visualization includes hover filtering and click-triggered annotations. The code uses `d3.timeParse`, transitions, and the d3-annotation library to label specific data points like Taylor Swift’s chart milestones. Styled with the Poppins font, the graph displays a title, axes, and instructional text, rendering data loaded from a CSV file.

AI-generated description

forked from <a href='http://bl.ocks.org/ienwhang/'>ienwhang</a>'s block: <a href='http://bl.ocks.org/ienwhang/78c5e906749d105c31a4575e58e7d3fe'>Lyrical Notes Viz1 </a>

mit Licensed

Similar vizzes

Loading thumbnail…

ICE-7(Line Chart)

This line chart shows Taylor Swift’s monthly listening hours on Spotify for the year 2001, with time on the x-axis and hours on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map data, d3.axisBottom and d3.axisLeft for tick marks, and a d3.line generator to draw the path. Data is loaded from a CSV file via d3.csv, with margins and axis labels styled through CSS. The SVG rendering is driven by React, with the chart’s title and gridlines included.

PPrathyusha Jampala

69% match

Loading thumbnail…

Fork of Line chart v1

This interactive visualization displays the evolution of the number of published albums per year for a selected country, using a line chart built with D3 v5 and rendered as SVG. When the user clicks on a country, a modal appears showing additional statistics, including total albums and top genres and artists. The chart uses d3.json to load the dataset, d3.scaleTime and d3.scaleLinear for axes, and d3.axisLeft/axisBottom to draw them with grid lines. The line itself is generated with d3.line and path elements, while tooltips and a Bootstrap modal provide further detail.

Iivaleehan

68% match

Loading thumbnail…

Project: Stacked Line (Artist)

This interactive visualization displays a stacked area chart of the user’s music plays across 52 weeks of 2018, broken down by artist and genre. The chart uses D3 v5 with SVG and animated transitions, letting viewers click a color legend to highlight a specific artist’s play counts. Data comes from Last.fm and is processed via `d3.csv` and `d3.hierarchy` into weekly aggregates. The rendering uses `d3.stack`, `d3.area`, and `d3.scaleLinear` with a `colorLegend` module for filtering.

OOxfordComma

68% match

Loading thumbnail…

Fork of ICE-7(Line Chart)

This line chart depicts Taylor Swift’s Spotify listening trends by year, plotting Selling_Price against Year. The visualization uses D3 v5 within a React framework, rendering an SVG with axes, gridlines, and a titled path. Data loads from a GitHub-hosted CSV via `d3.csv`. The chart employs `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to map the dataset, with custom CSS styling for labels, ticks, and the line path.

Ssivamani

68% match

Loading thumbnail…

Interactive Billboard Top 50 Alluvial plot

This interactive alluvial plot visualizes the Billboard Top 50 charts by showing how songs, artists, and genres flow across weeks. Users can hover over individual ribbons to see a tooltip displaying the song, performer, and genre, and a slider allows scrubbing through time to filter the displayed data. The visualization is built with D3.js v6 and React, using SVG for rendering and D3’s time parsing and scales to map the temporal data. The underlying dataset comes from a TSV source containing weekly chart positions and Spotify genre classifications.

Jjw4169

68% match

Loading thumbnail…

Project Line Chart

This project line chart tracks musical release trends by genre, displaying the number of songs released per year as distinct colored lines. The visualization uses D3 v5 with SVG rendering, employing `d3.nest()` to group data by genre and `d3.line()` to generate the paths. Data comes from a local JSON file loaded via `d3.json()`, which is processed and aggregated before being displayed with `d3.scaleBand()` for the x-axis and `d3.scaleLinear()` for the y-axis.

EElodie31190

67% match

Loading thumbnail…

Untitled

This interactive line chart displays the evolution of audio features—energy, liveness, valence, speechiness, and danceability—across playlist genres for different artists. Users select an artist via buttons, which triggers a D3.js animation that removes existing data groups and redraws the chart from a corresponding CSV file. The visualization uses d3.csv to load data, d3.scaleLinear for axes, and d3.scaleOrdinal with a custom color palette to distinguish genres. SVG elements and a legend are rendered on a fixed canvas, with transitions applied when updating the lines.

Ssiddhant0704

67% match

Loading thumbnail…

TP Line chart

This interactive visualization displays a world map where each country is colored and clickable. Hovering over a country reveals its name via a tooltip, while clicking opens a modal window presenting statistics about that nation, such as the total number of albums, top 10 genres, most popular artists, and yearly album counts. The project uses d3.geoMercator and d3.geoPath to render the map from world-atlas data, d3.scaleLinear for colored fills, and d3.zoom to enable panning and zooming of the SVG. The modal interface is built with Bootstrap, and the underlying data is loaded via d3.tsv and d3.json.

TToky R

67% match