Skip to main content
100%

Dimple.js Bar & Scatter Chart Analysis

✓ Published0🌍 Public
Aadry34160
Last edited Feb 8, 2017
Created on Feb 8, 2017

This example combines a bar chart and a scatter plot on a shared time axis to display daily quantity measurements from a tab-separated data file. The bars show the raw quantity values, while the overlaid scatter points highlight individual data points. Using the Dimple.js library with D3 v3, the code defines a time-based x-axis and a measure-based y-axis, then adds two series with `dimple.plot.bar` and `dimple.plot.scatter`. The chart is rendered as SVG, with a custom purple fill applied to the first series via CSS.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/adry34160/'>adry34160</a>'s block: <a href='http://bl.ocks.org/adry34160/72114b677333945a2a207c84c04db263'>Dimple.js Line Scatter Analysis</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Dimple.js Line Scatter Analysis

This visualization shows a dual-encoding time series of quantities across dates, combining a purple line chart with overlaid scatter points to highlight individual data values alongside the overall trend. The chart uses a time-based x-axis with four-interval ticks and a measure-based y-axis, rendered as SVG. It loads tab-separated data via d3.tsv and constructs the chart with dimple.js, adding both dimple.plot.line and dimple.plot.scatter series to a single dimple.chart instance, with the series color styled through CSS.

Aadry34160
87% match
Loading thumbnail…

Dimple.js simple time chart

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.

663anp3ca
76% match
Loading thumbnail…

Scatter Bubble Pie (dimplejs & d3js)

A scatter bubble pie chart built with dimplejs and d3js visualizes retail sales data from a TSV file with one row per SKU and month. Each bubble is positioned by unit sales (x-axis) and sales value (y-axis), with the bubble area encoding distribution. Inside each bubble, a small pie chart shows the proportion of gross profit versus operating profit, while a single row of data per category is used to color-code the bubbles by brand or price tier. The example demonstrates how to layer pie segments inside scatter bubbles to combine three quantitative variables and one categorical dimension in a single view.

Aaaizemberg
72% match
Loading thumbnail…

D3: Time axis, prettier

This example shows a time-based scatterplot of daily amounts, with vertical grid lines and circular markers positioned along a date axis. The visualization uses D3 v5 and loads data from a CSV file via `d3.csv`, parsing date strings with `d3.timeParse` and formatting axis labels with `d3.timeFormat`. Axes are created using `d3.axisBottom` and `d3.axisLeft`, while `d3.scaleTime` and `d3.scaleLinear` handle the positioning. The SVG rendering draws lines and circles for each data point, making the temporal trend of the amount values immediately apparent.

Nnikomc
71% match
Loading thumbnail…

22 - Simple d3.js bar chart

A simple bar chart displays monthly values from a local CSV file, with dates parsed using `d3.time.format` and an ordinal x-scale with `rangeRoundBands`. The SVG rendering uses `d3.svg.axis` for rotated month labels and a linear y-scale, with steelblue rectangles sized from the data. The example loads data via `d3.csv`, applies margins, and defines axes with tick formatting for year-month values, showing a clear upward trend in the metrics across 2013 and early 2014.

Aadry34160
71% match
Loading thumbnail…

Simple d3.js bar chart

This simple d3.js bar chart displays monthly values over a two-year period, with each bar representing a data point from a CSV file. The visualization uses d3.scale.ordinal and d3.scale.linear to map categorical dates and quantitative values, respectively, to pixel positions. Axes are rendered with d3.svg.axis, while the bars themselves are drawn as SVG rectangles with a steelblue fill. The chart includes a navigation interface with circular arrow buttons and a detail area, though the interaction logic is incomplete. Data comes from the external file bar-data.csv, and the visualization is built using the D3 version 3.5.17 library.

PPatrick Wojda
71% match
Loading thumbnail…

Modifying Bar plot to a scatter plot D3.js

This example transforms a simple bar chart of population data by country into a scatter plot using D3.js. D3's `scaleLinear` maps population values to the x-axis, while `scalePoint` positions each country name along the y-axis, with circles rendered as the marks. The visualization reads from a CSV file and uses `axisLeft` and `axisBottom` to generate the axes, with tick labels formatted using D3's `format` function.

Ggorfoula
71% match
Loading thumbnail…

D3

This example demonstrates an animated pie and bar chart using the D3.js v3 library. The pie chart visualizes an array of six numeric values with arc segments, while the bar chart displays a separate dataset with an elastic growth animation. The charts are rendered as SVG elements, with the bar chart featuring interactive hover effects that change bar colors and display tooltips. The code utilizes D3 APIs including `d3.layout.pie`, `d3.svg.arc`, `d3.scale.ordinal`, and `d3.scale.linear` for data binding, scaling, and animation transitions.

Mmrharis1
71% match