XQuery Grain Mashup

100%

XQuery Grain Mashup

✓ Published0🌍 Public

Last edited Dec 15, 2014

Created on Dec 1, 2014

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.

AI-generated description

Similar vizzes

Loading thumbnail…

exist-db tested XQuery Grain Mashup

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.

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

65% 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

64% match

Loading thumbnail…

Project_Line_Chart

This visualization tracks wheat production over time for various Indian states, using a multi-line chart where each colored line represents a state's annual output in tons. The chart displays a y-axis labeled "Production (tons)" and an x-axis labeled "Year," with key data points labeled directly at the end of each line. Built with D3.js, the code merges two CSV datasets from the author's GitHub repository—crop production and district-level data—filtering for wheat and mapping year and production values. The visualization uses `scaleTime` for the time axis, `scaleLinear` for the production axis, and the `line` generator to draw each state's trend line with `schemeCategory10` for color encoding.

Aanushapodapati99@gmail.com

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

62% 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

62% match

Loading thumbnail…

Fork of Crop_Yield Data

This example visualizes annual crop production across Indian states from a CSV dataset, using a line chart to show yield trends over time. The viz.js file employs the Vega-Lite API to map Crop_Year to the x-axis, Production to the y-axis, and State to color, with a tooltip displaying the crop name. The chart is rendered by the Vega-Lite API, which is registered with VEGA and a tooltip handler. The data is loaded via D3’s `csv` function from a GitHub repository, and the appearance is customized through the `config.js` file, adjusting axis colors and fonts.

BBhanu Siva Kumar Kommana

61% match

Loading thumbnail…

My first stacked area chart

This stacked area chart visualizes U.S. pumpkin and squash production from 1961 to 2013, broken down by world region. Built with D3.js, it uses an ordinal color scale ranging from cream to deep orange, with each region’s production stacked over time. The chart includes hover effects that highlight individual areas in orange, making it easy to compare regional contributions. Data is loaded from a CSV file, and the axes are formatted with time and linear scales, with the source credited to FAO.org.

CClevejones

61% match