Skip to main content
SimilarExport ZIP
100%

Loading external data

✓ Published0🌍 Public
Rremyapk
Last edited Mar 13, 2020
Created on Mar 13, 2020
Forked from HTML Starter

This example demonstrates loading external data from a JSON file and rendering it as a horizontal bar chart. The data contains employee names, titles, ages, and bonus statuses, with age plotted against name using D3 v4’s `d3.json` to fetch the file. Scales `d3.scaleLinear` and `d3.scaleBand` position the bars, while `d3.axisLeft` and `d3.axisBottom` generate axes. The SVG output is styled with hover effects in CSS, and the chart updates once data is loaded asynchronously.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of employee salaries from a CSV file, with each bar’s length proportional to salary and labeled by first name. It uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for positioning, and appends SVG rectangles. The chart omits axes and text labels, instead focusing on the core scaling and data-binding workflow. Bars are styled steelblue via CSS, and the rendering is static SVG in a 960×500 viewport.

DDavid
78% match
Loading thumbnail…

Data loading

This example demonstrates how to load and inspect a CSV dataset using D3 v4. The code uses the `d3.csv` method to fetch `employees.csv`, which contains three employee records with `Name` and `Age` fields. Each record is logged to the browser console, printing both the name and age values for every row. The visualization itself renders a fixed 960×700 SVG area, though the primary focus is on the asynchronous data-loading workflow rather than producing a visual chart. The page also loads D3 v6.6.2 in addition to v4, though only the older API is invoked for parsing.

Hhanulik.ondrej@gmail.com
76% match
Loading thumbnail…

Loading data with React

This example demonstrates how React state manages data loaded asynchronously with D3 utilities. A bar chart displays quantitative values with axes, using D3's `scaleLinear` for positioning and `axisBottom` for tick labels. The visualization renders SVG elements generated through React components, with hover interactions highlighting individual bars. Data originates from a CSV file fetched via `d3.csv`, and the loaded dataset populates the chart after a state update triggers re-rendering.

Nn.koldovsky@gmail.com
75% match
Loading thumbnail…

D3 DataBinding

This example demonstrates a simple bar chart that binds JSON data to SVG elements, showing municipal census values as horizontally sorted bars. The visualization uses D3.js v5 to load data from a GitHub-hosted JSON file and renders two separate SVG containers, though only the first is populated. The code employs D3’s data join pattern with `selectAll`, `data`, and `enter` to append rectangles for bars and text labels for municipality names. A linear scale maps the data domain to pixel widths, while bar heights are fixed and y-positions are computed by index. The chart sorts data in descending order by census value before rendering.

663anp3ca
75% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of names and ages from a CSV file, with the x-axis mapping age and the y-axis mapping names. It uses d3.csv to load the data, d3.scaleLinear for the x scale, d3.scaleBand for the y scale, and d3.axisLeft and d3.axisBottom to render the axes. Bars are drawn as SVG rectangles with steelblue fill, and the chart is positioned inside an SVG element using margins. The code dynamically adjusts the scales based on the data’s maximum value and number of entries.

NNikki-gea
75% match
Loading thumbnail…

HTML Starter

This example shows a horizontal bar chart of population by country using a small CSV dataset. The code loads data with `d3.csv`, scales the population values, and renders SVG rectangles using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. It uses `axisLeft` and `axisBottom` for tick marks, with a steelblue fill for bars. D3 v6 is imported from the npm package, and the chart is built imperatively by appending elements to an SVG container.

Nnouralkhoury
74% 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
74% match
Loading thumbnail…

visualizing data

A simple bar chart displays four data values as green rectangles, encoding each number through bar width while the y-axis positions them vertically. The visualization uses D3 v4 with an SVG rendering approach, employing `d3.scaleLinear` to map data values to pixel widths and `d3.axisBottom` to generate a horizontal axis. The `enter()` selection appends rectangles with fixed heights, while static data is passed directly to `d3.selectAll`. The chart demonstrates basic D3 data binding and axis creation without interaction or animation.

Rremyapk
74% match