hyeonukim91

@hyeonukim91·5 public vizzes

Fork of NASCAR history of drivers and tracks

This example visualizes NASCAR race winners by starting position, using a circle plot where each dot’s size encodes the starting position and its color represents the track. Drivers are sorted by year on the y-axis, with the year on the x-axis. The visualization is built with Vega-Lite, using the `vl.markCircle` API for encoding, and loads CSV data via `d3.csv` from a remote GitHub gist. The chart uses `vl.x().fieldN('Year')` and `vl.y().fieldN('Driver')` for axes, with tooltips for driver and track details.

Oct 4, 2022

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The code employs `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, with `d3.axisBottom` and `d3.axisLeft` for tick rendering. It removes default axis domains and tick lines, adds custom labels, and formats tick marks with `d3.format`. D3’s `csv` function loads the data, which is multiplied by 1000 before rendering as `<rect>` elements inside an SVG.

Oct 4, 2022

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays a horizontal bar chart ranking the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React to structure the SVG rendering, with D3 v5’s `scaleBand` and `scaleLinear` mapping country names and population values to rectangular marks. Axis components are built manually, while a `format` function converts raw numbers into abbreviated labels like "1.4B". A hover tooltip reveals the precise population for each bar.

Oct 4, 2022

Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot

This example demonstrates an animated scatter plot of the Iris dataset, cycling through different attribute pairs on the x-axis every three seconds. The visualization uses D3 v6 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, and `selection.join` to handle enter, update, and exit transitions smoothly. Circles grow from radius zero on entry and reposition with staggered delays during updates. The plot reads data from a CSV file, renders as SVG, and animates axes and points over a one-second transition.

Oct 3, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a dynamic data-join animation using D3 v7, where fifteen circles move horizontally in a sine-wave pattern that updates every second. The visualization uses `setInterval` to increment a time variable, generating new x and y coordinates for each circle based on its index and the sine of its position plus time. The code employs D3's `selectAll().data()` join method to enter and update SVG circle elements, animating their `cx` and `cy` attributes smoothly as the wave oscillates vertically. The SVG rendering adapts to the full browser window dimensions.

Sep 29, 2022