exist-db tested XQuery Grain Mashup

100%

exist-db tested XQuery Grain Mashup

✓ Published0🌍 Public

Last edited Dec 15, 2014

Created on Dec 15, 2014

This example visualizes cereal production in the United States from 1961 to 2013 as a column chart. It retrieves data from the World Bank API using the `httpclient:put` or `http:send-request` functions, then formats the response as a JSON array of date-value pairs. The code uses Google Charts (`google.load` and `google.visualization`) to render the chart, adding a trendline to the production data. The XQuery generates an HTML page embedding the chart, with the data parsed and ordered by year before being passed to the visualization library.

AI-generated description

Similar vizzes

Loading thumbnail…

XQuery Grain Mashup

This example visualizes cereal production in the United States as a column chart, plotting annual metric tons over time from 1961 to 2013. It fetches data from the World Bank API using XQuery’s HTTP client module, then transforms the XML response into a JavaScript array of date–value pairs. The chart is rendered with the Google Visualization API’s `ColumnChart`, which also displays a trendline for annual production. The XQuery code builds the HTML page dynamically, embedding the JSON data directly into a script tag for the Google Charts library to consume.

CCliffordAnderson

93% match

Loading thumbnail…

[A11] My Chart

This interactive line chart displays the Consumer Price Index (CPI) for corn, rice, rye, and wheat from 2000 to 2015, with each grain represented by a distinct colored line and gray circular data points. Hovering over a point reveals a tooltip with the specific year, CPI value, and grain type, while the chart includes labeled axes, a legend, and a title. The visualization uses d3.csv to load external data, d3.scaleLinear, d3.line, d3.axisBottom, and d3.axisLeft for scaling and axes, and appends SVG paths and circles for rendering. A d3.legendColor legend with custom triangle shapes identifies the grain series. The graph is built with D3 v7 inside a React framework, rendering to SVG based on window dimensions.

Cctan13@dons.usfca.edu

63% match

Loading thumbnail…

World Food Production

This example visualizes world food production data from Kaggle, showing how agricultural output varies by country, food type, and year. It presents a table of parsed CSV values, with each row displaying a country-year combination and its corresponding production figures for crops like maize, rice, and wheat. The code loads the dataset using an import statement, converts string values to numbers for all food categories, and renders the first record as JSON using `JSON.stringify`. The example uses plain JavaScript to handle data parsing and displays the result in an HTML `<pre>` element with a set font size.

Llrsavoie@wpi.edu

62% match

Loading thumbnail…

[A7] CPI of Various Grains from 2000 - 2015 (Multi-Line Chart with a Color Legend)

This multi-line chart displays the Consumer Price Index (CPI) for corn, rice, rye, and wheat from 2000 to 2015, using color-coded lines and circles for each grain. The visualization loads data from a CSV file and renders it with SVG using d3.v7, applying d3.line for the paths, d3.axisBottom for the x-axis, and d3.legend for a color legend. Hovering over a circle highlights it in orange and displays a tooltip with the year, CPI value, and grain type. The chart includes labeled axes and a title.

Cctan13@dons.usfca.edu

60% match

Loading thumbnail…

Cereal Dataset

This example displays the raw JSON structure of a cereal data record, parsed from a CSV file containing nutritional and rating information for 80 popular cereals. The visualization presents the first data entry as a formatted text output within a container, using a fixed font size for readability. It demonstrates data loading and preprocessing by converting numeric string values to numbers and representing missing values (coded as -1) as NaN. The code imports the dataset from a local CSV and exports both the main rendering function and the processed data for potential further use.

AAri Schechter

60% match

Loading thumbnail…

[A7] (Heat Map for Time Series Data with a Color Legend)

This visualization displays a heat map of the Consumer Price Index for various grains (Corn, Rice, Rye, Wheat) from 2000 to 2015, using a sequential color scale from light to dark yellow-orange to represent CPI values. The example renders time series data as a grid of colored rectangles, with each column representing a year and each row a grain type, alongside a color legend and axes. It uses D3 v7 and the d3-legend library, implementing scales such as `d3.scaleLinear` for the year axis and `d3.scaleSequential` with `d3.interpolateYlOrBr` for coloring. Tooltips appear on mouseover to reveal the exact year, grain, and CPI value, while the data is loaded from a CSV file.

Cctan13@dons.usfca.edu

60% match

Loading thumbnail…

Cereal Dataset

This visualization presents a summary of cereal nutritional data loaded from a local CSV file, including row and column counts, a preview table of the first ten entries, and a bar chart ranking the top ten cereals by rating. Built with D3 v7, the chart uses `d3.scaleBand` and `d3.scaleLinear` to map cereal names and ratings to SVG rectangles, with axes and hover tooltips via appended `title` elements. The page also incorporates simple decorative SVG shapes depicting a cereal bowl and a phone.

Rrajivkarri98@gmail.com

59% match

Loading thumbnail…

[A7] (Small Multiples of Lines Chart with a Color Legend)

This example uses small multiples to display the Consumer Price Index (CPI) of four grains—Corn, Rice, Rye, and Wheat—from 2000 to 2015, with each grain in its own line chart. A color legend identifies each grain’s stroke color. The code loads CSV data via `d3.csv`, renders SVG line charts using `d3.line` and `d3.axisBottom`, and builds the legend with `d3.legendColor` from the d3-legend library.

Cctan13@dons.usfca.edu

59% match