vkk2

@vkk2·3 public vizzes

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for 392 cars from the UCI Machine Learning Repository’s Auto MPG dataset. Using D3 v5, the code loads the CSV data, parses numeric fields, and renders red, semi-transparent circles via SVG. It employs `scaleLinear` with `.nice()` for axis scaling, `axisLeft` and `axisBottom` for ticks and grid lines, and appends axis labels and a title. The plot highlights the positive correlation between the two variables.

Jul 11, 2020

Loading thumbnail…

Interactive Color Legend

This interactive color legend demonstrates filtering in a scatter plot of the Iris dataset, mapping petal length against sepal width. The visualization uses React with D3 scales, including `scaleLinear` for encoding positions and `scaleOrdinal` for mapping species to colors. Hovering over a legend item highlights the corresponding species by fading non-matching points via opacity adjustments, while the filtered subset remains fully visible. Axis components, `AxisBottom` and `AxisLeft`, render ticks from the D3 scales, and SVG circles with `<title>` elements provide tooltips.

Jul 11, 2020

Loading thumbnail…

Cars.report

This example displays a bare-bones web page titled “Cars.report” that renders the static text “Hello HTML” in the browser, centered with a very large font size. It also logs the message “Hello JavaScript!” to the browser’s developer console. Built with the React framework, the page uses standard HTML and JavaScript—specifically the `console.log` API—without any data visualization or external charting libraries. The code serves as a minimal starter template, showing a simple static page and a console message.

Jul 3, 2020