stefichim

@stefichim·14 public vizzes

Cars Scatter Plot

This scatter plot visualizes the relationship between the percentage of high school graduates and total unemployment across Romanian counties, using data from an API filtered by education. The visualization encodes each county as a red semi-transparent circle, with position determined by linear scales for both axes, and includes labeled axes and a title. Built with D3 v5, the code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to map data values to SVG coordinates, while loading JSON data via `json()`. The plot is rendered as an SVG with custom tick and label styling.

May 22, 2020

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, showing petal length against sepal width as teal circles. Built with React and D3 v5, it renders as an SVG with custom, reusable components for axes and marks. The visualization uses D3's `scaleLinear` for scaling, `extent` and `max` for domain calculations, and `format` for tick labels. The code draws axis ticks and labels with styled lines and text, and each data point is a circle with a tooltip, pulling data from a CSV URL.

May 22, 2020

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays unemployment trends across education levels in Cluj, Romania, from April 2019 to March 2020, showing monthly counts for categories such as gimnazial, liceal, and universitar. The visualization uses d3.scaleBand for the time axis, d3.scaleLinear for the count axis, and d3.line with curveBasis to generate smooth paths. Multiple lines are colored using d3.scaleOrdinal with schemeCategory10, and a custom colorLegend component renders the legend. Data is loaded as JSON via d3.json from a local API endpoint, and the SVG rendering includes gridlines, axis labels, and a title.

May 22, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data for San Francisco, sourced from the Data Canvas - Sense Your City project. The visualization plots time on the x-axis and temperature in degrees Celsius on the y-axis, using a smooth curved line to connect data points. The code employs d3.scaleBand and d3.scaleLinear for axes, d3.line with curveBasis for the path, and d3.axisBottom and d3.axisLeft for labeled ticks. Data is loaded asynchronously via d3.json, and the SVG rendering includes grid lines, axis labels, and a title.

May 21, 2020

Loading thumbnail…

Cars Scatter Plot

A scatter plot of automobile data from the UCI Machine Learning Repository's Auto MPG dataset, this visualization maps engine horsepower on the x-axis against vehicle weight on the y-axis using red, semi-transparent circles. The chart renders as an SVG and employs D3 v5's `scaleLinear` for axis scaling, `axisLeft` and `axisBottom` for tick marks, and `extent` for domain calculation. Data is loaded as CSV and parsed into numeric values before being plotted.

May 21, 2020

Loading thumbnail…

carss

This scatterplot displays the relationship between vehicle weight and horsepower for a dataset of automobiles, sourced from the `auto-mpg.csv` file. The visualization uses D3.js version 5 with an SVG rendering approach. The code employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and `extent` to set the domain. Individual data points are rendered as circles with a fixed radius of 5. Axes include custom tick formatting and an axis label for horsepower, while the chart omits the original title variable.

May 21, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot from the UCI Machine Learning Repository’s Auto MPG dataset displays the relationship between horsepower and weight for various car models, with each red semi-transparent circle representing a car. It uses D3 v5 to load the CSV data and render an SVG, employing `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and custom text labels for the axes and title. The axis ticks are styled via CSS, and the plot emphasizes distribution patterns across the two continuous variables.

May 21, 2020

Loading thumbnail…

scatter plots

This scatter plot shows the top 10 most populous countries, with each country as a circle positioned along a linear population scale and a point scale for country names. The data comes from United Nations population estimates converted to thousands. Built with D3 v5, it uses `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render the SVG visualization, including custom tick formatting that abbreviates large numbers from G to B.

May 21, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays unemployment rates by educational level, specifically the number of individuals with gimnazial education, across several months in Cluj, Romania, using data from educatie.json. The chart employs D3 v5’s scaleBand, scaleLinear, axisBottom, axisLeft, and line with curveBasis to render an SVG representation. A maroon line path connects the data points, with labels for the time axis and a temperature-like y-axis title, though it visualizes education stats. The code loads data via d3.json and appends axes with tick lines and a title.

May 21, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses a smooth curved line to connect data points, with the x-axis representing time and the y-axis showing temperature in degrees Celsius. The chart is rendered as an SVG using D3 v5, employing d3.scaleLinear, d3.scaleTime, d3.axisBottom, d3.axisLeft, and d3.line with curveBasis for the path. The data is loaded from a JSON file using d3.json, and the chart includes labeled axes and a title.

May 21, 2020

Loading thumbnail…

make bar char

A bar chart displays the number of unemployed individuals with "liceal" (high school) education in Cluj, Romania, across various months from 2019 to 2020. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles. Data is loaded from a local JSON file, and axis labels are formatted using the `format` function.

May 19, 2020

Loading thumbnail…

make bar char

This example shows the number of unemployed individuals with high school education (liceal) in Cluj, Romania across various months from 2019 to 2020, using a horizontal bar chart. The visualization loads data from a local JSON file and renders SVG rectangles scaled with d3.scaleLinear and d3.scaleBand, with axes generated via d3.axisLeft and d3.axisBottom. Each bar represents a single month, with its length proportional to the liceal unemployment count. The chart includes axis labels, a title, and gridlines created by tick marks extending across the plot area.

May 18, 2020

Loading thumbnail…

lets make a face

A yellow circular face with black outlines is drawn using SVG shapes. Two eyes are represented as simple circles, while two rectangular eyebrows are animated with a timed vertical bounce using chained `.transition().duration()` calls, moving downward then returning. A mouth is formed using an `arc()` path with specified inner and outer radii and angled start/end points. The example demonstrates basic SVG composition and animation within a D3 v5 context, using the `select`, `append`, and `attr` APIs.

May 18, 2020

Loading thumbnail…

Cars Report

This example displays a single car make, “Honda,” in large text on a web page. It uses a static JSON dataset embedded in the `cars.js` file, which contains five car records with year, make, model, and price fields. The React application, built with the VizHub starter, uses JavaScript to parse the JSON with `JSON.parse` and then sets the text content of a `<pre>` element via `document.getElementById('message-element').textContent`. The code renders only the first car’s make, demonstrating a minimal data access and DOM update pattern.

May 17, 2020