Skip to main content
Log in
H

hireign

@hireign·10 public vizzes

Loading thumbnail…

Making a Bar Chart

This example displays a horizontal bar chart ranking the top 10 most populous countries based on 2018 data from the United Nations World Population Prospects. Using D3 v5, it loads country and population values from a CSV file, applies a linear scale to the population axis and a band scale for countries, then renders steelblue rectangles as bars. The implementation imports specific D3 modules—`select`, `csv`, `scaleLinear`, `scaleBand`, and `axisLeft`—but leaves the axis-related code commented out, so only the bars appear.

Feb 14, 2020
Loading thumbnail…

Untitled

A bar chart displays the percentage of survey respondents ranking emerging technologies as most important, with values from 38% for Big Data Analytics down to 1% for 3D Printing. Built with D3 v5 in a React application, the SVG uses `scaleBand` and `scaleLinear` to position bars, a `scaleOrdinal` color range for hue variety, and text labels above each bar showing the percentage. Data loads from a CSV file, and bar heights derive from the `max` domain.

Feb 14, 2020
Loading thumbnail…

Untitled

A stacked bar chart visualizes the percentage of technology adoption across categories, with each bar color-coded through an ordinal scale and labeled with its exact value. The chart uses d3.csv to load data, then d3.scaleBand and d3.scaleLinear to position and size the rectangles, while d3.scaleOrdinal assigns colors. Labels are added via SVG text elements, all rendered within a fixed-width SVG container.

Feb 14, 2020
Loading thumbnail…

Interactive Bar Chat

This interactive bar chart displays survey percentages for ten programming languages, each bar labeled with its corresponding value. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map categorical data to the SVG coordinate system, with `axisBottom` and `axisLeft` providing labeled axes. Data is parsed from an embedded JSON structure, and grid lines are generated using `axisLeft` with custom tick sizing. The chart is rendered as an SVG within a fixed-width container, with colors and styling applied through CSS classes.

Feb 14, 2020
Loading thumbnail…

Interactive Bar Chat

This interactive bar chart displays survey percentages for ten programming languages, each bar labeled with its corresponding value. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map categorical data to the SVG coordinate system, with `axisBottom` and `axisLeft` providing labeled axes. Data is parsed from an embedded JSON structure, and grid lines are generated using `axisLeft` with custom tick sizing. The chart is rendered as an SVG within a fixed-width container, with colors and styling applied through CSS classes.

Feb 14, 2020
Loading thumbnail…

Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religious composition of the 20 most populous countries, using data from the Pew Research Center. Each bar represents a country’s total population, segmented by religion via d3.layout.stack. Hovering over a bar reveals a tooltip with the exact population via d3-tip. Selecting a religion in the d3.legend.color legend highlights that segment while dimming others, using an overlay rectangle and a foreground bar layer.

Feb 14, 2020
Loading thumbnail…

Making a Bar Chart

A bar chart displays the population of ten countries, using a vertical bar for each nation with its value labeled above. The visualization is rendered as an SVG using D3 v5, with `d3.scaleBand` for the x-axis positions and `d3.scaleLinear` for the y-axis scale. The data is loaded from a CSV file via `d3.csv` and formatted with tick labels, while bars are styled in steelblue and positioned through transform translations. The code removes gridlines and axis domains for a cleaner presentation.

Feb 14, 2020
Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a bar chart and a pie chart to explore categorical data across states. Hovering over a bar highlights the corresponding state’s frequency distribution in the pie chart, while moving the mouse away resets the view. The visualization uses d3.v3 with SVG rendering and animated transitions, updating both charts and a legend on mouseover. The bar chart uses ordinal and linear scales, while the pie chart is driven by the same data, with colors assigned per frequency segment.

Feb 14, 2020
Loading thumbnail…

Let's make a face with D3.js!

This example combines a bar chart with a playful animated face. The bar chart plots the data from `datosd3.csv`, using `scaleBand` for the categorical time variables and `scaleLinear` for the numeric totals. D3.js v5 selects the SVG element and appends axes and rectangles. The chart's axes are created with `axisBottom` and `axisLeft`. The face is an SVG overlay, and the entire visualization is rendered client-side using standard DOM manipulation, with the SVG output styled via CSS.

Feb 13, 2020
Loading thumbnail…

Untitled

This example presents an infographic-style data visualization built with D3 v5 and React, rendered as an SVG. It displays text from ISACA's 2017 Digital Transformation Barometer, summarizing survey findings about emerging technologies and organizational challenges. The code sets up a fixed-size SVG canvas and uses D3 selections to apply a red background color, while CSS classes style the text elements with specific font sizes, weights, and colors to create a layered, magazine-like layout over a background image.

Feb 13, 2020