Charts for Fun

100%

Charts for Fun

✓ Published0🌍 Public

Last edited Apr 5, 2020

Created on Apr 5, 2020

Two linked charts display temperature data over time, with a bar chart and a scatter plot sharing the same dataset and axes. The bar chart uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while the scatter plot employs `scalePoint` for discrete timestamps. Both render as SVG and customize D3 v5 axes with `axisLeft` and `axisBottom`, removing domain lines and adding axis labels. The data comes from a CSV file loaded via `csv()`, with temperature values multiplied by 1000 for display.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a bar chart

This example visualizes temperature readings over time from a CSV file as a line chart with overlaid circles marking each hourly data point. The code uses D3 v5 modules including `scaleTime`, `scaleLinear`, `line`, `axisLeft`, and `axisBottom` to render an SVG graphic. The temperature data is parsed, sorted, and scaled to fit within a 960×500 SVG canvas, with axes generated via D3’s axis components. The chart demonstrates fundamental D3 data-join and DOM manipulation techniques for creating and styling SVG elements.

MMorten Kjølstad Dybo

80% match

Loading thumbnail…

Let's make a temperature chart bar

This bar chart displays temperature readings for six labeled controllers, ranging from 5 to 60 degrees. The data is loaded from a local CSV file and rendered as SVG rectangles with axes. Built with D3 v5, it uses `scaleBand` and `scaleLinear` for positioning, `axisBottom` and `axisLeft` for tick marks, and `csv` for data parsing. Each bar’s height corresponds to its temperature value, with the y-scale inverted to align with the SVG coordinate system.

AArnaud Gbaguidi

79% match

Loading thumbnail…

Temperature Plot

This visualization displays temperature readings over time, with each data point represented as a semi-transparent circle plotted along a time-scaled x-axis and a linear temperature y-axis. The chart includes labeled axes, gridlines, and a title, showing how temperatures fluctuate across several days. Using D3 v6 within a React framework, the code loads CSV data via the `csv` method, parses the timestamp and numeric temperature values, and renders the SVG using `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the visual.

Bbrett@cloudaccelerator.co

79% match

Loading thumbnail…

Scatter Plot Template

This scatter plot displays temperature readings over time for San Francisco, with each circle representing a data point. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures to positions, while d3.axisLeft and d3.axisBottom generate the labeled axes with grid lines. Data is loaded as CSV via d3.csv and converted to Date and numeric types before rendering as semi-transparent steelblue circles. The chart includes custom axis labels and a title, all drawn as SVG elements within a fixed-width container.

LLex

77% match

Loading thumbnail…

Temperature Line Chart

This line chart visualizes temperature readings over time, with a smooth curved line and circular markers at each data point. The visualization uses D3’s `scaleTime` and `scaleLinear` for axes, `line()` with `curveBasis` for the path, and `axisBottom`/`axisLeft` for ticks. Data from a CSV of San Francisco temperatures is loaded via `csv` and parsed into dates and numbers. The SVG rendering includes gridlines, axis labels, and a title, with the line styled in steelblue.

DdeafMother

77% match

Loading thumbnail…

Temperature Ca

This visualization displays temperature over time as a smooth, filled area chart. The chart uses a time-based x-axis and a linear y-axis, with an overlaid line and semi-transparent pink fill. Built with D3 v5, it loads CSV data from a remote source and renders via SVG. The code specifically utilizes `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisLeft`, and `axisBottom` to construct the plot, with custom styling applied through CSS.

Aaidanoconnor1

77% match

Loading thumbnail…

Temperature scatterplot chart

A temperature scatterplot shows hourly temperature readings over one week, with time on the x-axis and degrees on the y-axis. Each data point is an SVG circle colored teal, with a native `<title>` tooltip displaying the exact temperature value. The chart uses React components for the axes and marks, while D3 v6 APIs (`scaleTime`, `scaleLinear`, `extent`, `csv`) handle data loading, scaling, and tick generation. The dataset comes from the Sense Your City weather CSV, and labels are formatted with `timeFormat`.

Ssurikmeetr

77% match

Loading thumbnail…

Charts for Fun

This example displays the top 10 most populous countries as both a bar chart and a scatter plot, using 2018 population estimates from the United Nations. Both visualizations share the same title and x-axis label, though the data shown is actually Basel temperature values loaded from an external CSV. The code uses D3 v5 APIs including `scaleBand`, `scalePoint`, `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG charts with customized tick formatting and grid lines. Each chart applies opacity to its red marks, and bars and circles are sized according to the numeric temperature values.

BBrenda199708

76% match