1joaorodrigues

@1joaorodrigues·5 public vizzes

Trabalho Final D3

This interactive scatterplot, built with D3 v5 and React, visualizes the auto-mpg dataset, plotting five car attributes (e.g., miles per gallon, horsepower) against each other on selectable X and Y axes. Each point represents a vehicle, colored by its brand according to a categorical color scale shown in the legend. Users can hover over legend entries to highlight points from that brand, and dropdown menus allow them to switch the attributes on each axis. The SVG rendering uses modular React components for the axes, marks, and color legend, with D3’s `scaleLinear`, `scaleOrdinal`, and CSV parsing.

Jun 2, 2021

Loading thumbnail…

Fork of Polished Scatter Plot with Menus -mpg

This interactive scatter plot visualizes the auto-mpg dataset, allowing users to explore relationships between vehicle attributes like miles per gallon, horsepower, and weight. Two dropdown menus let viewers select which attributes appear on the X and Y axes. A color legend on the right encodes car brand; hovering over a legend entry highlights only that brand's points and dims others. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for colors, and custom `AxisBottom`, `AxisLeft`, `ColorLegend`, and `Marks` SVG components.

May 27, 2021

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the relationship between pairs of attributes in the auto-mpg dataset, allowing users to select which variables appear on the x- and y-axes via dropdown menus. Built with React and D3.js v5, the visualization renders points as SVG circles colored teal, with axis labels derived from the selected attributes. The data, loaded using d3.csv, includes numeric fields such as miles per gallon, horsepower, and weight, with axes scaled using d3.scaleLinear and tick formatting via d3.format. A title tooltip on each circle displays the formatted x-value.

May 26, 2021

Loading thumbnail…

Fork of Auto MPG

This example displays a horizontal bar chart of the 15 most populous countries in 2020, with population values on the x-axis. Built with React, it uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis to position the SVG rectangles. The chart reads from a CSV file and formats large population numbers for tooltips using `d3.format`. Styled with the Noto Sans JP font, the visualization includes custom axes and tick labels for clear data reading.

May 25, 2021

Loading thumbnail…

Pathetic Bar Chart

This bar chart displays the population of the 15 most populous countries using a horizontal layout, with country names on the y-axis and population on the x-axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning, and renders SVG rectangles with tooltips on hover. Data is loaded from a CSV file and formatted with the `format` function, while axis ticks and gridlines are generated by custom React components.

May 25, 2021