Skip to main content
SimilarExport ZIP
100%

Rain fall Lawrence, MA

✓ Published1🌍 Public
Jjjacobatandover
Last edited Jul 13, 2021
Created on Jul 12, 2021

This bar chart displays daily precipitation levels in Lawrence, MA, filtering the data to July only. The visualization uses the Vega-Lite API with custom configuration for styling, while loading CSV data from a GitHub-hosted weather dataset. The chart renders as an SVG with bars colored by default, and includes tooltips that show the date on hover. The code registers vega-lite and vega-tooltip for interactivity, and uses d3.csv to fetch the underlying weather data.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Snow Depth Data 2019-2020

A scatter plot displays daily average snow depth in Lawrence, Massachusetts, from the 2019–2020 winter season. Each point represents a date, with tooltips revealing the exact date on hover. The visualization is built with the vega-lite-api, which registers vega and vega-lite, and loads data from a CSV file using d3.csv. The chart is rendered as a full-window SVG, with custom axis and label styling configured through Vega-Lite’s config object.

Jjjacobatandover
78% match
Loading thumbnail…

Rainfall

This visualization shows monthly effective rainfall measurements over time as a histogram of steelblue bars. The chart maps dates on a time-scaled x-axis and rainfall values on a linear y-axis, using D3 v5’s `scaleTime`, `scaleLinear`, and `axisBottom`/`axisRight` APIs. SVG rectangles are bound to data from a CSV dataset, with each bar’s height determined by the `EffectiveRainfall` value. The code loads the external CSV via `d3.csv` and parses dates with `timeParse` before rendering.

SShane Carey
70% match
Loading thumbnail…

Vega-Lite Bar Chart

This example embeds a Vega-Lite specification into a webpage using the vegaEmbed API, rendering an interactive bar chart of precipitation counts from Seattle weather data. The chart uses a binned x-axis for precipitation values and a y-axis showing aggregate counts, with the data pulled directly from a GitHub-hosted CSV file. The code loads Vega, Vega-Lite, and Vega-Embed libraries from a CDN, and the mark type is set to `bar`. A separate JSON file defines a point chart with nominal and quantitative encodings, but the index.html file demonstrates the primary bar chart visualization.

MMarmiya
69% match
Loading thumbnail…

Vega-Lite API Template

A bar chart displays the per-capita burglary rate for Massachusetts cities, filtered to those with rates above 0.005, with cities sorted descending by value. Built with the Vega-Lite API, it uses `vl.markBar()` and `vl.y().fieldQ()` for the quantitative axis, while `getData.js` loads a CSV via d3's `csv` method and computes the rate. The chart renders to SVG, with custom axis and label styling from `config.js`.

TTammminana
67% match
Loading thumbnail…

Logan weather 2016-2018

This visualization plots daily maximum temperatures at Logan International Airport from 2016 to 2018 as a scatterplot, using month and day as the x-axis and temperature on the y-axis. Each point’s color encodes the max temperature value, while point size reflects daily precipitation amount, with tooltips revealing exact precipitation totals. The chart is built with Vega-Lite via the `vega-lite-api`, using `markCircle`, `fieldT`/`fieldQ` encodings, and a custom `config` for axis styling. Data is loaded asynchronously from a CSV using `d3.csv`.

Rrohame
67% match
Loading thumbnail…

Vega-Lite API Template

This visualization shows the burglary rate per capita for Massachusetts cities, filtering to only those with rates above 0.005 and sorting the bars from highest to lowest. The bars are rendered with the Vega-Lite API, which builds a specification that Vega then renders as scalable vector graphics. Data is loaded from a CSV file using `d3.csv` and processed to calculate the per-capita metric. Interactive tooltips display the city name when hovering, and the chart automatically fits the browser window dimensions.

CCurran Kelleher
67% match
Loading thumbnail…

Visualization

This visualization displays a 3-day weather forecast using an animated bar chart built with D3.js. It encodes temperature values as bar heights, with a color scale ranging from white to blue to red to indicate temperature intensity. The data is loaded from a local JSON file. Bars animate upward with a bounce effect upon rendering. Interactive tooltips appear on mouseover to show the precise temperature, and hovering highlights a bar in yellow. The chart includes a time-based x-axis and linear y-axis.

Aajoua
65% match
Loading thumbnail…

Major Crimes in Boston

This example visualizes major crimes in Boston from a city dataset, using a bar chart where each bar represents a crime type and its length corresponds to the number of incidents. The bars are color-coded by year, and hovering reveals a tooltip with the crime name and exact count. Built with Vega-Lite and rendered via the `vega-lite-api`, it loads data from a CSV URL using D3’s `csv` method, then applies custom axis styling and tooltip handling from `vega-tooltip`.

JJosvin John
65% match