All Kickstarter projects grouped by cities

100%

All Kickstarter projects grouped by cities

✓ Published0🌍 Public

Last edited Mar 3, 2017

Created on Mar 3, 2017

This visualization displays 100,000 Kickstarter projects as a bubble chart, grouped by city, with circle size representing the number of backers per project and color encoding the project category. It uses d3.pack for the hierarchical bubble layout, d3.hierarchy to structure data by city and category, and d3.scaleOrdinal to map categories to colors. The code loads project data from CSV files, aggregates counts by city and subcategory, and offers checkboxes to toggle between standard and Polygraph-inspired color schemes or to regroup by categories. User interaction updates the visualization dynamically via the d3.v4 library.

AI-generated description

Bubble chart showing 100.000 Kickstarter projects. Based on the data and idea of Polygraph but trying to reorganize the colors. Color represents the project category, size the number of backers.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4063269'>Bubble Chart</a>

forked from <a href='http://bl.ocks.org/john-guerra/'>john-guerra</a>'s block: <a href='http://bl.ocks.org/john-guerra/0d81ccfd24578d5d563c55e785b3b40a'>Bubble Chart d3 v4</a>

forked from <a href='http://bl.ocks.org/john-guerra/'>john-guerra</a>'s block: <a href='http://bl.ocks.org/john-guerra/38b1c32154905828f019f35a026b7526'>All Kickstarter projects grouped by cities</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Kickstarter projects by City

This visualization uses a bubble chart to display Kickstarter projects by city. A dropdown menu allows the viewer to select a city, which updates the chart to show projects from that location. Each bubble's size is determined by the number of backers, and its color represents the project's subcategory. The code uses the `d3.pack` algorithm to position the bubbles and `d3.scaleOrdinal` with the `d3.schemeCategory20c` color palette for the category coloring, with data sourced from a provided CSV file.

TThanaporn-sk

94% match

Loading thumbnail…

Nigeria Minerals

An interactive bubble chart maps Kickstarter projects by city, using circle size to represent the number of backers and color to indicate project subcategory. Selecting a city from a dropdown updates the visualization, which is rendered as an SVG using D3 v4. The code leverages `d3.pack` for the bubble layout, `d3.scaleOrdinal` with `d3.schemeCategory20c` for color mapping, and `d3.map` for data joins. Project data comes from CSV files and the chart shows backer counts per project.

SSaminu

76% match

Loading thumbnail…

stacked bar char

This example uses a stacked bar chart to visualize the number of Kickstarter campaigns across six price ranges, from under $1,000 to over $1 million, for each project category. The visualization is interactive, allowing users to toggle between stacked and grouped bar layouts via an HTML radio button, with smooth animated transitions between the two states. It is built with D3.js version 6.7.0, using `d3.csv` for data loading, `d3.layout.stack` for the stacking logic, `d3.scale.ordinal` and `d3.scale.linear` for axes, and `transition.attr` for the animated changes. The SVG rendering displays color-coded layers with a legend, rotated x-axis labels, and a tooltip on mouseover.

YYash Goyal

68% match

Loading thumbnail…

Activity6_Task4

A bubble chart visualizes 25 U.S. cities by plotting their population on the x-axis and area in square kilometers on the y-axis, with bubble size encoding GDP and color distinguishing each city. Hovering shows a tooltip with city details. Built with D3 v7, it uses `d3.scaleLinear` for axes and size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for colors, and SVG circles with mouse event handlers. Data comes from `citydata.csv`, rendered as an animated SVG with a legend.

Rrahman.mehmood2002@gmail.com

67% match

Loading thumbnail…

grouped to stacked transition

This animation demonstrates the transition between grouped and stacked bar charts using Kickstarter crowdfunding data. The dataset breaks down successful projects by category (e.g., Music, Film & Video) and funding amount brackets, from under $1,000 to over $1 million. The visualization uses D3.js to interpolate between the two layouts, with each bar representing a category and color-coded segments for funding ranges. The transition smoothly morphs the bars' positions and heights, making it easy to compare category totals and part-to-whole relationships. The animation loops ping-pong style over 3 seconds, showing the data in both formats.

CCBasis

67% match

Loading thumbnail…

task4.2

This bubble chart visualizes 15 global cities by population (millions) on the y-axis, area (km²) on the x-axis, and population density as the bubble radius. Each circle is colored by region using `d3.scaleOrdinal` with `d3.schemeTableau10`. The code loads `globalCities.csv`, converts numeric fields, and renders SVG circles with `d3.scaleLinear` for both axes and `d3.scaleSqrt` for the radius. Axis labels and ticks are generated via `d3.axisBottom` and `d3.axisLeft`, with the chart drawn inside an SVG container.

GGanesh Gundekarla

66% match

Loading thumbnail…

Fork of Bubble Chart Visualization

This fork of a bubble chart visualization displays the relative number of boba shops across eleven California cities using an interactive force-directed layout. Circles are initially clustered at the center, then repelled and spaced by d3.forceSimulation, d3.forceManyBody, and d3.forceCollide until stable. Users can drag any circle with d3.drag, while a custom tooltip reveals city names and counts on hover. The visualization loads data from a CSV file via d3.csv, scales circle radii with d3.scaleLinear, applies an ordinal color scheme, and renders everything as SVG elements.

Wwaterm80

65% match

Loading thumbnail…

Fork of Cities on a Globe

This interactive visualization shows a globe displaying circles for cities with populations over 100,000, using data from Geonames. Users can pan and zoom the orthographic projection, with low-resolution world boundaries shown during movement and higher-resolution boundaries when settled. The globe is rendered using d3.geoPath with a d3.geoOrthographic projection, while city positions are computed and projected onto the SVG. d3.drag handles rotation, and d3.zoom manages scaling. Hovering over a city reveals a tooltip, implemented with d3-tip, showing the city name and formatted population. Data includes country outlines from the world-atlas TOPOJSON files and city coordinates from a preprocessed CSV.

PPiotr Paszek

65% match