timeline lollipop chart

100%

timeline lollipop chart

✓ Published0🌍 Public

Last edited Jun 15, 2019

Created on Jun 15, 2019

This timeline lollipop chart compares the tenures of six global car company CEOs, showing the year each executive was placed in charge of their group. The chart uses a D3.js v4 SVG rendering with a lollipop-style presentation, where each CEO's start year is marked as a dot on a horizontal timeline. The visualization uses `d3.csv` to load the data, `d3.scaleBand` for the y-axis categories, and `d3.scalePoint` for the x-axis years, with alternating row backgrounds for readability. The data comes from a CSV file listing the person, company, and year.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/dhexonian/'>dhexonian</a>'s block: <a href='http://bl.ocks.org/dhexonian/265f65d35205ea8d383f936a853dadf0'>timeline lollipop chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Lollipop Chart: 2008-2012

This interactive lollipop chart displays four football statistics—Goals, Goals Conceded, Titles, and League Points—for the years 2008 through 2012. Clicking a button triggers the `update` function, which transitions the vertical lines and circle markers to new values using animated `transition` calls on SVG elements. The chart reads tabular data from a remote CSV file via `d3.csv` and scales axes dynamically with `d3.scaleBand` and `d3.scaleLinear`. Rendering is entirely SVG-based, with axis and glyph transitions handled through D3's selection and merge operators.

SSimon Hackbert

67% match

Loading thumbnail…

ICE-7 Line Chart

This example shows car company sales from 2000 to 2015 as a single line chart, using d3.line to connect annual data points along a time-based x-axis and a linear y-axis. The SVG rendering includes styled axis ticks, grid lines, and labels for both axes, with the line path drawn in purple. Data is loaded as CSV from a GitHub gist, parsed with d3.csv, and scales are set with scaleTime and scaleLinear. Axis generators d3.axisBottom and d3.axisLeft create the framed plot, while a title and rotated axis label are added manually.

Ppremsaiv

65% match

Loading thumbnail…

Car Sales

This line chart shows car sales by year from 2013 to 2021, with the years on the x-axis and total sales on the y-axis. The SVG rendering uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator with data loaded via `csv` from a GitHub gist. The chart includes gridlines from tick marks, rotated axis labels, and a red path for the trend line.

JJyothicherukuri

64% match

Loading thumbnail…

Car Sales Donut Graph

This donut chart visualizes car sales by brand, showing the proportion of total vehicles sold for each manufacturer. The chart uses a categorical color scale with distinct hues for each brand, displays sales counts directly on larger segments, and includes an interactive legend listing brand names with corresponding color swatches. Built with D3 v7, the visualization loads car sales data from a CSV file and uses `d3.flatRollup`, `d3.pie`, and `d3.arc` to generate the donut geometry. Only brands with sales exceeding 1,000 units display their counts on the chart.

MManideeprenikindi

64% match

Loading thumbnail…

carbrandsales

This horizontal bar chart displays the top ten car brands by 2016 sales, using React to render SVG elements and D3 scales for layout. The visualization loads CSV data via `d3.csv`, applies a linear scale for sales values, and a band scale for brand names. Orange rectangles represent each brand’s sales figures, with gridlines and tick labels generated from the x-axis scale. The chart focuses on comparing relative sales performance across brands in a single year.

Vvaddepallinaveen

64% match

Loading thumbnail…

bar chart races

An animated bar chart race visualizes the rising and falling brand values of the top global companies over an 18-year period. Using SVG and animation, the visualization ranks the twelve most valuable brands each year, displaying their changing positions and values. The code employs D3 v5's scale, axis, selection, and interval APIs for data handling, layout, and smooth transitions, with data sourced from a CSV file of Interbrand rankings. Color-coded bars and labels depict each brand's trajectory dynamically.

AAjayyy

64% match

Loading thumbnail…

Lollipop Chart

This lollipop chart compares the yearly pay gap between the lowest, median, and highest paid employees at five universities. Hovering over circles displays the specific salary values. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleBand` for categorical y-axis positioning, `d3.scaleLinear` for the salary x-axis, and `d3.line` generators for the connecting stems and grid lines.

TThanaporn-sk

64% match

Loading thumbnail…

testing

This example visualizes the lifespan of companies by grouping them into age categories based on their incorporation and dissolution dates. The bar chart displays five age brackets (0-3, 4-7, 8-11, 12-15, and more than 15 years) with the height of each steel-blue rectangle representing the count of companies in that range. The code uses D3 v5’s `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct and render the SVG chart from a CSV file, with company names also parsed to count term frequencies.

BBarryC7

64% match