Jonathan Taylor

@Jonathan-Taylor5·4 public vizzes

Fork of Fork of Making a Bar Chart

This example visualizes Premier League team transfer spending across seasons. A dropdown selects the season or the average, and a second dropdown toggles between transfer-in and transfer-out values. The horizontal bar chart sorts teams by name, with bar lengths encoding the monetary amount and bar colors assigning a unique color per team via `d3.scaleOrdinal`. The visualization updates by filtering the loaded CSV data and redrawing SVG rectangles using `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`.

May 4, 2023

Loading thumbnail…

Fork of Making a Bar Chart

This interactive bar chart shows Premier League team transfer spending (incoming fees) for a selected season, with teams ordered alphabetically or by final league position. Users toggle between seasons and transfer types via dropdown menus, which trigger re-rendering with D3’s `scaleBand` and `scaleLinear`. The SVG chart loads data from a local CSV file using `d3.csv`, with axes formatted via `axisLeft` and `axisBottom`. Bars update dynamically as selections change, displaying transfer totals in euros.

May 4, 2023

Loading thumbnail…

Fork of Fork of Fork of Iterate my work - bar chart of crime in India_VER1.3

This bar chart visualizes crimes against women across Indian states for a selected year, with dropdown menus to filter by year and crime type. The data is loaded from a CSV file and aggregated by state, then displayed in descending order of case counts. The visualization uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.rollups to group the dataset. Bars transition smoothly when filters change, and a mouseover effect adjusts bar opacity to provide hover feedback.

May 3, 2023

Loading thumbnail…

Fork of Fork of Making a Bar Chart

A horizontal dot plot displays the average league position for 15 Premier League teams in 2018, from Chelsea to Fulham. The chart uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render an SVG, with circle marks sized at a fixed radius. The x-axis tick format abbreviates values using `format`, while the underlying data is loaded from a CSV file.

May 3, 2023