B

blikitha

@blikitha·38 public vizzes

Loading thumbnail…

Fork of ICE-8 world map

This fork of the ICE-8 world map displays a natural Earth projection of global country boundaries using an SVG canvas. The visualization renders a skyblue sphere and lightgreen countries with faint black strokes, showing the geographic distribution of nations. It loads world map data from a GitHub Gist, converts it using the TopoJSON `feature` API, and projects it with d3’s `geoNaturalEarth1` and `geoPath`. The SVG paths are appended dynamically after the JSON fetch completes.

Loading thumbnail…

Fork of Fork of ICE-8 world map

This example displays a world map using a natural Earth projection, with countries filled in light green and the surrounding sphere in sky blue. It renders geographic data as SVG paths using `d3.geoPath` with `geoNaturalEarth1`. The map loads a TopoJSON file from a GitHub gist, converts it to GeoJSON with `topojson.feature`, and appends country paths to the SVG. The styles define a black stroke with low opacity for country borders, creating a subtle outline effect.

Loading thumbnail…

Fork of ICE-8 world map

This example shows a natural Earth projection world map, with countries rendered as light green polygons and the surrounding sphere filled in sky blue. It fetches a TopoJSON dataset from a GitHub gist and converts it to GeoJSON using the `topojson.feature` function. The visualization uses `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw the map into an SVG. Country borders are outlined in black with a low stroke opacity to emphasize landmasses without obscuring their fill color.

Loading thumbnail…

Fork of Fork of Swedish map

This visualization displays the counties of Sweden as black filled polygons with white interior boundaries, rendered on a Mercator projection fitted to the viewport. The map is generated from TopoJSON data using `d3.geoPath` and `d3.geoMercator`, with React managing the component state through `useData` and rendering SVG marks. The code also includes a commented-out alternative using `geoEqualEarth`, and mixes styling through CSS classes that define the monochrome color scheme.

Loading thumbnail…

Fork of Fork of ICE-8 world map

This example displays a world map using a natural Earth projection, with countries filled in light green and the surrounding sphere in sky blue. It renders geographic data as SVG paths using `d3.geoPath` with `geoNaturalEarth1`. The map loads a TopoJSON file from a GitHub gist, converts it to GeoJSON with `topojson.feature`, and appends country paths to the SVG. The styles define a black stroke with low opacity for country borders, creating a subtle outline effect.

Loading thumbnail…

Fork of ICE-8 world map

This example shows a natural Earth projection world map, with countries rendered as light green polygons and the surrounding sphere filled in sky blue. It fetches a TopoJSON dataset from a GitHub gist and converts it to GeoJSON using the `topojson.feature` function. The visualization uses `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw the map into an SVG. Country borders are outlined in black with a low stroke opacity to emphasize landmasses without obscuring their fill color.

Loading thumbnail…

Fork of Tree

A hierarchical tree diagram visualizes character relationships from the Bahubali film saga, with each node labeled by character name and colored according to its data value. The visualization uses the D3.js library, specifically the `tree`, `hierarchy`, and `linkHorizontal` functions, rendered as an SVG with zoom functionality through the `zoom` event. Node labels display varying font sizes based on depth level, and the layout adapts to the browser viewport dimensions.

Loading thumbnail…

Fork of ICE-7: Fork of Line Chart

A line chart depicts the population of India from 1955 to 2020, with the x-axis showing years and the y-axis showing population counts. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render an SVG path. Data is loaded asynchronously from a GitHub-hosted CSV file via `d3.csv`, with axes and titles styled through CSS. The chart applies margins, tick padding, and removes default domain lines for a cleaner presentation.

Loading thumbnail…

Fork of ICE 7 Area Chart

This visualization displays the number of accidents in the USA from 2010 to 2020 as an area chart, with a green filled region beneath a yellow line. The data is loaded from a CSV file via `d3.csv` and rendered as an SVG using D3 v5. The chart uses `scaleLinear` for both the x and y axes, `line` and `area` generators with `curveBasis` smoothing, and `axisLeft`/`axisBottom` for labeled ticks. The y-axis uses a `.3s` number format, and gridlines are drawn with red tick lines.

Loading thumbnail…

Fork of Line_chart_facebook_users

This line chart shows Facebook annual users from 2008 to 2017, with a purple title, green gridlines, and a thick blue stroke. It loads CSV data via a GitHub gist using `d3.csv`, then renders an SVG with `d3.scaleTime` for the year axis and `d3.scaleLinear` for user counts. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the line path is created using `d3.line`.

Loading thumbnail…

Fork of Line Chart

This line chart displays company profits from 1947 to 2022, with years on the x-axis and profit values on the y-axis. It uses D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render a blue polyline with gridlines and labeled axes. The data is loaded from a CSV via `d3.csv`, parsed into numeric and date formats, and drawn as an SVG with a red underlined title. The chart’s axes include rotated labels for readability, and the line path is styled with a 4-pixel stroke.

Loading thumbnail…

Fork of Line Chart- Data Visualization

This line chart displays the top 10 book-selling countries by showing the relationship between published year and total sales price. The visualization uses D3 v5 to render an SVG with time-scaled X axis and linear Y axis, incorporating grid lines and axis labels. Data is loaded from a CSV file hosted on GitHub, with dates parsed using d3.timeParse. The line is drawn using d3.line, and scales are created with d3.scaleTime and d3.scaleLinear, while axes are generated using d3.axisLeft and d3.axisBottom.

Loading thumbnail…

Fork of ICE 7 Line Chart

This example visualizes smartphone sales in millions from 2012 to 2021 as a blue line chart with axes and labels. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` to map the data and render SVG elements. Data is loaded asynchronously from a GitHub CSV URL using `csv`, with sales converted to numeric values and years parsed as dates. The visualization includes a purple title, blue axis labels in Times New Roman, and a grid formed by tick lines.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart displays the top 10 countries by air pollution-related deaths in 2020, with each slice labeled in thousands and a legend pairing country names with their values. The visualization uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs to generate SVG paths, with colors assigned from a hardcoded array. Data is loaded as CSV from a GitHub gist via `d3.csv`, and the chart is rendered inside an SVG canvas with custom legend text and value formatting.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart shows the top 10 countries by deaths attributed to air pollution in 2020, with each slice labeled with its death count in thousands and a corresponding color-coded legend. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.csv` to load and process the data from a GitHub gist. SVG rendering places the chart at center with an outer radius of 175 pixels, while text labels and legend entries are added manually via D3 selections.

Loading thumbnail…

Fork of ICE7 Pie Charts

This fork of ICE7 Pie Charts displays a horizontal bar chart ranking cities by their book counts, using data loaded from a CSV file. The visualization initially shows a loading state before rendering ten bars with a blue x-axis grid and labeled y-axis. Built with React and D3, the code employs `d3.csv` for data parsing, `scaleBand` and `scaleLinear` for positioning, and SVG elements to draw the bars and ticks.

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart displays the top 10 countries' deaths in 2020 attributed to air pollution, using data from a CSV file. Each slice's size corresponds to a country's sales value, with values and a legend on the right. The visualization is rendered as SVG using D3.js v5, leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for coloring. The data is fetched asynchronously with `d3.csv`, and the chart is positioned at a center point with a static legend.

Loading thumbnail…

Fork of Fork of Reusable Scatter Plot for Iris Dataset ICE-7

This example presents the Iris dataset in an animated scatter plot that cycles through four floral measurements as the x-axis variable. The visualization updates every few seconds, shifting between petal width, sepal width, petal length, and sepal length while plotting petal width on the y-axis. The plot is built with a reusable `scatterPlot` function using D3 scales and axes. Species data is encoded through point colors and a legend, with SVG circles making up the marks. The animation is driven by `setInterval`, and data is loaded via `d3.csv`.

Loading thumbnail…

Fork of Reusable Scatter Plot for Iris Dataset ICE-7

This interactive scatter plot animates through the Iris dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. Built with D3 v6, it uses a reusable chart module to render SVG circles colored by species, with a legend and rotating axis labels. The animation updates every few seconds via `setInterval`, demonstrating dynamic data exploration.

Loading thumbnail…

Fork of Fork of Fork of Stylized Scatter Plot with Color Legend

This visualization displays the Iris dataset, with each circle representing an iris flower, using D3 v5’s `d3.csv` to load data and `d3.scaleLinear` and `d3.scaleOrdinal` to map sepal length to the x-axis, petal length to the y-axis, and species to color. It renders as SVG, featuring styled axes and a color legend built with the `d3.legendColor` API, highlighting clustering by species through distinct colors and a clean, minimal layout.

Loading thumbnail…

Fork of Fork of Fork of Fork of Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width as circle positions while using sepal length and width to set the circles’ horizontal and vertical radii, creating oval markers colored by species. Built with React and D3, it uses `csv`, `scaleLinear`, and `extent` to load and scale data, then renders SVG circles with `axisLeft` and `axisBottom` for the axes, all within a full-window viewport.

Loading thumbnail…

Fork of Fork of Fork of Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, plotting petal length against petal width, with points colored by species (setosa, versicolor, and virginica). The visualization encodes additional sepal dimensions as circle radii, using the `rx` and `ry` attributes. Built with React and D3 v3, it uses `d3.csv`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render an SVG, with custom margins, axis labels, and a large canvas-sized layout.

Loading thumbnail…

Fork of Fork of Scatter Plot with Iris DataSet

This interactive scatter plot visualizes the Iris dataset, encoding petal length and width as x and y coordinates while using green, yellow, and red circles to distinguish the three species. The SVG rendering uses D3’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, with circles positioned via `cx` and `cy` attributes. The example also includes rotated axis labels styled with CSS, loading data from a GitHub Gist URL.

Loading thumbnail…

Fork of Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, showing relationships between petal and sepal measurements for three flower species, each colored distinctly (red, blue, or green). The plot uses D3 v6 with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map the data coordinates to SVG circles. It loads the dataset from a CSV URL and renders the visualization in an SVG element, including explicitly labeled axes for petal length and sepal length.

Loading thumbnail…

Fork of Fork of Fork of Stylized Scatter Plot with Color Legend

This visualization displays the Iris Dataset, emphasizing clustering by petal length and sepal length across three species. Each circle represents an iris flower, colored by species using a categorical color scale and labeled with a d3-legend legend. Built with D3 v5 and SVG, the code uses `d3.csv` to load data, `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and `d3.axisBottom`/`d3.axisLeft` for gridlines. The scatter plot derives from a 2017 example by Curran.

Loading thumbnail…

Fork of Fork of Fork of Fork of Stylized Scatter Plot with Color Legend

This visualization displays the Iris Dataset, plotting petal length against sepal length for individual iris flowers. Each circle represents one flower, with colors corresponding to species, and a color legend identifies the three species. The scatter plot uses D3 v5 with linear scales for both axes, and the code employs `d3.axisBottom` and `d3.axisLeft` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and the `d3-legend` library’s `legendColor` for the legend. Data is loaded via `d3.csv` from a GitHub gist URL.

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot with Color Legend

This visualization displays the Iris Dataset, emphasizing clustering by petal and sepal length across species. Each circle represents an iris flower, colored by species via a categorical color scale and legend. Built with D3 v5, it uses `d3.csv` to load data, `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.legendColor` for the legend. SVG rendering includes styled grid lines and large labels.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris dataset, plotting petal length against petal width for individual flower specimens while color-coding points by species (setosa, versicolor, and virginica). It uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to generate axes and map data to screen coordinates. The SVG circles are rendered with `select`, `append`, and a join operation, and the data is loaded via `d3.csv` from a raw GitHub source.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the population of 20 cities in Andhra Pradesh as a horizontal bar chart rendered in SVG using React and D3. The code imports specific D3 functions including `scaleBand`, `scaleLinear`, and `max` via ES modules, while also using React hooks like `useState` and `useEffect` to load data asynchronously from a CSV file fetched with `d3.csv`. The bar chart encodes city names on the y-axis and population values on the x-axis, with gridlines and axis ticks generated manually through D3 scales. A "Loading..." message appears until the dataset is fully parsed.

Loading thumbnail…

<iframe width="560" height="292" src="https://vizhub.com/blikitha/f111e8fa345c43fa9a6e6d45227a5024?mode=embed" title="Untitled" frameborder="0" ></iframe>

This example presents a horizontal bar chart that displays the top 20 countries by reported COVID-19 cases, based on data from a CSV file loaded via `d3.csv`. The visualization uses React to manage component state and render an SVG, with D3 v5 scales (`scaleBand` and `scaleLinear`) to map country names and case counts to pixel positions. Each rectangle’s width encodes the case count, and the chart includes a blue gridline for the x-axis ticks.

Loading thumbnail…

Untitled

This visualization displays a horizontal bar chart of the top 20 countries by COVID-19 case counts, using data from a CSV file loaded via d3.csv. The chart maps country names on a d3.scaleBand y-axis and case numbers on a d3.scaleLinear x-axis, with blue bars and gridlines rendered as SVG elements. The React component fetches the data asynchronously, parses numeric values, and uses d3’s max function to set the x-domain, while y-axis labels and ticks are manually positioned using SVG text and line elements.

Loading thumbnail…

Untitled

This visualization displays the first 20 countries from a COVID-19 dataset, showing their reported case counts as horizontal bars. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numeric case count axis, rendering SVG rectangles. The data is loaded asynchronously via `d3.csv` from a GitHub gist, with tick marks and labels generated manually from the scale domains.

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 20 countries by reported COVID-19 cases, using horizontal bars to compare values. The visualization loads CSV data via `d3.csv` and slices the first 20 rows, with React managing state and rendering SVG elements. Scales are created using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with axis ticks manually generated and mapped to React components. Each bar is drawn as a `rect` element, with the x-axis grid lines and tick labels rendered as SVG `line` and `text` elements.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays a horizontal bar chart of COVID-19 case counts for the top 20 countries, using a bar length to encode population values. The chart is built with React and D3 v5, where D3’s `scaleBand` and `scaleLinear` define the y- and x-axes, and React renders SVG `rect` marks for each bar with gridlines and tick labels. Data is loaded from a CSV file via `d3.csv`, with numeric parsing applied to the case count column.

Loading thumbnail…

Fork of Fork of ICE-5:fork Loading and Parsing CSV Data with D3.js

This visualization demonstrates how to load and parse a CSV dataset using D3.js v7, displaying the file size, row count, and column count in a styled HTML header. The code calls `d3.csv()` on a remote CSV file from a GitHub gist containing state-level data, then formats the response with `d3.csvFormat()` to calculate the data size. The result is rendered as text within a `<pre>` element, alongside an embedded SVG illustration, and the page uses inline CSS for visual styling.

Loading thumbnail…

Fork of ICE-5:fork Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing CSV data with D3.js, displaying the resulting dataset's size, row count, and column count in a large text element. The page also renders a static city-themed SVG image below the statistics. The code fetches a CSV file from a GitHub Gist URL using the `d3.csv` function, then formats the parsed data with `d3.csvFormat` to calculate its kilobyte size. The D3.v7 library handles the asynchronous data retrieval and parsing, while the message output is updated dynamically in the HTML `<pre>` element.

Loading thumbnail…

ICE-5:fork Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js v7 within a React framework. The page displays a message showing the data's size in kilobytes, row count, and column count after fetching a remote CSV file via `d3.csv`. The data source is a GitHub Gist containing CSS color values, rendered alongside an embedded SVG illustration of a city scene. The visualization uses D3's asynchronous data-loading capabilities to read the CSV and parse it into an array of objects, with the results displayed in a styled HTML `<pre>` element.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example displays a simple, emoji-like face with a mouth, drawn as scalable vector graphics within a React application. The code constructs the face using D3.js, positioning circles for the head and eyes, and generates the mouth with a `d3.arc` path. It leverages React to render the SVG elements, using CSS to remove page margins and JavaScript to manage the layout. The visualization demonstrates a straightforward approach to combining React and D3 for basic geometric shapes.