Jadenzzz

@Jadenzzz·5 public vizzes

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes personal electricity consumption across two years, broken down by account number and read date. The visualization uses d3.stack to transform the data into stacked series, then renders the bars as SVG rectangles with d3.scaleBand and d3.scaleLinear. Colors are assigned via d3.scaleOrdinal, and the chart includes hover effects that adjust opacity and display tooltips using SVG title elements. The code also leverages d3.group to structure the data and Intl.DateTimeFormat for date formatting on the x-axis.

Mar 19, 2022

Loading thumbnail…

Fork of Customizing Axes

This visualization displays the win counts for NCAA college basketball teams using a horizontal bar chart, with team names on the y-axis and game wins on the x-axis. Built with D3 v5, it uses `d3.scaleLinear` for the numeric x-axis and `d3.scaleBand` for categorical team labels. Customized axes include removed domain lines, modified tick styles via CSS, and added axis titles and chart heading. Data is loaded from a CSV file containing team statistics from the 2018 season.

Jan 14, 2022

Loading thumbnail…

Colleage Basketball game win

This visualization presents a bar chart of college basketball teams, showing each team's number of game wins on the x-axis and team names on the y-axis. Built with D3 v5 within a React framework, it renders the chart as an SVG. The code imports specific D3 functions like `scaleLinear`, `scaleBand`, and `axisBottom` to construct the scales and axes. Data is loaded from a CSV file using the `csv` function, with bars displayed as `rect` elements, using the `data.csv` source to map the `W` (wins) column for each team.

Jan 12, 2022

Loading thumbnail…

Fork of Fork of Customizing Axes

This bar chart displays the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects, with team win counts from a college basketball dataset as the quantitative axis. The visualization showcases custom D3 axis styling, including rotated tick labels and styled grid lines. Built with D3 v5, the code uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, and applies custom fonts and colors via CSS. The SVG rendering includes a title and axis label, with bars filled in steelblue.

Jan 12, 2022

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries in 2018 using data from the United Nations World Population Prospects 2017. It shows how to customize chart axes in D3 v5, using `scaleLinear` for population and `scaleBand` for country names. The visualization uses `axisBottom` and `axisLeft` with custom tick formatting that converts values from billions to trillions, and `axisBottom` includes grid lines extending across the chart. The SVG rendering includes styled tick labels and a title.

Jan 12, 2022