Viewership_Cult

100%

Viewership_Cult

✓ Published0🌍 Public

Last edited Aug 1, 2017

Created on Aug 1, 2017

A responsive multiline chart tracks the relative popularity of four TV shows—Breaking Bad, Game of Thrones, Lost, and South Park—over time from 2004 to 2017. The chart uses d3.svg.line to render each series, with d3.scale.linear for the axes and d3.svg.axis for ticks. Clicking a legend item toggles series visibility, and the chart resizes to fit its container while updating the scales. Data comes from a CSV file and is parsed with d3.csv, with a tooltip that uses d3.svg.line for a crosshair guide.

AI-generated description

An implementation of a reusable responsive multiline chart. Based on the concept outlined in Mike Bostocks blog post Towards Reusable Charts.

Features:

Reusable modular design
Responsive design, chart size adjusts with screen size
Customizable options
- Chart Size
- Margins
- Div Selector
- Chart Colors
- Axis labels
Toggleable series (click on the legend to toggle series)

Previous version: Reusable Responsive Multiline Chart

forked from <a href='http://bl.ocks.org/asielen/'>asielen</a>'s block: <a href='http://bl.ocks.org/asielen/50a527004cb79facf219'>Reusable Line Chart v2</a>

mit Licensed

Similar vizzes

Loading thumbnail…

series BarChart

This example shows a grouped bar chart comparing viewer ratings for two TV series, Friends and How I Met Your Mother, across ten seasons. The chart uses an SVG container with a fixed width and height, and the data is loaded from a CSV file using d3.csv. The visualization is built with D3 v5 within a React framework, though the primary rendering logic relies on D3’s selection and data-join methods. The bars are not yet drawn in the provided code, as the script only logs the parsed data to the console.

IIanmp

66% match

Loading thumbnail…

Television Show Ratings - Rating by Season

This scatterplot visualizes television show ratings across seasons, encoding average rating on the y-axis, season number on the x-axis, and audience share as point size. The chart filters out average ratings below 6 and seasons beyond 20, revealing how share declines steadily with more seasons while rating trends remain inconclusive. Built with the Vega-Lite API alongside d3 for CSV data loading, the visualization uses a custom dark theme and a tooltip to display show titles for each point.

Vvwm

63% match

Loading thumbnail…

Fork of Fork of Scatter Plots of TV_SHOWS_REVISE

This visualization presents TV show ratings from a Rotten Tomatoes dataset, plotting release year on the x-axis and Rotten Tomatoes scores on the y-axis. Circle radius encodes half the IMDb score, with all points colored salmon. The main scatter plot uses d3.scaleLinear axes, while a second chart below shows a bar histogram of show counts per year, also using d3.rollups for aggregation. A d3.brushX selection is built into the scatter plot to filter data interactively, with the SVG rendered using D3 v6.

LlzlazmSylas

63% match

Loading thumbnail…

Bar Graph

This bar graph displays TV show ratings from a CSV file, sorting each show’s average rating as a horizontal bar. Built with D3 v6, it uses `scaleLinear` and `scaleBand` to map rating values and show names, with axes rendered via `axisLeft` and `axisBottom`. The SVG rendering loads data asynchronously with `csv()`, parses numeric values, and draws steelblue rectangles sized by each rating.

NNoobSaiyan

63% match

Loading thumbnail…

Customizing Axes

This bar chart displays the average viewership per season for two TV shows, Friends and HIMYM, based on a supplied CSV dataset. It demonstrates how to customize D3 axes, with axis ticks removed, custom tick formatting using `d3.format`, and axis labels styled via CSS. The visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with axis functions like `d3.axisLeft` and `d3.axisBottom`. The rendered output is an SVG generated with D3 v5.

IIanmp

63% match

Loading thumbnail…

Data Visualization Short Presentation Task6

This example presents a bubble chart comparing the average monthly hours audiences spend watching different show genres against their weekly average hours. Each bubble is colored by show category and sized according to highway MPG values from the CSV data. The visualization uses D3 v7 with SVG rendering, including tooltips on mouseover, axis labels, and a legend illustrating both bubble size and categorical color mapping. Hover interactions dynamically display the show make, while opacity changes highlight individual data points.

Aanith462@gmail.com

63% match

Loading thumbnail…

Making a Multiline Chart

Eight weeks of simulated playoff power rankings are shown as eight colored, semi-transparent lines, one per team, across the x-axis (week) and y-axis (power rank). Hovering over a line thickens it and increases its opacity. Built with D3 v5, it uses `d3.line()`, `d3.nest()`, `d3.scaleOrdinal()`, and a custom legend from `d3.axisLeft()` calls, reading the `data.csv` file. Lines are drawn as SVG paths, and hover effects use D3's `.transition()` for animation.

HHirsh Gupta

63% match

Loading thumbnail…

Data Visualization Short Presentation Task5

This stacked bar chart displays the distribution of Netflix show ratings across six genres, with each bar segment representing the percentage of audience ratings falling into categories from "below 5.0" to "above 8.5". The visualization uses d3.csv to load the data, d3.stack() to compute the stacked segments, and d3.scaleOrdinal with a custom color array for encoding rating categories. Interactive tooltips, styled with hover effects that change rectangle opacity, display exact percentages on mouseover, while axes, labels, and a legend help contextualize the data.

Aanith462@gmail.com

62% match