B

bertieip

@bertieip·23 public vizzes

Loading thumbnail…

Stacked Bar - 29/06

This example visualizes the greenhouse gas emissions of major US companies, breaking down each company's total emissions into scope 1, 2, and 3 categories as stacked bars. The chart, built with D3 v5 and rendered as SVG in a React context, uses `d3.csv` to load the mock data and `d3.scaleBand` and `d3.scaleLinear` to map company names and emission values to positions. A dashed line marks the average total emissions across all companies, while hovering over any bar segment reveals its specific value via an appended `title` element.

Loading thumbnail…

Sequences sunburst

This sunburst chart visualizes hierarchical sequences from a CSV of page-access paths, showing the proportion of visits that begin with each sequence. Hovering over an arc highlights its ancestor path in the breadcrumb trail and displays the percentage of total visits it represents, while fading unrelated segments. Built with D3 v4, it uses `d3.partition()`, `d3.arc()`, and `d3.hierarchy()` to compute the radial layout, with colors from `d3.schemeTableau10`. The data is parsed from CSV rows into a tree structure via `d3.csvParseRows()`. Mouseover and mouseleave events drive the interactive highlighting and opacity transitions.

Loading thumbnail…

Relearning and formatting everything

This example shows two bar charts: one displaying the top 10 most populous countries and another projecting emissions targets through 2050 with dashed goal lines. The SVG visualization uses D3 v5 scales including `d3.scaleBand` and `d3.scaleLinear`, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from CSV files using `d3.csv`, and populations are multiplied by 1000 to handle formatted values. The charts include interactive hover states and custom tick formatting that converts values to abbreviated notation.

Loading thumbnail…

Box/Whisker

This example visualizes the revenue of various companies across two categories using a box and whisker plot. The visualization displays individual data points as circles with jitter, overlaid on semi-transparent rectangles. Built with React and D3 v5, the code uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisLeft` to construct the chart, while data is loaded from a CSV file. The SVG rendering includes interactive hover effects that change rectangle colors.

Loading thumbnail…

Formatting axes

This example displays a bar chart of the populations of the ten most populous countries, sorted by rank. The chart uses a formatted y-axis that converts raw numbers into human-readable values with the suffix "B" for billions, and a categorical x-axis for country names. The visualization is rendered as an SVG using React and D3 v5, with scales created via `d3.scaleLinear` and `d3.scaleBand`. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, and tick labels are formatted using `d3.format`. The data is loaded from a CSV file using `d3.csv`, with population values multiplied by 1000 during preprocessing.

Loading thumbnail…

Formatting axes

This example displays a bar chart of the populations of the ten most populous countries, sorted by rank. The chart uses a formatted y-axis that converts raw numbers into human-readable values with the suffix "B" for billions, and a categorical x-axis for country names. The visualization is rendered as an SVG using React and D3 v5, with scales created via `d3.scaleLinear` and `d3.scaleBand`. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, and tick labels are formatted using `d3.format`. The data is loaded from a CSV file using `d3.csv`, with population values multiplied by 1000 during preprocessing.

Loading thumbnail…

Relearning and formatting everything

A bar chart displays the top 10 most populous countries, with population values formatted in billions and millions. The visualization uses d3.csv to load data, d3.scaleBand for the categorical x-axis, and d3.scaleLinear for the y-axis, which is flipped to render bars from the bottom. Axes are generated with d3.axisLeft and d3.axisBottom, while d3.format customizes tick labels. The chart is built with React and rendered as SVG, using D3 v5 within a single SVG container.

Loading thumbnail…

Untitled

This example shows the distribution of carbon emissions per employee across companies, grouped by emission scope (1, 2, 3). For each scope, a box-and-whisker plot summarizes quartiles, median, and outliers, while individual companies appear as colored circles, jittered vertically to reduce overlap. The visualization uses D3 v4’s `d3.csv`, `d3.nest`, `d3.quantile`, and `d3.scaleBand` to structure and layout the data, with a sequential color scale from `d3.interpolateRdYlGn` mapping emissions intensity. Circles include mouseover tooltips, complementing the SVG-rendered boxes and axes.

Loading thumbnail…

Making a barchart

This example shows a horizontal bar chart of population figures for the world’s most populous countries, using a CSV data source loaded with d3.csv. The visualization maps each country’s population to bar width via a d3.scaleLinear domain and a d3.scaleBand for categorical country labels, with axes generated by d3.axisLeft and d3.axisBottom. The chart renders as SVG inside a React application, with bars styled steelBlue and formatted using D3 v5.

Loading thumbnail…

Making a piechart?

This example demonstrates a bar chart comparing carbon dioxide emissions (tCO2) across three scopes, using a horizontal layout with labeled axes. The visualization renders SVG elements within a React framework, leveraging D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and ticks. Data is loaded from a CSV file and parsed to numeric values, with the chart built by appending grouped rectangles and text labels inside an SVG container. The code also defines margins dynamically and applies a steel blue fill to the bars.

Loading thumbnail…

Example

This example shows the result of summing an array of numbers, displaying the output as a large heading. The code defines an `add` function and a `reduce` function to iterate over the list, accumulating the total. The result is then written to the page's HTML element using the DOM API `document.getElementById` and setting its `innerHTML`. The page's styling is applied through a linked CSS file.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for animated data changes in D3.js. Five circles, initially rendered as apples, transition smoothly over two-second intervals as fruits are removed or reassigned to lemons. The visualization uses D3's selection, transition, and scaleOrdinal APIs to animate radius and color changes. Each circle is positioned by an index-based x-coordinate and vertically centered, with updates triggered by timeouts modifying the fruit array. The SVG output relies on D3 v5’s transition system to handle enter, update, and exit states, while circle radii animate from zero on entry and back to zero on removal.

Loading thumbnail…

Bowl of Fruit - Nested something

A bowl of fruit illustrates the nested data structures within a D3 visualization. The example uses a D3 v5 `scaleOrdinal` to map fruit types to colors and radii, rendering apples and lemons as circles with labels. The code demonstrates incremental updates to a d3 selection: adding, modifying, and removing fruit items using `selectAll` and `merge`, with the bowl shape created via an SVG `rect` with a rounded corner.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from a CSV dataset, with each circle representing a vehicle. The chart uses D3 v5 within a React framework, rendering to SVG via `select`, `csv`, `scaleLinear`, and `axisBottom`/`axisLeft`. Axes include labeled tick marks and a title, while circles are positioned using the scales and styled with a steel-blue fill and opacity. The data is loaded from the auto-mpg.csv file hosted on VizHub.

Loading thumbnail…

World Population - Area Chart

This area chart visualizes global population growth over time, using a salmon-colored path to show rising values from 1960 to 2015. The chart includes labeled axes for year and population in billions, with gridlines and a title. Built with React and D3 v5, it uses `d3.csv` to load data, `scaleTime` and `scaleLinear` for scales, `axisBottom` and `axisLeft` for axes, and `d3.area` with `curveBasis` to generate the smooth area shape, all rendered as SVG.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart shows daily temperatures in San Francisco, with a filled area under the curve using a smooth basis curve. The x-axis displays dates, and the y-axis shows temperature, both with labeled axes and gridlines. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `axisBottom`/`axisLeft` within an SVG rendered in a React app. Data is loaded from a CSV file via `d3.csv`, with timestamps parsed as dates and temperatures as numbers.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays daily temperature readings in San Francisco over time, with each circle representing a data point plotted along date and temperature axes. The visualization uses D3 v5 within a React framework, rendering to SVG. It employs `scaleTime` and `scaleLinear` for axes, `extent` for domain calculation, and `csv` to load data from a VizHub dataset. Axis labels and a title clarify the chart, while semi-transparent green circles reveal data density.

Loading thumbnail…

Scatter plot

A scatter plot displays the population of the top 10 most populous countries, with each circle’s horizontal position encoding population and vertical position encoding country name. The visualization uses d3.scaleLinear for the x-axis and d3.scalePoint for the y-axis, with axes rendered via d3.axisBottom and d3.axisLeft. Circle size is fixed, while fill and opacity come from CSS. Data is loaded from a CSV file using d3.csv, and the SVG is rendered with React in d3.v5.

Loading thumbnail…

Making a barchart

This example shows a horizontal bar chart of tCO2 emissions by scope, with axes labeled and styled using CSS. The chart renders as an SVG, loading data from `data.csv` and using D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map values and draw the bars. The React framework is present in the project structure, though the visualization logic is handled imperatively via D3 selections.

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black outlines forms a face, complete with eyes, raised eyebrows, and a mouth created from an arc path. The SVG elements are appended to a centered group, with the left eyebrow animating upward over two seconds via a `transition` and `attr`. The example uses D3 v5’s `select`, `arc`, and SVG shape methods, and is built within a React starter framework, rendering everything through HTML and CSS.

Loading thumbnail…

Lets make a face

An abstract face constructed from basic SVG shapes, including crimson and teal circles for eyes, blue and dark rectangles for a brow, and a pink circle-and-rectangle ear, is drawn with thick purple lines forming a zigzag mouth. The composition uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, grouped and transformed with `translate` and `scale`. Styling is applied via an external stylesheet with the `.lines` class setting stroke color, width, and rounded joins.

Loading thumbnail…

HTML Cars Report

This example displays a simple list of used cars with model, year, and price. It renders the data as styled HTML text within a web page. The report uses a plain HTML unordered list with a custom CSS class to highlight the first vehicle. Presentation is controlled through a linked stylesheet that applies a monospace font and a large base size, while the HTML document structure defines the content hierarchy.

Loading thumbnail…

Cars Report

This example demonstrates a text-based car report generated from an in-memory dataset. It shows how asynchronous data retrieval, filtering, and string formatting combine to display a list of vehicles priced under $2,000. The code uses `JSON.parse` to load hardcoded car data, a `Promise` with `setTimeout` to simulate a delayed API call, and template literals in `formatCar` to compose each line. The final report is rendered into a `<pre>` element via the DOM API, replacing an initial loading message.