Daniel Z

Content Distribution by Maturity Rating

This example visualizes the distribution of Netflix content by maturity rating, ranking the eight most frequent ratings from a CSV dataset. It uses ECharts to render a pie chart, with each slice representing a rating and its share of titles. The code loads `netflix_titles.csv` via `d3.csv`, aggregates the counts in a plain JavaScript object, sorts the ratings descending, and configures the chart with a tooltip showing the title count and percentage. The visualization is initialized with the `'dark'` theme, and the pie series is set directly through ECharts’ option object.

Netflix Growth Tren

This visualization presents the growth of Netflix’s content library as a line chart, tallying titles by the year they were added from 2008 to 2021. It loads a CSV file using d3.csv, processes the `date_added` field to extract and count years, and renders a red area-style line with ECharts. The chart includes axes for year and title count, with tooltips on axis hover.

Netflix Top Genres

This visualization shows the top 10 most frequent genres among Netflix titles, derived by counting genre assignments across all entries in the `netflix_titles.csv` file. A horizontal bar chart ordered by descending count, with a red bar color, displays each genre and its occurrence total. The code uses D3’s `d3.csv` to load the data, processes genre strings by splitting and trimming, and then renders the chart with the ECharts library, specifying a category axis for genres and a value axis for counts.

Netflix Runtime Scatter

This scatter plot displays the relationship between movie release year and runtime for Netflix titles, filtering the dataset to include only movies and parsing their duration strings to extract minute values. Built with a hybrid of ECharts for chart rendering and d3.csv for data ingestion from the local netflix_titles.csv file, the visualization uses a dark theme with semi-transparent points to reveal density patterns. Tooltips formatted through ECharts' formatter function show both year and duration when hovering over individual data points.

Average Energy Price by Country

A bar chart displays the average energy price for each country, with each bar representing a country’s mean value calculated from the dataset. The visualization uses D3 v7 to load the CSV file, aggregate energy prices by country, and render SVG rectangles. A linear scale maps average prices to bar heights, with axes labeled and rotated country names for readability.

Temperature Distribution per Country

A box plot visualizes the distribution of average temperatures recorded daily across multiple countries from 2020 to 2024. Each box shows the interquartile range with a white median line, while dashed whiskers extend to minimum and maximum values. The implementation loads CSV data with `d3.csv`, groups entries by country, and calculates quartiles using `d3.quantile`. `d3.scaleBand` positions countries on the x-axis, while `d3.scaleLinear` maps temperature ranges vertically, producing an SVG chart via D3 v7.

Scatter Plot - Industry

This scatter plot shows the relationship between industrial activity index and energy consumption, using a green circle for each sampled data point. The visualization samples every 100th row from the global climate and energy dataset (2020–2024), mapping industrial activity to the x-axis and consumption to the y-axis. It uses D3.js v7 with linear scales, axis generators, and SVG circles. Data is loaded via `d3.csv` and rendered with a simple opacity setting for overlapping points.

Daily Temperature in Germany

This line chart shows daily average temperatures in Germany from 2020 to 2024, with dates on the x-axis and temperature in degrees Celsius on the y-axis. The code filters the CSV data for Germany, parses dates with `d3.timeParse`, and uses `d3.scaleTime` and `d3.scaleLinear` to map the data. A red path is drawn using `d3.line`, with axes and labels added via `d3.axisBottom` and `d3.axisLeft`. The chart renders as an SVG in the browser.