Skip to main content
100%

Series of 2016-2017 by genre

✓ Published0🌍 Public
Aalina-zhu
Last edited Jul 3, 2017
Created on Jul 3, 2017

A force-directed bubble chart visualizes TV series from 2016 and 2017, with each circle’s radius scaled by viewer rating and color-coded by genre. Two buttons toggle the x-axis force: "Split by year" separates the bubbles into 2016 and 2017 clusters, while "Combine" merges them into a single group. Hovering over a circle reveals the series title in a tooltip. The visualization uses d3.v4 with SVG rendering and a collision-based simulation to arrange the bubbles.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/alina-zhu/'>alina-zhu</a>'s block: <a href='http://bl.ocks.org/alina-zhu/80fb437d0934a4a55ae4bdf5fbf4e757'>Series of 2016-2017 by genre</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Series of 2016-2017 by genre_

The visualization displays the best TV series of 2016–2017 as a force-directed bubble chart, with each circle sized by rating and colored by genre. Two buttons let users toggle between combining all shows into a single cluster or splitting them into two groups by year (2016 on the left, 2017 on the right), using D3's force simulation to reposition the bubbles. Hovering over a circle reveals the show's title in a tooltip, while a legend identifies genre colors. The chart is built with D3 v4 and rendered as SVG, using data from a CSV file listing titles, years, ratings, and genres.

Aalina-zhu
95% match
Loading thumbnail…

Series of 2016-2017 by genre

This visualization displays TV series from 2016 and 2017 as circles, with size encoding user ratings and color encoding genre. Two buttons let viewers split the chart by year or combine the data. When split, the force-directed layout positions 2016 titles on the left and 2017 titles on the right; when combined, all circles move to the center. Hovering reveals a series title, implemented with D3 v4 and SVG.

Aalina-zhu
93% match
Loading thumbnail…

Bubble Chart Experiment

This bubble chart visualizes the 2017 domestic box-office performance of 65 films, mapping each movie as a circle positioned by release date (x-axis) and box office rank (y-axis). Circle size encodes total gross, while color distinguishes studio categories. Hovering or interacting triggers smooth SVG transitions, updating positions and sizes to reveal additional attributes such as runtime, theater count, or audience rating. The chart animates between these categorical views, with tooltips showing title, studio, gross, and opening weekend values. The visualization uses a force-directed layout to avoid overlaps and makes it easy to spot outliers and trends across the year's release schedule.

335degrees
75% match
Loading thumbnail…

Bubble Chart Experiment

This visualization uses a force-directed bubble chart to compare 2017 box-office performance across films. Bubbles are sized by total gross and colored by distributor; hovering reveals the title. The chart is built with D3 v4, renders in SVG, and animates the layout. Data is from the bo2017c.csv dataset, with circles positioned by the simulation and scaled by box-office revenue.

335degrees
75% 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
74% match
Loading thumbnail…

Movie Genre, Rating and Budget

This visualization displays movies as bubbles in a force-directed chart, with each bubble’s position along the x-axis encoding IMDB rating and its y-axis position encoding genre. Bubble size represents the movie’s budget, and color encodes the rating value. The chart uses the `d3.forceChart()` plugin, which is built on `d3.layout.force`, to gently shift bubbles toward their target x and y positions while preventing overlaps through collision detection. Data comes from the ggplot2 `movies` dataset, filtered to include only post-2000 films with budget and rating information, and rendered as SVG circles.

FFrissAnalytics
73% match
Loading thumbnail…

Bubble Chart Experiment

This example visualizes the domestic box office performance of 2017 movies as an animated bubble chart. Bubbles are positioned by release week and opening gross, with size encoding total box office and color indicating studio/distributor. Built with D3 v4 and rendered as SVG, the chart animates transitions smoothly, letting viewers track how each film's earnings accumulate week over week. The dataset is drawn from a gist by 35degrees and derived from Box Office Mojo figures.

335degrees
73% match
Loading thumbnail…

activity6_question4

This bubble chart visualizes the distribution of movie ratings across six genres using CSV data. The x-axis maps the proportion of ratings below 5.0 while the y-axis maps ratings above 8.5, with circle size representing the 6.5–7.5 rating range. The visualization uses d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal with d3.schemeCategory10 for color encoding, and includes interactive tooltips on mouseover. A legend and reference circles are rendered alongside the animated SVG, with genre labels positioned to the right of the plot area.

Nnishwitha.1032@gmail.com
72% match