Plant Counts:

100%

✓ Published1🌍 Public

Last edited Oct 2, 2022

Created on Oct 2, 2022

This interactive plant-counting tool records field data from staff second estimates. Two synchronized counter panels let users increment and save the number of rows per field and the average plants per row. Using plain JavaScript with event handlers and DOM updates, each save appends the current count to a running log. The layout uses basic HTML elements with CSS styling, while the D3 library is loaded but does not drive the visualization logic.

AI-generated description

This Plant Count app takes plant entries per field following number of rows per field, taking different fields and average number of plants per row within a specific field. The data comes from field staff doing their 2nd estimate.

MIT Licensed

Similar vizzes

Loading thumbnail…

Casino Blackjack

This visualization tracks plant counts in agricultural fields using a simple counter interface. It shows two separate tallies: the number of rows in a field and the average number of plants per row, both controlled by INCREMENT and SAVE buttons. The code uses vanilla JavaScript DOM methods like `getElementById` and `textContent` to update displayed counts and log previous entries. D3 is loaded via CDN but is not actively used. Data comes from field staff conducting their second estimate, with values manually entered by users.

AAndrew-Kiwa

80% match

Loading thumbnail…

People Counting App

This example shows a manual passenger-counting interface with a large numeric display, an INCREMENT button, and a SAVE button. The app tracks how many people have entered and logs previous entries in a running text string. Using plain JavaScript functions (`increment()` and `save()`), it updates the displayed count via `textContent` and resets the counter after each save. The visual design relies on CSS background styling with `background-image` and `background-size`, while the interface itself is built from static HTML buttons and headings without any external charting or data libraries.

GGayan Priyadarshana

66% match

Loading thumbnail…

circle packing

An interactive scatterplot of plants, positioned by their minimum and maximum light needs, visualizes the relationship between these two variables. The plot displays circles sized by average plant height, with a grid of rectangles that animate to highlight selections. Using D3 v7, the visualization employs `scaleLinear`, `scaleBand`, and `d3.axisTop`/`d3.axisLeft` to construct axes, while a dropdown menu filters the plotted circles by their maximum light requirement. The SVG renderer draws all elements, with transitions animating the selection highlights.

Sscheenmi@gmail.com

62% match

Loading thumbnail…

my PLANTS tree

This interactive tree diagram visualizes a hierarchical classification of plants, with a root node labeled “PLANTS” branching into categories like FLOWERS, CACTUS, VEGETABLES, and JADES, each with two child species. Users can click nodes to collapse or expand subtrees, with smooth animated transitions. Built with D3.js v3, it uses the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute positions and draw curved links, rendering nodes as circles and text in an SVG. The dataset is hardcoded as a JavaScript object in the HTML file, with styling defined in embedded CSS.

Aakhilgupta11

62% match

Loading thumbnail…

Common UI Elements with D3

This example demonstrates how to build a simple interactive counter using standard UI elements with D3. It shows a button and a text display that updates the click count in real time. The implementation uses D3 selections to create the button and counter div, with event handling via the `on` method to update application state. The `state` object manages the count, and `setState` triggers re-rendering. The code leverages D3's data join pattern with `selectAll` and `join` to bind elements. Styling is handled through CSS classes defined in `styles.css`, using Flexbox for centered layout and green button styling.

CCurran Kelleher

61% match

Loading thumbnail…

Customising numbers

This example demonstrates interactive selection in a small multiples-style scatter plot. It displays iris flower measurements from a CSV file, using D3.js to map sepal length to the x-axis and petal length to the y-axis, with each species represented by a distinct colored dot. A brushing interaction lets users drag a rectangular selection over the plot; the code uses D3’s brush API and event handling to apply a CSS class that highlights selected points within the brushed area, while unselected points remain dimmed.

SShane Carey

61% match

Loading thumbnail…

SDV_Assignment

This example displays a summary of the Plants dataset, showing the file size in kilobytes, the number of rows, and the number of columns in a styled `<pre>` element. It uses the D3.js v5 library’s `csv` method to fetch and parse a remote CSV file, then computes the summary using `d3.csvFormat`, `dataset.length`, and `Object.keys`. The page’s visual design includes a decorative landscape with grass and layered CSS trees, while the data text appears centered in a bordered box against a lavender background. The code reads from a GitHub-hosted CSV and renders only textual statistics, with no charts or interactive elements.

Ttelkapallyrekha@gmail.com

60% match

Loading thumbnail…

Scoring Test

This example shows a simple interactive counter where a button click increments a numeric display. It demonstrates how to build a reactive UI using D3's selection and data join methods, with the `setState` function managing state updates. The code uses D3 v7, specifically `select`, `selectAll`, `join`, and `.on` event listeners, while styling the button and counter with flexbox in CSS. The counter text updates dynamically to reflect the current count, and the example highlights D3's role in handling both DOM manipulation and state-driven rendering.

CCurran Kelleher

60% match