D3 Example

100%

✓ Published0🌍 Public

Last edited May 17, 2016

Created on May 17, 2016

This visualization displays the temperature readings from a network of weather stations across Bangalore, with each horizontal bar representing a station and its temperature on the x-axis. The data comes from the Yuktix Open Weather Project API, accessed via `data.json`. The visualization uses D3.js to create an SVG bar chart, employing `d3.scale.linear` and `d3.scale.ordinal` for scales and `d3.svg.axis` for axes. A custom tooltip, implemented with a D3 text element, shows the temperature value on hover. Stations are sorted by temperature, and the bars use a Playfair Display font for a distinct aesthetic.

AI-generated description

A bar chart of temperatures across Bangalore. Data from Yuktix Open Weather Project, endpoint get-module-snapshot.php, snapshot from May 17, 9:00PM.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/d02ad2dbe0fe688e46c45c3a7f001f50'>Observer Pattern Benchmarks</a>

Similar vizzes

Loading thumbnail…

D3 Example

This example shows a line chart of temperature readings in San Francisco over a week in March 2015, rendered as an SVG. The chart uses D3's time scale for the x-axis (timestamp) and a linear scale for the y-axis (temperature in °C). The line is drawn with a black, 1-pixel stroke, and both axes include styled tick labels and descriptive titles ("Time" and "Temperature °C") with a Poiret One font. The visualization reads the data from a CSV file and updates the scales and line path accordingly.

CCurran Kelleher

75% match

Loading thumbnail…

D3 Example

As more data loads, this D3 example builds a multi-day temperature line chart for San Francisco, one CSV file at a time. Each file holds a day of hourly readings, and the visualization re-renders as each new day is fetched, revealing the dataset’s daily cycles. The SVG line chart, based on a standalone example, shows the temperature curve extending across time with each incremental load, demonstrating how to stream and update data progressively in the browser.

CCurran Kelleher

74% match

Loading thumbnail…

Diverging Bar Chart of Temperatures

This diverging bar chart displays average December 2016 temperatures for various station cities, with each horizontal bar extending left or right from a central zero axis to show below- or above-freezing values. The bars are colored using a sequential red-blue interpolator (`d3.scaleSequential` with `d3.interpolateRdBu`), ranging from blue for cold to red for warm temperatures. The visualization loads weather data via `d3.csv` and renders as SVG, using `d3.scaleBand` for the city axis, `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` for ticks, and the external `d3.legend` library’s `d3.legendColor` for a color scale legend. Hovering over a bar turns it red.

AAllen Ho

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

73% match

Loading thumbnail…

Bar Chart

This bar chart visualizes the latest temperature readings from seven cities, using live data from the Data Canvas - Sense Your City API. Built with D3 v3 and an SVG rendering approach, it follows a reactive model-based architecture: the chart derives its width, height, scales, and axes from a set of properties, automatically updating when data or configuration changes. The X axis displays city names sorted by temperature, while the Y axis encodes the temperature values. The visualization includes animated transitions, a title, and axis labels, and is implemented as a reusable module that supports sorting and customizable margins. The data updates every five minutes, reflecting the most recent sensor readings.

CCurran Kelleher

73% match

Loading thumbnail…

A6 - Diverging Bar Chart in D3

This diverging bar chart compares average temperatures across cities, using a diverging color scale (blue to red) to show deviations from the mean baseline. The visualization renders as SVG via D3 v7, with bars extending left or right from the baseline depending on whether temperatures fall above or below average. It uses `d3.scaleDiverging` with `d3.interpolateRdBu` for coloring, `d3.scaleBand` for city categories, and a `d3.legendColor` legend. Data comes from a CSV file containing weather records, loaded with `d3.csv`, and the chart includes labeled axes and a title.

RRiya Mathur

72% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays hourly temperature forecasts from a weather API, with bars representing temperatures over a 40-hour period. The visualization animates bars growing from the bottom using D3 v5 transitions with a bounce ease, while hover interactions highlight bars in yellow and show tooltips with exact values. Colors transition from white through blue to red based on temperature ranges using a linear scale. The chart pulls data from a local `forecast.json` file and renders as an SVG.

BBraja Gopal Das

72% match

Loading thumbnail…

Temperature in San Francisco with D3.js!

This example visualizes hourly temperature readings in San Francisco over several days in March 2015. Each data point appears as a semi-transparent circle on a scatterplot, with time on the x-axis and temperature in degrees Celsius on the y-axis. The chart is rendered as SVG using D3.js v5, with scales and axes built via `scaleLinear`, `axisBottom`, and `axisLeft`. Data is loaded from a CSV file using `csv`, and the circles are appended to the SVG with `selectAll().data().enter()`.

CCalvin Gomez

72% match