minjunglalaa

@minjunglalaa·5 public vizzes

Fork of Scatter Plot with Color

This example presents a scatter plot of Korean movie character data, showing age on the x-axis and character appearance ratio on the y-axis, with each point colored by disability type (physical, visual, or hearing impairment). The visualization uses React for component structure, D3.js (v5) for scales and axis rendering, and SVG for drawing the circles. Data is loaded from a CSV file using D3's `csv` function, and the color scale is created with `d3.scaleOrdinal`, while axes use `d3.scaleLinear`.

Dec 24, 2020

Loading thumbnail…

barchart modi

This example shows a bar chart of movie characters' average ages, with each bar labeled by the character’s English name. The visualization is built with D3 v6 and rendered as SVG, using `d3.csv` to load the data and `scaleLinear` and `scaleBand` to map ages and names to pixel positions. The bars are appended as `rect` elements whose widths correspond to the average age values. The included stylesheet defines hover and line styling, though the chart itself displays no axes or labels beyond the names.

Dec 23, 2020

Loading thumbnail…

barchart

This example displays a horizontal bar chart of population figures for ten countries, using data loaded from a CSV file. The chart maps each country’s population to the width of a rectangle via a linear scale, while a band scale positions the bars vertically. Built with D3 v6, the visualization uses `d3.csv`, `scaleLinear`, `scaleBand`, and SVG selection methods to append the rectangles to an empty SVG container. The bars are rendered without labels or axes, focusing purely on the relative population sizes.

Dec 23, 2020

Loading thumbnail…

Cars Report

This visualization demonstrates a minimal JavaScript module workflow using a bundled car dataset. It displays the static text message “hello” within an HTML `<pre>` element, styled at a large font size. The code imports car data from a separate `cars.js` module, which parses a JSON array containing vehicle year, make, model, and price information. The example relies on ES6 `import`/`export` syntax and Rollup’s bundling to connect modules, though the data itself is not rendered—only the hardcoded message appears.

Dec 23, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red semi-transparent circle represents a car, revealing a positive correlation between the two attributes. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` to construct the axes and scales. Data is loaded asynchronously via `d3.csv` and parsed into numeric values before rendering.

Dec 22, 2020