Anton Vasilev

@ssi-anton-vasilev·5 public vizzes

Making a Bar Chart

Five apples rendered as red circles sit in a row, and clicking one selects it with a black outline. The example demonstrates building a custom React component with D3 scales, using `d3.scaleOrdinal` for color and radius mapping and `useState` for selection state. SVG circles are positioned with a simple index-based formula within a React app.

Jun 21, 2019

Loading thumbnail…

Making a Bar Chart

Five fruit circles render in an SVG using React components, with apples styled red and lemons yellow via d3-scaleOrdinal color and radius scales. Clicking a fruit toggles a black stroke around it, updating state through React’s useState hook. The example demonstrates how to combine React’s declarative component model with d3 scales for mapping data to visual properties, producing an interactive selection interface.

Jun 21, 2019

Loading thumbnail…

adding axis labels and making tick grid lines

This example visualizes the top 10 most populous countries as a horizontal bar chart, with population values scaled by 1,000 and formatted with abbreviated tick labels. The chart adds axis labels and tick grid lines to enhance readability. Using D3 v5, it employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the axes, while CSS styles grid lines and text. The population data is loaded from a CSV file and rendered as SVG rectangles.

Jun 21, 2019

Loading thumbnail…

Making a Bar Chart

Five apples render as red circles in an SVG, demonstrating how React components build visualizations from data arrays. The example uses a d3.scaleOrdinal for color and radius mapping, while d3.range generates the initial dataset. Though the FruitBowl component references a selectedFruit variable, no interaction is yet wired, leaving the visualization static. React handles the SVG circle rendering, with d3 providing the scale functions for this simple, non-bar chart illustration.

Jun 20, 2019

Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects. The bars are rendered as SVG rectangles, with a linear scale mapping population values to widths and a band scale positioning each country’s bar vertically. The code uses React to create a placeholder circle, but the visible chart is built by commented-out D3 code that would call `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load and plot the data.

Jun 20, 2019