Spaces:

Pekku
/

Chart

Sleeping

App Files Files Community

Chart / dataset /web /AnyChart /scatter /chart_0047_scatter.html

Pekku

Upload folder using huggingface_hub

79dc9c8 verified about 2 months ago

raw

history blame contribute delete

6.4 kB

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<title>JavaScript Bubble Chart</title>
	<link href="https://playground.anychart.com/bEXxXSt2/iframe" rel="canonical">
	<meta content="AJAX Chart,Bubble Chart,Chart from JSON,JSON Chart,JSON Plot,Statistical Data,Tooltip" name="keywords">
	<meta content="AnyChart - JavaScript Charts designed to be embedded and integrated" name="description">
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	<style>html,
	body,
	#container {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}</style>
	</head>
	<body>
	<div id="container"></div>
	<script src="_deps/cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>
	<script src="_deps/cdn.anychart.com/releases/8.11.0/js/anychart-data-adapter.min.js"></script>
	<script type="text/javascript">anychart.onDocumentReady(function() {

	// load data
	anychart.data.loadJsonFile("./13_1.json",
	function (data) {

	// create an empty bubble chart (avoid default "Series 0")
	var chart = anychart.bubble();
	chart.background().fill("#f7fbff");

	// set the minimum and maximum bubble sizes
	chart.minBubbleSize("3%");
	chart.maxBubbleSize("12%");

	// name the axes
	chart.xAxis().title("Year");
	chart.yAxis().title("Views");

	// set the intervals between the ticks
	chart.xScale().ticks().interval(2);
	chart.yScale().ticks().interval(2000000000);

	// enable the grid
	chart.yGrid(true).xGrid(true).xMinorGrid(true).yMinorGrid(true);

	// heavily remix data so this chart is clearly different from source
	function clamp(value, min, max) {
	return Math.max(min, Math.min(max, value));
	}

	var remixedData = data.map(function(entry, index) {
	var item = Object.assign({}, entry);
	var x = Number(item.x);
	var value = Number(item.value);
	var size = Number(item.size);

	if (item.genre === "Music") {
	item.x = clamp(x - 2 + (index % 3), 2008, 2025);
	item.value = Math.round(value * (0.58 + (index % 4) * 0.09) + 650000000);
	item.size = Math.round(size * (0.72 + (index % 3) * 0.12));
	} else if (item.genre === "Shorts") {
	item.x = clamp(x + 1, 2016, 2025);
	item.value = Math.round(value * (2.6 + (index % 5) * 0.25) + 900000000);
	item.size = Math.round(size * (1.35 + (index % 4) * 0.14));
	} else if (item.genre === "Comedy") {
	item.x = clamp(x + 2, 2010, 2025);
	item.value = Math.round(value * (1.8 + (index % 3) * 0.2) + 400000000);
	item.size = Math.round(size * (1.12 + (index % 3) * 0.1));
	} else if (item.genre === "Children") {
	item.x = clamp(x - 1 + (index % 2), 2011, 2025);
	item.value = Math.round(value * (0.95 + (index % 3) * 0.18) + 1200000000);
	item.size = Math.round(size * (1.05 + (index % 3) * 0.08));
	}

	item.value = Math.max(item.value, 100000000);
	item.size = Math.max(item.size, 1000000);
	item.title = item.title + " (Remix)";
	return item;
	});

	remixedData.push(
	{x: 2024, value: 9800000000, size: 48000000, title: "Flash Trend Remix", genre: "Shorts"},
	{x: 2014, value: 5400000000, size: 30000000, title: "Classic Viral Remix", genre: "Music"},
	{x: 2023, value: 2100000000, size: 17000000, title: "Sketch Blast Remix", genre: "Comedy"},
	{x: 2016, value: 14300000000, size: 42000000, title: "Kids Mega Hit Remix", genre: "Children"}
	);

	// separate remixed data into different series based on genre
	var videos_shorts = remixedData.filter(function(entry) {
	return entry.genre === "Shorts";
	});
	var videos_music= remixedData.filter(function(entry) {
	return entry.genre === "Music";
	});
	var videos_comedy = remixedData.filter(function(entry) {
	return entry.genre === "Comedy";
	});
	var videos_children = remixedData.filter(function(entry) {
	return entry.genre === "Children";
	});

	// customize the appearance of each series
	// series 1
	var series1 = chart.bubble(videos_children).name("Children");
	series1.normal().fill("#A0EA63", 0.9);
	series1.hovered().fill("#A0EA63", 0.7);
	series1.selected().fill("#9EE57C", 0.9);
	series1.normal().stroke("#41a312", 1);
	series1.hovered().stroke("#41a312", 2);
	series1.selected().stroke("#41a312", 4);
	// series 2
	var series2 = chart.bubble(videos_shorts).name("Shorts");
	series2.normal().fill("#FFB000", 0.92);
	series2.hovered().fill("#FFB000", 0.78);
	series2.selected().fill("#FFB000", 0.45);
	series2.normal().stroke("#B36A00", 1);
	series2.hovered().stroke("#B36A00", 2);
	series2.selected().stroke("#B36A00", 4);
	// series 3
	var series3 = chart.bubble(videos_comedy).name("Comedy");
	series3.normal().fill("#DE3163", 0.5);
	series3.hovered().fill("#DE3163", 0.3);
	series3.selected().fill("#DE3163", 0.3);
	series3.normal().stroke("#DE3163", 1);
	series3.hovered().stroke("#DE3163", 2);
	series3.selected().stroke("#DE3163", 2);
	// series 4
	var series4 = chart.bubble(videos_music).name("Music");
	series4.normal().fill("#87C4F6", 0.85);
	series4.hovered().fill("#87C4F6", 0.9);
	series4.selected().fill("#55A0E5", 0.98);
	series4.normal().stroke("#1069c2", 1);
	series4.hovered().stroke("#1069c2", 2);
	series4.selected().stroke("#1069c2", 4);

	// prevent the bubbles from clipping
	series2.clip(false);
	series3.clip(false);

	// add the legend
	chart.legend(true).padding({bottom: 12 , top: 12});

	// configure the tooltip
	var tooltip = chart.tooltip();
	tooltip.titleFormat("Title: {%title}");
	tooltip.format("Year: {%x} \nViews: {%value} \nLikes: {%size} \nGenre: {%genre}");

	// add a chart title
	chart.title("Top 30 Most Liked YouTube Videos (Heavy Remix)");

	// set the container
	chart.container("container");

	// initiate the chart drawing
	chart.draw();

	})

	});</script>
	</body>
	</html>