Dimple.js simple time chart

100%

Dimple.js simple time chart

✓ Published0🌍 Public

Last edited Oct 10, 2018

Created on Oct 10, 2018

This example visualizes the population of Tokyo from 1920 to 2013 as a line and scatter plot, with the x-axis representing time and the y-axis showing population in millions. The chart corrects a misleading original by using five-year intervals for the time axis and removing overlapping labels, relying instead on gridlines to convey precise values. It is built using Dimple.js for chart construction and D3.js v3 for data loading and SVG rendering, with the data loaded from a TSV file containing the yearly population figures. The rendering uses SVG elements, and the white-filled circles for the scatter series are styled via CSS.

AI-generated description

Dimple.js - Simple data visualization chart

This is an example of a corrected chart from the 'Tokyo' Wikipedia article which contains a chart without proper x-axis labels and spacing.

Image here

Critique

The x-axis ticks from year 2005 represent just one year, which is misleading for the reader.
The messages overlapping the chart are not necessary now that the horizontal grid lines show when the specific population number is exceed.

<sub>NOTE: This example is a mini-project for the Udacity's Data Visualization and D3.js course.</sub>

<sub>Camilo Cruz, 2017.</sub>

forked from <a href='http://bl.ocks.org/cccruzr/'>cccruzr</a>'s block: <a href='http://bl.ocks.org/cccruzr/2d0137448d33e5227a30eee4a6825dce'>Dimple.js simple time chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population trends over time, using a layered time-series approach with two distinct shift periods. The visualization employs the Dimple charting library built on D3 v5, rendering SVG elements through `dimple.chart`, `addTimeAxis`, and `addSeries` APIs. The chart displays data along a date-based x-axis and time-of-day y-axis, with bubble sizes representing values via `addMeasureAxis`. The underlying dataset appears to be a custom collection of shift-related measurements rather than actual population statistics, despite the title suggesting demographic data.

Mmellerjakub88

73% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes world population trends over time using D3 v6, drawing an SVG area chart where the x-axis maps years via a time scale and the y-axis represents population counts with a linear scale. The code loads CSV data from a VizHub dataset, applies a curve basis to the area generator, and customizes axes with tick formatting that abbreviates large numbers (e.g., converting G to B). Gridlines, axis labels, and a title are styled through CSS classes, while the chart employs margins and a translated group for layout.

WWayne716

72% match

Loading thumbnail…

Scatterplot

This visualization displays world population trends over time, using a smooth area chart rendered with SVG and D3.js. The y-axis shows population in abbreviated billions, while the x-axis maps years using a time scale. The code builds the chart with `d3.area`, `scaleTime`, `scaleLinear`, and axis components, using a curveBasis for the path. Data comes from a CSV file loaded via `d3.csv`. The chart includes labeled axes and a title, with gridlines created via tick sizes.

MMatan

71% match

Loading thumbnail…

D3 Example

This line chart visualizes world population trends over time, with each line representing a different country. The data comes from the United Nations Population Estimates and is plotted with population on the y-axis and time on the x-axis. The chart uses D3.js to render an SVG, with a color legend distinguishing countries, and axis labels for "Time" and "Population". The visualization highlights population growth patterns across selected countries from 1950 onward, using a custom tick format that abbreviates large numbers with "B" for billions.

CCurran Kelleher

70% match

Loading thumbnail…

D3 Example

This example visualizes world population changes over time using an area chart, with the data sourced from the United Nations Population Estimates. It renders an SVG graphic where the x-axis represents time (years) and the y-axis shows population counts, formatted with a custom SI tick formatter that converts billions to "B". The code uses D3.js version 3.5.5, specifically the `d3.svg.area()` generator to create the filled area shape, along with `d3.time.scale()` for the time axis, `d3.scale.linear()` for the population axis, and `d3.svg.axis()` for the axes. The visualization is implemented as a single static chart without interaction.

CCurran Kelleher

70% match

Loading thumbnail…

population area chart.

This area chart visualizes global population changes over time using D3.js v5. The chart plots data from the world-population-by-year-2015 dataset, with time on the x-axis and population on the y-axis, rendered as a smooth filled area using the `area()` and `curveBasis` APIs. The visualization includes styled axes with custom tick formatting (converting billions to compact notation) and a maroon filled path. The code employs `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the scales and axes, with gridlines drawn via tick size extensions.

YYanxxx447

70% match

Loading thumbnail…

World Population Chart by Davide.js

This example visualizes world population over time as a smooth, filled area chart, with the y-axis labeled in billions and the x-axis showing time. The chart uses D3 v5 to load CSV data from a VizHub dataset, scales the data with `scaleTime` and `scaleLinear`, and renders the area using the `area` generator with `curveBasis`. Axis labels and a title are added via SVG text elements, while grid lines are created through axis tick settings. The data is parsed from the CSV, converting years to JavaScript Date objects and population values to numbers.

DDavideSanto

70% match

Loading thumbnail…

Basic line demo

This example recreates the Highcharts basic line demo with D3.js, showing monthly average temperatures for Tokyo, New York, Berlin, and London. The chart plots four colored, symbol-marked lines on a time-scaled x-axis and linear y-axis with grid lines. It uses `d3.time.scale` for dates, `d3.svg.line` for paths, and `d3.svg.axis` for ticks, with data embedded as JavaScript arrays. SVG rendering places the chart within a margin-based group, while custom color and symbol functions assign distinct styles to each city series.

663anp3ca

70% match