Skip to main content
SimilarExport ZIP
100%

bar chart

✓ Published0🌍 Public
LLonwabo11
Last edited Aug 7, 2019
Created on May 24, 2019
Forked from bar chart

This bar chart displays the ranks of characters from the Suicide Squad cast, with each character’s name on the x-axis and their rank value on the y-axis. The visualization uses d3.scaleBand and d3.scaleLinear to position the orange rectangles, while d3.axisBottom and d3.axisLeft render the axes. Data loads from a local JSON file via d3.json, and the SVG output includes a title and margin-based layout.

AI-generated description

Suicide Squad cast graph witht their name and ranks. Data for the plot can be foud at https://github.com/colorfest/d3js/tree/master/data

MIT Licensed

Similar vizzes

Loading thumbnail…

bar chart

A bar chart displays the Suicide Squad cast members ranked by a numerical score, with character names on the x-axis and their rank values on the y-axis, using orange rectangles. The example loads data from a local JSON file, which includes names, actors, ranks, and descriptions, and renders it as an SVG using D3 v5. It employs `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the continuous axis, and `d3.axisBottom`/`d3.axisLeft` to generate ticks. The chart includes a title, margins, and axes, with data fetched via `d3.json`.

LLonwabo11
95% match
Loading thumbnail…

Title

A bar chart displays the relative rank of nine characters from the movie Suicide Squad, with each orange bar labeled by character name and scaled against a linear axis from zero to 100. The visualization uses D3 v5 to load data from a JSON file and render the SVG output. Mouseover events trigger a tooltip that shows the character's name and rank. The chart employs d3.scaleBand for the categorical x-axis, d3.scaleLinear for the quantitative y-axis, and d3.axisBottom with d3.axisLeft for the axes.

LLonwabo11
92% match
Loading thumbnail…

MarvelVsDC Bar Chart

This bar chart displays the top 10 cosmetic products by revenue, using horizontal bars with a steelblue fill. It loads CSV data from a GitHub gist and renders an SVG, with a linear scale for revenue and a band scale for product names. The code customizes D3 axes by removing tick lines and the domain, adding an axis label, and formatting tick values with `d3.format` to abbreviate large numbers. It uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3 v5.

Hhappymail6
71% match
Loading thumbnail…

MarvelVsDC Bar Chart

This bar chart compares Marvel and DC movies by their IMDB ratings, displaying each film title along the vertical axis and its rating as a horizontal bar. The visualization uses D3 v5 within a React framework, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Axes are generated with `axisLeft` and `axisBottom`, while the chart is rendered as SVG elements. The data is loaded from a CSV file via `d3.csv`, with rating values parsed to numbers before rendering.

Hhappymail6
70% match
Loading thumbnail…

BarChart!

This bar chart displays the values of 14 named members of the CSCG group, with each name on the y-axis and its corresponding numeric value extending horizontally on the x-axis. The visualization uses D3 v6 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` to generate axes. Data is hard-coded as an array of objects, and each bar is drawn as a green rectangle with 0.8 opacity, while axis tick labels are enlarged via a D3 selection.

Vvivianaaai@qq.com
70% match
Loading thumbnail…

Suicide prevention bar chart

This bar chart displays the highest suicide counts per country from 1985 to 2016, using a horizontal bar layout where bar length encodes the number of suicides and country names label the y-axis. The visualization uses D3 v5 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG graphic. Data comes from a CSV file containing country, year, sex, age, and suicide counts, aggregated to show total suicides per country. The chart includes axis titles and a title text, with bars rendered in slateblue.

Mmnalk
70% match
Loading thumbnail…

Fork of MarvelVsDC Bar Chart

This horizontal bar chart compares revenue figures for Marvel and DC movies, ranking titles by their dollar value. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for categorical y-axis spacing, and `d3.axisBottom` with a custom tick formatter that abbreviates large numbers. Data is loaded from a CSV file via `d3.csv`, with numeric conversion applied to the rate field. The chart demonstrates custom axis styling, including removal of domain lines and addition of axis labels.

Hhappymail6
70% match
Loading thumbnail…

Making a Bar Chart

A horizontal bar chart uses SVG rectangles to display final power scores for ten teams, with team names on the y-axis and score values on the x-axis. The chart, built with d3.scaleBand and d3.scaleLinear, includes axis labels, gridlines, and a title. Underlying data is loaded from a CSV file via d3.csv, with numerical fields coerced to numbers. Formatting is applied through CSS, and axes are customized using d3.axisLeft and d3.axisBottom with tick lines removed and manually appended labels.

HHirsh Gupta
68% match