Nikola Rožić

@nrozic·3 public vizzes

Selecting a Year on a Line Chart

This interactive line chart visualizes global population trends by region, allowing users to explore temporal changes. A vertical line indicates the currently selected year, and users can move their mouse across the chart to update this selection. The visualization uses D3 v5 to render SVG elements, employing scales, axes, and line generators to plot the data. Population data originates from UN estimates and medium-variant projections covering 1950 to 2100.

Nov 26, 2020

Loading thumbnail…

Selecting a Year on a Line Chart

This visualization displays population trends over time for various world regions using a line chart, rendered with SVG. Users can hover over the chart to select a specific year, which updates a vertical black line to mark that point in time. Built with D3 v5, the code utilizes `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` for axes, `line` with `curveBasis` for the paths, and `nest` to group data by region. The color legend is created using `scaleOrdinal` with `schemeCategory10`. Data comes from UN population estimates.

Nov 26, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. Each red, semi-transparent circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis. Built with D3 v5, the code uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks and gridlines, and `svg` circles to render the data. Axis labels and a title are added directly as SVG text.

Nov 26, 2020