Skip to main content
Log in
B

BarryC7

@BarryC7·13 public vizzes

Loading thumbnail…

testing

This bar chart displays the number of entries per country from a CSV file with date records. It uses D3 v5’s `csv` loader, `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `axisLeft`/`axisBottom` to render the axes. The SVG rendering filters the data to China, Indonesia, and Russia, counting matching rows for each bar, which are styled with steelblue fill.

Feb 7, 2020
Loading thumbnail…

testing

This example shows a bar chart of the three most frequently occurring words in the names of hotels and other businesses, derived from a CSV file of entity names with incorporation and dissolution dates. The visualization processes the data by splitting each name into individual terms, counting occurrences, and sorting to identify the top terms for display. A bar chart renders these top terms as a bar chart using D3 v5, with scales and axes created via `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom`, drawing SVG rectangles for each bar. The chart only displays the top three terms, as the other data handling is commented out.

Feb 7, 2020
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.

Jan 31, 2020
Loading thumbnail…

Making a Bar Chart

This example demonstrates a horizontal bar chart comparing the populations of ten countries, using a CSV data source. It renders as an SVG using D3 v5, loading data with `d3.csv` and scaling with `d3.scaleLinear` and `d3.scaleBand`. The chart draws axes via `d3.axisLeft` and `d3.axisBottom`, and creates steel-blue bars with an applied `d3.selection` and `.append('rect')`. The code sets the chart’s dimensions from the SVG attributes and applies margins for clear presentation.

Jan 16, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries, using horizontal bars ordered by population. The chart customizes axes by applying a tick format that abbreviates large numbers (converting G to B) and removing domain lines for a cleaner look. Built with d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, it renders to SVG and includes labeled axes and a title.

Nov 20, 2019
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes a week of temperature readings in San Francisco, using a pink filled area beneath a smooth curve to highlight the trend over time. The visualization maps timestamps to the x-axis and temperature values to the y-axis, with labeled axes and grid lines for clarity. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the SVG path, while `axisBottom` and `axisLeft` render the ticks. Data is loaded from a CSV file hosted on VizHub.

Nov 7, 2019
Loading thumbnail…

World Population Area Chart

A World Population Area Chart displays global population trends from 1950 to 2015 using a filled area path rendered in SVG. The visualization loads data from a CSV file and maps years to a time scale and population values to a linear scale. It uses d3.area() with a basis curve to create the smooth, pink-filled region, while axis labels and tick marks are generated with d3.axisBottom and d3.axisLeft. The chart emphasizes the exponential growth pattern through its stylized area representation and formatted population ticks.

Nov 5, 2019
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each circle representing an individual vehicle. The visualization uses D3 v5’s `scaleLinear` for both axes and `axisBottom`/`axisLeft` to render tick marks, while `csv` loads the auto-mpg dataset. SVG circles are positioned via `xScale` and `yScale`, with semi-transparent purple styling and axis labels added as text elements.

Nov 2, 2019
Loading thumbnail…

Temperature in San Francisco Scatter Plot

A scatter plot displays temperature readings recorded throughout a week in San Francisco, with time on the x-axis and temperature on the y-axis. Purple circles represent individual data points, while grid lines and labeled axes clarify the scale. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to map data from a CSV file. Axis labels and a title are added directly to the SVG group.

Nov 1, 2019
Loading thumbnail…

Let's make a face with D3.js

This example builds a cartoon face from SVG primitives, including a pink head, red eyes, blue eyebrows, and an arc-based mouth. The eyebrows animate by repeatedly shifting their vertical position using chained `transition()` calls with `duration(1000)`. D3 v5 selections and the `arc` generator construct the shapes, while the SVG group elements and coordinate transforms center the face and position features relative to one another.

Oct 29, 2019
Loading thumbnail…

Cars Report

This example shows a text-based report of cars whose price falls below a specified maximum, displaying each car’s year, make, model, and formatted price. The page initially shows “Loading......” before the report appears after a two-second delay. The code uses asynchronous JavaScript with a Promise-based `getCars` function, array methods like `filter`, `map`, and `join`, and ES modules for exporting `formatcar` and `generateReport`. The data is hardcoded as a JSON string and parsed with `JSON.parse`, with the final output rendered into a `<pre>` element.

Oct 28, 2019
Loading thumbnail…

Shapes with SCG and CSS

This example demonstrates basic SVG shape rendering with inline presentation attributes and CSS styling. Circles and rectangles are drawn using `<circle>` and `<rect>` elements, with some shapes inheriting fill and stroke properties from a parent `<g>` group. A separate group classed as `lines` contains a `<line>` and a `<path>` element, both styled with thick black strokes via CSS, while the path receives a pink stroke color and round line joins. The SVG canvas is scaled with a `transform` attribute, and the page uses an external stylesheet to apply global layout and stroke rules.

Oct 27, 2019
Loading thumbnail…

Html Cars Report

This example displays a simple, hard-coded list of three cars with their model years, names, and prices. The report is rendered as basic HTML, where the list item for the 2012 Nissan Leaf is highlighted in red via a CSS class. The page uses no dynamic data processing; instead, it relies on static markup within the `index.html` file, styled by `styles.css`. D3.js is loaded but not actively used in this particular visualization.

Oct 27, 2019