Gist 121d4ca177a743cfedfd

100%

Gist 121d4ca177a743cfedfd

✓ Published0🌍 Public

Last edited Oct 2, 2014

Created on Oct 2, 2014

This example uses Google's Visualization API to render an area chart tracking the number of Google search results for the term "data" from 2002 to 2012. The code loads the `corechart` package, creates a `DataTable` with year and result-count columns, and draws the chart inside a `<div>` with a smooth `curveType: "function"`. It sets custom styling for title, axes, and colors, and handles window resizing via `$(window).smartresize()` to redraw the chart responsively. The data is hardcoded in the script, with values rising from 7.39 million to 470 million results.

AI-generated description

Similar vizzes

Loading thumbnail…

Area Chart Visualization

This area chart displays Google’s annual user counts from 2011 to 2021, emphasizing the upward trend through a filled region beneath a smooth curve. The visualization is built with D3 v5, using `d3.line` and `d3.area` generators with a `curveBasis` interpolation to create smooth paths. It loads CSV data from a GitHub gist, maps years to a linear x-scale and user counts to a linear y-scale, and renders axes with gridlines as SVG. Styling is applied via external CSS, with distinct colors for ticks, labels, and the area fill.

DDanthalakirankumar

72% match

Loading thumbnail…

D3 Example

This example shows a horizontal bar chart comparing the number of Google search results for 14 visualization techniques, ranked from most to least common. The visualization uses D3.js version 3.5.5 to load a CSV file via `d3.csv`, then maps data to an ordinal y-scale and linear x-scale. It includes formatted tick labels that abbreviate large numbers with SI prefixes via `d3.format("s")`, plus a custom tooltip using `d3-tip` that displays exact result counts on mouseover. The chart is rendered as SVG with a Playfair Display font for axis text.

CCurran Kelleher

71% match

Loading thumbnail…

Gist 3742278

This example demonstrates a minimal web-based test harness for the Google Visualization API. It defines a data table with three axes, each containing an identifier, display text, title, and type, and renders a simple form with a submit button. When the button is clicked, the `test()` function calls `init()`, then displays the table’s JSON representation in a `div` element via `innerHTML`. The code relies on `google.load("visualization", "1")` and the `google.visualization.DataTable` class to structure the data, though no actual chart or graphical output is generated.

RRCura

69% match

Loading thumbnail…

Line chart Visualization

This line chart visualizes Google’s annual user counts from 2011 to 2021, loaded from a GitHub-hosted CSV file using d3.csv. It renders an SVG with d3.scaleTime for the x-axis (years) and d3.scaleLinear for the y-axis (users), alongside d3.axisBottom and d3.axisLeft with gridlines. A d3.line generator creates the path, while axis labels and a title are added via SVG text elements. The chart employs d3.extent and d3.max to set domain bounds and custom margins for layout.

DDanthalakirankumar

67% match

Loading thumbnail…

Gist 3742279

This example builds a small HTML form to trigger an interactive test of Google's Visualization API, version 1. The code defines a data table (`gAxesTable`) with three fictional axes, each given an id, label, title, and type. When the user clicks the "TEST" button, the script populates the page’s `result` div with the table’s JSON representation via `google.visualization.DataTable` and its `toJSON()` method. The demonstration focuses on how to initialize the API and serialize structured data for display.

RRCura

67% match

Loading thumbnail…

Gist 5a00993a5372ab7fb1a3ce99a6d0e46b

This chart is a line graph of Google's stock price over the summer of 2014, showing daily fluctuations in the closing price. It uses the `d3.js` library for rendering an SVG with a time-series line and a date-scaled x-axis. The data for each trading day is loaded from a CSV file that includes both price and volume. The visualization highlights the stock's downward trend and volatility during that period, with each data point clearly marked on the path.

LLuisSevillano

67% match

Loading thumbnail…

Google Chart Example

This example displays a scatter plot of daily household survey data from KwaZulu-Natal from 2008 to 2014, with years on the x-axis and daily values on the y-axis. It uses Google's visualization API to render the chart, loading data from a CSV file via jQuery and the jquery.csv plugin. The code defines chart options for titles and axis ranges, then draws the scatter plot into a designated div element.

Aanushaanumula

67% match

Loading thumbnail…

Untitled

This example displays two Google Charts visualizations side by side: a pie chart and a bar chart, both titled “How Much Pizza I Ate Last Night.” The charts present the same categorical dataset of pizza toppings with corresponding slice counts. The code uses the Google Charts loader and the `corechart` package to create a `DataTable`, then instantiates a `google.visualization.ScatterChart` (mislabeled as pie) and a `google.visualization.BarChart`. Each chart is drawn into a separate `div` element with predefined width and height options.

Aavesh1998

66% match