suji8073

@suji8073·7 public vizzes

Fork of Number of Space Missions by Company/Country/Status Rocket

This stacked bar chart displays the number of space missions by company, country, or rocket status, with mission status encoded by color and total counts shown via tooltip on hover. A dropdown menu lets users switch the x-axis attribute among these three categories. The visualization is built with the vega-lite-api, registered with vega and vega-lite, rendering as SVG. Data is loaded asynchronously from a CSV file via d3.csv, and a React component manages the dropdown state and chart re-rendering.

Jun 2, 2021

Loading thumbnail…

Fork of IMPROVED Scatterplot using react and D3 with DropDown Menu

This interactive scatterplot visualizes asylum case wait times in days against case entry dates, colored by decision code. A dropdown menu filters the display to show all years or a specific year from 2003–2011, with the x-axis switching between year and month/day formatting accordingly. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, with SVG rendering for axes, marks, and a hover-fading color legend. Data comes from a CSV file loaded via `d3.csv`, and missing years trigger a "no data" message.

Jun 2, 2021

Loading thumbnail…

Fork of IMPROVED Scatterplot using react and D3 with DropDown Menu

This interactive scatterplot visualizes defensive asylum case wait times in days against the date cases entered the system, colored by decision code (Relief, Granted, Removed, Cast Terminated, or Unknown). A dropdown menu filters the data by year (2003–2011), dynamically updating the x-axis from showing years to showing months for the selected year. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, with SVG circles rendered via React components. Data comes from a CSV file loaded through `d3.csv`, and an interactive color legend highlights decision categories on hover.

Jun 2, 2021

Loading thumbnail…

barplot_covid

This bar chart visualizes COVID-19 case counts across four quarterly periods, with bars animating upward from the baseline on load. The color scale transitions from light teal to dark green based on count magnitude, and axes display tick labels for both quarters and case numbers. Built with React and D3 v5, it uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis and color encoding, and SVG `rect` transitions (via `transition().duration().delay()`) to animate bar growth. Data is hardcoded in the React `useEffect` hook.

May 19, 2021

Loading thumbnail…

매출_1920

This chart shows quarterly sales data for Gangnam District across 2019 and 2020, displayed as a bar chart with a dark blue background. Hovering over a bar highlights it and displays the percentage difference from the hovered quarter to all other quarters, shown as floating text. The visualization is built with D3 v5, using SVG for rendering and transitions for animation. Data is loaded from a CSV file, with axes, gridlines, and labels created via D3’s scale functions and axis helpers.

May 19, 2021

Loading thumbnail…

분기별 유동인구, 매출

An interactive bar chart comparing quarterly foot traffic and sales across Seoul districts. A dropdown menu, generated from the data fields using a data join, lets viewers switch the y-axis variable, triggering a selection change that updates both the bar positions and the d3.axisLeft scale. The visualization loads survey data via d3.json, prepares nested aggregates with d3.nest and d3.mean, and renders the dynamic bars with SVG rectangles, applying the general update pattern to adjust attributes in place.

May 19, 2021

Loading thumbnail…

test_suji

This example demonstrates a minimal HTML page that uses CSS for styling and JavaScript for structure. It displays a centered white heading with a black background, alongside a section containing preformatted text describing a web programming book and its pricing. The page includes a horizontal rule and a footer with italicized publisher and year details. The code relies on standard HTML elements like `<h1>`, `<pre>`, `<hr>`, and `<i>`, with inline CSS properties, though the background property is misspelled as `backgroud`. The heading text uses HTML special character entities for angle brackets, but the page does not incorporate any JavaScript libraries or data visualizations.

May 10, 2021