Skip to main content
Log in
V

vasukipriyam

@vasukipriyam·10 public vizzes

Loading thumbnail…

Making a Bar Chart

This horizontal bar chart compares movie budgets against titles, with a color gradient from IndianRed to red indicating budget magnitude. Hovering over a bar displays the movie title, budget, and IMDb score in a separate HTML div using mouseover events. The visualization animates bar widths when clicking a circular button, toggling between full and zero widths with d3 transitions. It uses d3.csv to load data, d3.scaleLinear for both x-axis and color encoding, d3.scaleBand for categorical y-axis placement, and d3.axisLeft/axisBottom for axis rendering.

Apr 30, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart displays movie budgets against their titles, with a color gradient from IndianRed to red encoding budget magnitude and IMDB scores revealed on hover. Built with d3.scaleLinear for the x-axis and color mapping, and d3.scaleBand for the categorical y-axis. The visualization includes an interactive circle that toggles bar widths using CSS-like transitions via the transitionWidth helper. Data comes from a local CSV file containing movie titles, budgets, and IMDB scores, rendered as SVG with d3.axisLeft and d3.axisBottom for axes.

Apr 25, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart displays movie budgets against movie titles, with hover interactions revealing the corresponding IMDB score. The visualization uses D3.js v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis and budget-based color scale, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft`/`d3.axisBottom` for axes. A clickable green circle toggles an animation that transitions all bar widths to zero or back using `.transition().attr("width")`. Data comes from a local CSV file containing movie titles, budgets, and IMDB scores.

Apr 25, 2019
Loading thumbnail…

Making a Bar Chart

This horizontal bar chart compares movie budgets against titles, with a color gradient from IndianRed to red indicating budget magnitude. Hovering over a bar displays the movie title, budget, and IMDb score in a separate HTML div using mouseover events. The visualization animates bar widths when clicking a circular button, toggling between full and zero widths with d3 transitions. It uses d3.csv to load data, d3.scaleLinear for both x-axis and color encoding, d3.scaleBand for categorical y-axis placement, and d3.axisLeft/axisBottom for axis rendering.

Apr 24, 2019
Loading thumbnail…

Making a Bar Chart

A bar chart displays movie titles against their IMDB scores and budgets, with bars colored on a red gradient via a scaleLinear. The data is loaded from a CSV using d3.csv, and the chart is built with d3.scaleBand for the y-axis and d3.scaleLinear for both the x-axis and color encoding. On hover, the chart populates a foreignObject div with title, score, and budget. A clickable circle toggles an animated transition via the custom `transitionWidth` function, which uses the d3 transition API to shrink or grow bar widths over one second.

Apr 24, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart ranks the IMDb scores of six movies, with bar length encoding score and color ranging from IndianRed to red based on the same value. Hovering over a bar displays the movie title, score, and budget in an HTML overlay. The visualization uses D3 v5 scales (`scaleLinear`, `scaleBand`) and axes (`axisLeft`, `axisBottom`) to render SVG bars, while a green circle toggles a width transition animation on click, collapsing and expanding the bars.

Apr 24, 2019
Loading thumbnail…

Bar Chart From Memory

This example reconstructs a bar chart from memory, displaying the relative lengths of different candy bars using circles positioned along categorical and linear scales. The code loads data from a CSV file, then uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render the SVG visualization. A title and custom styling via CSS complete the chart, which plots each bar’s length as a circle’s x-position on a numeric scale, with y-position determined by its name.

Apr 23, 2019
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart for the top 10 most populous countries, using population estimates from the 2018 United Nations World Population Prospects. It renders as an SVG, with bars drawn as rectangles whose lengths encode population values. The code uses D3 v3 APIs such as `d3.csv` to load the data, `d3.scale.linear()` and `d3.scale.ordinal()` for the axes, and `d3.svg.axis()` to draw them. A dropdown menu lets users select a cereal brand, triggering an animated transition that updates the bar heights and rescales the y-axis domain.

Apr 23, 2019
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart for the top 10 most populous countries, using population estimates from the 2018 United Nations World Population Prospects. It renders as an SVG, with bars drawn as rectangles whose lengths encode population values. The code uses D3 v3 APIs such as `d3.csv` to load the data, `d3.scale.linear()` and `d3.scale.ordinal()` for the axes, and `d3.svg.axis()` to draw them. A dropdown menu lets users select a cereal brand, triggering an animated transition that updates the bar heights and rescales the y-axis domain.

Apr 23, 2019
Loading thumbnail…

Making a Bar Chart

A bar chart displays the populations of the top 10 most populous countries from a 2018 United Nations estimate. Using d3.csv, the data is parsed, and d3.scaleLinear and d3.scaleBand map population values and country names to the SVG canvas. Axes are rendered with d3.axisLeft and d3.axisBottom. Animated transitions update bar heights when the cereal dataset is selected via a dropdown, demonstrating reusable chart components with d3 v5.

Apr 23, 2019