100%

D3 in depth

✓ Published0🌍 Public

Last edited Dec 25, 2023

Created on Dec 25, 2023

Forked from Learn D3

This example shows horizontal bar charts for the populations of five cities, with city names positioned to the right of each bar. A hover effect changes the bar color from steelblue to orange. The visualization is built with D3 v7, using selections, data binding, and the `join` method to create SVG `rect` and `text` elements. The data is hard-coded in an array of city objects, and bar widths are scaled by multiplying population values by a constant factor.

AI-generated description

Learning D3

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 DataBinding

Two small bar charts display municipal census data as horizontal steelblue bars, sorted in descending order by population. Each bar is labeled with its municipality name in small sans-serif text. Built with D3 v5, the example uses `d3.json()` to load data and `d3.scaleLinear()` for the x-axis scale, with `selectAll().data()` and `enter()` appending SVG `<rect>` and `<text>` elements. The data comes from a GitHub-hosted JSON file.

663anp3ca

84% match

Loading thumbnail…

data join

This example demonstrates the D3 data join pattern by binding an array of city population objects to SVG rectangles and text labels, producing a simple horizontal bar chart. The code uses `select` and `data` from D3 v7, with the `.join` method to create elements for each datapoint. Rectangles are sized proportionally to population via a scale factor, while a separate join on a `.labels` group renders each city’s name. The SVG canvas is fixed at 2000×2000, with five cities hardcoded in the script.

HHeet Bhatt

84% match

Loading thumbnail…

Data join with array of objects

Five city names and population figures from an array of objects render as a horizontal bar chart with steel-blue rectangles and right-aligned labels. The example demonstrates D3’s data join, where each object binds to both a `rect` and a `text` element, using `.data()` and cascading `.attr()` calls. Bar widths scale linearly from the `population` property, while vertical positions derive from the index. A CSS `:hover` rule turns bars orange, and the fixed SVG canvas supplies the static geometry.

663anp3ca

82% match

Loading thumbnail…

D3 Barplot

This barplot displays population values for multiple countries, with bars animating upward from a shared baseline when the chart initializes. The visualization relies on D3’s `scaleBand` and `scaleLinear` for axes, `transition` for smooth growth, and custom tooltip handlers (`mouseover`, `mousemove`, `mouseleave`) that update a styled HTML div. Data comes from a CSV file fetched via `d3.csv`, and the SVG output includes custom Roboto Condensed fonts, axis titles, and a chart title.

SSubhendu Karmakar

82% match

Loading thumbnail…

new d3

This example displays a horizontal bar chart of the populations of five countries, with bars animating to a reduced opacity on mouseover and a tooltip indicating the country name. The visualization loads population data from a local CSV file, and uses D3 v6’s modular `select`, `csv`, `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the SVG bar chart. The code applies custom tick formatting for millions and uses a transition to animate bar opacity, while omitting axis lines and ticks for the categorical axis.

Aalbatross97

82% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of several global cities, with each bar’s length representing a city’s population. The visualization uses D3 v7 to load a CSV file, then applies `scaleLinear` for the x-axis population scale and `scaleBand` for the y-axis city categories. SVG rectangles are appended and sized using these scales, with `axisLeft` and `axisBottom` rendering the labeled axes. The chart is styled with steelblue fills and a fixed 960×500 SVG canvas.

Ssheafallick

82% match

Loading thumbnail…

D3 Example

This D3 example visualizes the populations of three cities—Shanghai, Buenos Aires, and Mumbai—as a horizontal bar chart. It shows population magnitudes through bar lengths along a linear x-axis, with city names on the ordinal y-axis. The visualization uses D3.js (v3) to load a CSV file, scale data, and render SVG elements. The code employs `d3.scale.linear`, `d3.scale.ordinal`, and `d3.svg.axis` to construct axes, while formatting tick labels with `d3.format("s")` for compact notation. Data comes from the included `geonames_cities_top3.csv` file.

CCurran Kelleher

82% match

Loading thumbnail…

D3 DataBinding

This example demonstrates a simple bar chart that visualizes municipal census data from a JSON file, showing municipality names alongside their census values. The visualization uses D3 v5’s data join pattern to bind dataset elements to SVG rectangles and text labels, sorting bars in descending order and scaling bar widths with `d3.scaleLinear`. The code loads data asynchronously via `d3.json` and renders two separate SVG containers, though only the first is populated. Text labels are positioned manually without an x-coordinate, leaving them at the SVG’s default origin.

663anp3ca

81% match